Vue如何封装Axios请求

Vue如何封装Axios请求

话不多说，直接上代码：

//我使用的是vue-cli框架，vscode编辑器

1.安装axios。

在控制台通过npm i axios --save安装，如图：

安装好之后，在package.json中检查，如图，如果有的话，就说明安装成功。

2.封装代码。

（1）首先在src目录下，新建一个utils文件夹，用来放置封装的代码文件。

（2）在utils问价夹中新建一个request.js文件。

（3）在request.js中编写代码。

//引入axios
import axios from "axios
//创建axios实例
const instance = axios.create({
  baseURL: 'https://some-domain.com/api/',//公共地址
  timeout: 1000,//请求超时时间
  headers: {'X-Custom-Header': 'foobar'}//请求头，可以不写
});
// 添加请求拦截器
instance.interceptors.request.use(function (config) {
    // 在发送请求之前做些什么
    return config;
  }, function (error) {
    // 对请求错误做些什么
    return Promise.reject(error);
  });

// 添加响应拦截器
instance.interceptors.response.use(function (response) {
    // 对响应数据做点什么
    return response;
  }, function (error) {
    // 对响应错误做点什么
    return Promise.reject(error);
  });

//导出axios实例
export default instance

到这一步，封装基本完成，使用时，在Vue组件中引入即可，如图：

（4）利用async,await对其进行进一步封装。

//引入axios实例
import instance from "./request"
async function getRotationChart() {
    let {
        data
    } = await instance.get('banner/list')
    return data
}
export {
    getRotationChart
}

使用时，同样是在页面引入即可。