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)

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