Vue中Axios封装API接口的思路及方法

一.aixos的封装

 

1.我们为什么要去封装axios？

在vue项目中，和后台交互获取数据这块，我们通常使用的是axios库，它是基于promise的http库，可运行在浏览器端和node.js中。他有很多优秀的特性，例如拦截请求和响应、取消请求、转换json、客户端防御XSRF等。
axios 封装了原生的 XHR，让我们发送请求更为简单，但假设在一个成百上千个 vue 文件的项目中，我们每一个 vue 文件都要写 axios.get()或 axios.post() 岂不是很麻烦？后期的维护也不方便，所以我们要对 axios 进行进一步的封装。
 

2.安装

我们可以通过 NPM  CNPM(淘宝镜像) yarn 来下载我们的aixos

如： npm install aixos 

 

3.创建文件

在我们的VUE根目录中创建一个request文件夹，在其中创建api.js以及request.js;

api.js用来统一管理我的们的接口，

request.js用来封装我们的axios

4.引入

在request.js中引入

import axios from ‘axios’

 

5.环境的切换

//在开发环境中的测试 development
if(process.env.NODE_ENV == ‘development’) {
axios.defaults.baseURL = ‘http://120.53.31.103:84/’
}
//在生产环境中的测试 production
if(process.env.NODE_ENV ==