axios基礎用法

概述：

1.axios：一個基於Promise用於瀏覽器和nodejs的HTTP客戶端。本質是對ajax的封裝。

特徵：

1》從瀏覽器中建立XMLHttpRequest
2》從node.js發出http請求
3》支持Promise API
4》攔截請求和響應
5》轉換請求和響應數據
6》取消請求
7》自動轉換JSON數據
8》客戶端支持防止CSRF/XSRF

2.安裝

1》npm install axios
2》<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
import axios from "axios"

3.API

1》axios(config)
eg: axios({
    method:"post",
    url:"/user",
    data:{
        firstName:"nanhua",
        lastName:"qiushui"
    }
});
2》axios(url,config)    //默認爲get請求
3》請求方法別名
    axios.request(config)
    axios.get(url,config)
    axios.post(url,data,config)
    axios.delete(url,config)
    axios.head(url,config)
    axios.put(url,data,config)
    axios.patch(url,data,config)
4》併發
    自定義配置建立axios實例
    var instance = axios.create({
        baseURL:"https://some-domain.com/api/",
        timeout:1000,
        headers:{"X-Custom-Header":"foobar"}
    })
    自定義實例默認值
    //建立實例時設置
    //實例建立後修改默認值（設置全局axios默認值）
    axios.defaults.baseURL = "https://api.example.com";
    axios.defaults.headers.common['Authorization'] = AUTH_TOKEN;
    axios.defaults.headers.post["Content-Type"] = "application/x-www-form-urlencoded";

    併發：axios.all(iterable)
    eg: axios.all([
        axios.get("https://api.github.com/xxx/1");
        axios.get("https://api.github.com/xxx/2");
    ]).then(axios.spread(function(userResp,reposResp){
        console.log("User",userResp.data);
        console.log("Repositories",reposResp.data);
    }))
    * 當全部的請求都完成後，會收到一個數組，它包含着響應對象，其中的順序和請求發送的順序相同，能夠用axios.spread分割成多個單獨的響應對象。
5》config參數
    baseURL: 'https://some-domain.com/api/',  //將自動加在url前面，除非url是一個絕對URL
    
    //容許在向服務器發送前，修改請求數據
    //只能用在PUT\POST\PATCH
    //後面數組的函數必須返回一個字符串/ArrayBuffer或Stream
    transformRequest:[function(data){
        //對data進行任意轉換處理
        return data;
    }],

    //在傳遞給then/catch以前，容許修改響應數據
    transformResponse: [function (data) {
        return data;
    }],

    //即將被髮送的自定義請求頭
    headers:{
        'X-Requested-With': 'XMLHttpRequest'
    },

    //即將與請求一塊兒發送的URL參數
    params:{
        ID: 12345
    },

    //負責params序列化的函數
    paramsSerializer:function(params){
        return Qs.stringify(params,{arrayFormat: "brackets"});
    },

    //超時
    timeout: 1000,

    //表示跨域請求時是否須要使用憑證
    withCredentials: false,

    //容許響應內容的最大尺寸
    maxContentLength: 2000,

    //對打重定向數目
    maxRedirects:5,

    //是否啓用長鏈接
    httpAgent: new http.Agent({
        keepAlive: true
    }),
    httpsAgent: new https.Agent({
        keepAlive: true
    }),

    //代理服務器設置
    proxy:{
        host:"127.0.0.1",
        port: 9000,
        auth:{
            username:"nanhuaqiushui",
            password:"Huawei@123"
        }
    }

6》響應結構
{
    data:{},
    status:200,
    statusText:"OK",
    headers:{},  //服務器響應的頭
    config:{}   //爲請求提供的配置信息
}

7》攔截器
//請求攔截器
axios.interceptors.request.use(function(config){
    //發送請求以前作些什麼
    return config;
},function(error){
    //請求錯誤以後作些什麼
    return Promise.reject(error);
})
//響應添加攔截器
axios.interceptors.response.use(function(config){
    //發送請求以前作些什麼
    return config;
},function(error){
    //請求錯誤以後作些什麼
    return Promise.reject(error);
})

//移除攔截器
var myInterceptor = axios.interceptors.request.use(function(){
    ...
})
axios.interceptors.request.eject(myInterceptor);