vue2项目 封装一个请求组件

好的，我可以为您介绍一下如何封装一个请求组件。

首先，我们可以创建一个名为 `request.js` 的文件，用于封装请求方法。该文件应该包含以下代码：

import axios from 'axios'

const request = axios.create({
  baseURL: process.env.VUE_APP_BASE_API,
  timeout: 5000 // 请求超时时间
})

// 请求拦截器
request.interceptors.request.use(
  config => {
    // 在请求发送之前做些什么
    return config
  },
  error => {
    // 对请求错误做些什么
    console.error(error) // 打印错误信息
    return Promise.reject(error)
  }
)

// 响应拦截器
request.interceptors.response.use(
  response => {
    // 对响应数据做些什么
    return response.data
  },
  error => {
    // 对响应错误做些什么
    console.error(error) // 打印错误信息
    return Promise.reject(error)
  }
)

export default request

在上述代码中，我们使用了 axios 库来发送请求，并通过拦截器处理请求和响应。`process.env.VUE_APP_BASE_API` 是一个环境变量，用于设置请求的基础 URL。

接下来，我们可以创建一个 `api.js` 文件，用于封装具体的 API 请求。该文件应该包含以下代码：

import request from '@/utils/request'

export function getUserInfo (params) {
  return request({
    url: '/user/info',
    method: 'get',
    params
  })
}

export function login (data) {
  return request({
    url: '/user/login',
    method: 'post',
    data
  })
}

在上述代码中，我们使用了 `request` 对象来发送请求，并暴露了两个方法，用于获取用户信息和登录。

最后，我们可以创建一个名为 `Request.vue` 的组件，用于展示请求的结果。该组件应该包含以下代码：

<template>
  <div>
    <h1>{{ title }}</h1>
    <p>{{ result }}</p>
  </div>
</template>

<script>
import { getUserInfo } from '@/api'

export default {
  name: 'Request',
  data () {
    return {
      title: '请求结果',
      result: ''
    }
  },
  mounted () {
    getUserInfo().then(data => {
      this.result = data
    })
  }
}
</script>

在上述代码中，我们使用了 `getUserInfo` 方法来获取用户信息，并将结果展示在页面上。

以上就是封装请求组件的基本步骤，希望对您有所帮助。