axios基礎用法

概述：

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

特征：

• 從瀏覽器中創建XMLHttpRequest
• 從node.js發出http請求
• 支持Promise API
• 攔截請求和響應
• 轉換請求和響應數據
• 取消請求
• 自動轉換JSON數據
• 客戶端支持防止CSRF/XSRF

2.安裝

• npm install axios
• 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);

新興實踐

const service = axios.create({
  baseURL: process.env.BASE_API,
  timeout: 100000
})

//  請求攔截器
service.interceptors.request.use(
  config => {
    config.headers['Content-Type'] = 'application/json'
    if (store.getters.token) {
      // 讓每個請求攜帶token
      config.headers['Authorization'] = store.getters.token
    }
    return config
  },
  error => {
    Toast.failed('網絡異常，請檢查網絡連接')
    console.log(error) // for debug
    return Promise.reject(error)
  }
)

// 響應攔截器
service.interceptors.response.use(
  response => {
    const res = response.data
    if (res.code && res.code !== 200) {
        Toast.failed(res.message)
    }
    return response
  },
  error => {
    Toast.failed('網絡異常，請檢查網絡連接')
    return Promise.reject(error)
  }
)
export default service