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)

簡單的羅列幾種寫法，這種寫法可能考慮的不是很全面，有更好的方式能夠下方留言。