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中编写代码。

//引入axiosimport axiosfrom "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实例exportdefault instance

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

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

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

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