vue中request文件

在Vue中，通常会将所有的请求都封装在一个request文件中，这样可以方便地管理和维护请求的代码。该文件通常包含以下内容：

1. 引入axios库：axios是一个常用的基于Promise的HTTP请求库，可以用于浏览器和Node.js中。

2. 创建axios实例：由于axios可以创建多个实例，我们通常需要在request文件中创建一个axios实例，并设置一些默认配置，如请求超时时间、请求头等。

3. 封装请求方法：在request文件中，我们通常会封装一些通用的请求方法，如get、post、put、delete等。这些方法通常包含以下参数：

- url：请求的接口地址；
- params：请求参数；
- config：请求配置，如请求头、超时时间等。

4. 导出封装好的请求方法：将封装好的请求方法导出，在其他组件中可以直接引用。

以下是一个简单的request文件示例：

import axios from 'axios'

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

// 请求拦截器
service.interceptors.request.use(
  config => {
    // 在请求发送之前可以做一些操作，如添加请求头等
    return config
  },
  error => {
    // 请求错误时
    console.log(error)
    return Promise.reject(error)
  }
)

// 响应拦截器
service.interceptors.response.use(
  response => {
    // 在响应成功之后可以做一些操作，如处理响应数据等
    return response.data
  },
  error => {
    // 在响应错误时可以做一些操作，如处理错误信息等
    console.log(error)
    return Promise.reject(error)
  }
)

// 封装get请求
export function get(url, params = {}, config = {}) {
  return service.get(url, {
    params,
    ...config
  })
}

// 封装post请求
export function post(url, data = {}, config = {}) {
  return service.post(url, data, config)
}

// 封装put请求
export function put(url, data = {}, config = {}) {
  return service.put(url, data, config)
}

// 封装delete请求
export function del(url, params = {}, config = {}) {
  return service.delete(url, {
    params,
    ...config
  })
}