Vue推荐我们使用Axios，vue-resource在Vue2.0后就不再更新，本文对Axios的用法不做过多的介绍，只是在项目上简单封装及使用，如果有需要了解的，可以访问github
https://github.com/axios/axios
复制
1 安装
介绍比较常用的两种方式
# npm npm install axios # yarn yarn add axios
复制
2 引用
因为axios不是Vue的插件，所以不能使用use方式
import axios from 'axios'
复制
3 封装的原因
其实axios用法很简单，请求方式也是支持的很全面，为什么我们要再次封装呢，通常我们的项目会有很多页面，同时也会有很多接口，请求方式也是会有很多种，如果不统一封装，后期修改会很繁琐，也不容易维护和迭代。
4 分析
既然要封装，那我们肯定要考虑的比较全面，把项目中用到的可能性都要考虑进来，所以我们从以下几方面考虑：
- 请求是否需要设置请求头（一般可能需要设置token）
- 请求方式（get、post、delete等）
- 请求地址（这个地址不是全路径，后面分析）
- 请求参数（每个接口不一定都需要参数）
重点说下第二个请求方式中的get请求，我们项目上get请求也有两种情况，一种是参数以&拼接，
/sys/user/login?name=value&name1=value1
复制
另一种是以/方式拼接，
/sys/user/login/value/value1
复制
为什么要重点说呢，因为如果是&拼接的话，需要使用 params对象，而不是data
5 封装
既然分析完了，那就动手写代码，新建request.js文件，引用axios
import axios from 'axios'
复制
编写封装方法，此方法接收五个参数，请求方式、请求地址、请求参数（非必填）、请求模式（针对get，非必填）、请求头设置（非必填）。
import axios from 'axios'; /** * axios * @param：{string} method 请求类型,必填 * @param：{string} url 请求地址,必填 * @param：{string} params 请求参数,非必填 * @param：{string} type 请求模式，针对get，params/data * @param：{string} variation 请求头,非必填 **/ export const liRequest = (method, url, params = {}, type = "data", isToken = true) => { let headers = { 'Content-Type': 'application/json', } if (isToken) { headers['Authorization'] = 'token' } if (method == 'get' || type == "params") { console.log("params") return axios({ method: method, url: url, headers: headers, params: params }).then(res => res.data); } else { return axios({ method: method, url: url, headers: headers, data: params }).then(res => res.data); } };
复制
token这个是随便写的，因为每个系统后台要求的都不相同，所以用token代替，导出这个liRequest方法就可以直接使用了。
get请求，不需要参数，不需要token
liRequest('get', '/user/page', query, 'params',false)
复制
get请求，需要参数，并且需要token
liRequest('get', '/user/page','params',query)
复制
post请求，需要参数及token
liRequest('post', '/user/page', query)
