Vue项目中Axios的简单封装

Axios 是一个基于 promise 的 HTTP 库，能够用在浏览器和 node.js 中。本文重点介绍在Vue项目中简单封装Axios

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 分析

既然要封装，那咱们确定要考虑的比较全面，把项目中用到的可能性都要考虑进来，因此咱们从如下几方面考虑：

1. 请求是否须要设置请求头（通常可能须要设置token）

2. 请求方式（get、post、delete等）

3. 请求地址（这个地址不是全路径，后面分析）

4. 请求参数（每一个接口不必定都须要参数）

重点说下第二个请求方式中的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)

简单的罗列几种写法，这种写法可能考虑的不是很全面，有更好的方式能够下方留言。