異步請求axios的使用

基於前面一篇文章里對Promise對象的理解，本文主要對異步請求axios進行一個理解學習。

1.低版本瀏覽器不支持Promise對象的finally方法的問題解決

安裝promise.prototype.finally包，並進行引用require('promise.prototype.finally').shim()

參考原文鏈接：https://blog.csdn.net/u014291497/article/details/80788377

2.axios的全局設置

3.axios Interceptors 攔截器

應用場景：如，常用於在發送請求前顯示一下loading...加載中遮罩層之類的，並且在返回數據之后進行關閉，通過攔截器進行統一處理更便捷

4.注意區分axios請求方法為get和post時需要傳遞的參數key的差異

5.http協議的六種請求方法及區別

get、head、put、delete、post、options，具體區別見參考鏈接

參考原文鏈接：https://www.cnblogs.com/wei-hj/p/7859707.html

6.封裝及調用方式

//引入安裝的包:axios
import axios from 'axios'

// 引入安裝的包:promise.prototype.finally
// 用於解決低版本瀏覽器不支持Promise對象的finally方法，因此需要引入對應的polyfill(如果需要用到的話)
require('promise.prototype.finally').shim()

// Global axios defaults  全局的axios的設置
axios.defaults.timeout = 3000//請求超時的時間設置
axios.defaults.baseURL = 'https://api.example.com'//請求的基路徑

// Interceptors 攔截器
// 常用於在發送請求前顯示一下loading...加載中遮罩層之類的，並且在返回數據之后進行關閉，通過攔截器進行統一處理更便捷
// Add a request interceptor 添加一個請求時的攔截器
axios.interceptors.request.use(
    config => {
    	// Do something before request is sent
    	// 此處寫一些請求發送之前需要做的事
        return config;
    },
    error => {
    	// Do something with request error
        return Promise.reject(error);
    });
    
// Add a response interceptor 添加一個響應后的攔截器
axios.interceptors.response.use(
    response => {
    	// Do something with response data
        return response;
    },
    error => {
    	// Do something with response error
        return Promise.reject(error)
    });

// 對axios請求進行封裝,定義了一個函數http,接收兩個參數request <= {url: '', method: ''}, data: 其他按需需要傳的參數對象
// 返回值是一個Promise的實例，由前面對Promise的學習已經知道，Promise對象代表一個異步操作，resolve函數可以將異步操作的結果作為參數傳遞出去
// 調用Promise的實例的then方法，then方法的回掉函數的參數里，就是Promise對象傳出來的值了
// 所以，調用方法示例如下：
//	http(url.login, params).then((value) => {
//		//Do something with response data: value				
//	})
const http = (request, data) => {
    return new Promise((resolve, reject) => {
    	// 依據請求方法的不同，axios需要傳遞的key值不同，所以進行一下處理
    	// method為post時，key值用data
    	// method為get時，key值用params(其他幾個方法不常用，但是axios文檔里有涉及到，記得和post不是一伙就行了，詳細參閱其他文檔)
    	// 數組.indexOf(數組中的某個值)  =>  查找該值在數組中的索引，不存在為-1
        let method = request.method,
            params = ['get', 'delete', 'head'].indexOf(method) > -1 ? {
                params: data
            } : {
                data: data
            };
        axios({
            ...request,
            ...params
        }).then(response => {
            resolve(response.data);//將異步操作的結果作為參數傳遞出去, 實例的then方法的回調函數的參數用於接收
        }, err => {
            reject(err)
        })
    })
}
//在此處集中管理所有需要請求的url信息url和method，其他參數各自處理
const url = {
    exportFile: {
        url: '/file/exportFile',
        method: 'post',
        headers: {
            responseType: 'blob'
        },
        timeout: 80000
    },
    searchRoutes: {
        url: '/searchRoutes',
        method: 'post'
    }
    // ...
}
//最后，將定義好的http和url暴露出去
export {
    http,
    url
}

參考文檔鏈接：https://www.npmjs.com/package/axios

7.定義函數http部分ES6語法的理解