Axios是一個基於promise的HTTP庫，可以用在瀏覽器和node.js中。

安裝

使用npm:

$ npm install axios

使用bower

$ bower install axiso

使用cdn：

<script src='https://unpkg.com/axios/dist/axios.min.js'></script>

例子

執行GET請求

//為給定ID的user建立請求
axiso.get('/user?ID=12345').then(
    function(res){
        console.log(res);
        }).catch(function(err){
            console.log(err)
        });
//可選地，上面的請求可以這樣做
axios.get('/user',{
    params:{
        ID:12345,
    }
}).then(
    function(res){
        console.log(res);
    }
).catch(function(err){})
 
 

執行POST請求

axios.post('user/',{
    firstName:'Fred',
    lastName:'File'
}).then(function(res){
    console.log(res)
}).catch(function(err){
    console.log(err)
})

執行多個併發請求,.then以後使用axios.spread方法分割請求的資料，一一對應。

function getUserAccount(){
    return axios.get('/user/12345');
}
function getUserPermissions(){
    return axios.get('/user/12345/permissions')
}
axios.all([getUserAccount(),getUserPermissions()]).then(axios.spread(function(acct,perms){
    //兩個請求現在都執行完成
}))
 

axios API
可以通過向axiso傳遞相關配置來建立請求
axios(config)
//傳送post請求

axios({
    method:'post',
    url:'/user/12345',
    data:{
        first:1,
        last:2
    }
})

為方便起見，為所有支援的請求方法提供了別名
axios.request(config)
axios.get(url[, config])
axios.delete(url[, config])
axios.head(url[, config])
axios.post(url[, data[, config]])
axios.put(url[, data[, config]])
axios.patch(url[, data[, config]])

建立例項
axios.create([config])

var instance = axios.create({
    baseUrl:'https://some-domain.com/api/',
    timeout:1000,
    headers:{'X-Custom-Header': 'foobar'}
})

例項方法：
以下是可用的例項方法。指定的配置將與例項的配置合併
axios#request(config)
axios#get(url[, config])
axios#delete(url[, config])
axios#head(url[, config])
axios#post(url[, data[, config]])
axios#put(url[, data[, config]])
axios#patch(url[, data[, config]])

請求配置

{
    //url是用於請求伺服器的url
    url:'/user',
    //method是建立請求時使用的方法
    method:'get',
    //baseUrl將自動加在url前面，除非url是一個絕對url。
    //它可以通過設定一個baseUrl便於axios例項的方法傳遞相對URL
    baseUrl:'https://some-domain.com/api/',
    //transformRequest允許在向伺服器傳送前，修改請求的資料。
    //只能用在post，put，patch這幾個請求方法
    //後面陣列中的函式必須返回一個字串，或ArrayBuffer，或Stream
    transformRequest:[function(data){
       //對data進行任意轉換處理。
       return data;
    }],
    //Transform Response在傳遞給then/catch錢，允許修改響應的資料
    transformResponse：[function(data){
        //對data進行任意轉換處理
        return data;
    }],
    //headers是即將被髮送的自定義請求頭
    headers:{'X-Requested-With': 'XMLHttpRequest'},
    //params是即將與請求一起傳送的url引數
    //必須是一個無格式物件plain object或URLSearchParams物件
    params:{
        ID:12345
    },
    //paramsSerializer是一個負責params序列化的函式。
    //（e.g.http://www.npmjs.com/package/qs,http://api.jquery.com/jquery.param/）
    paramsSerializer:function(params){
        return Qs.stringfy(params,{arrayFormat:'brackets'})
    },
    //data是作為請求主體被髮送的資料
    //只適用與put，post，和patch
    //在沒有設定transformRequest時，必須是以下型別之一：string，plain object，ArrayBuffer，ArrayBufferView，URLSearchParams
    data: {
        firstName: 'Fred'
    },
    //timeout指定了請求超時的毫秒數，
    //如果請求超過了timeout的時間，請求將被中斷，
    timeout:1000,
    //withCredentials表示跨域請求時是否需要使用憑證，
    withCredentials:false,//預設值
    //adapter允許自定義處理請求，以使測試更輕鬆，
    //返回一個promise並應用一個有效的響應。
    adapter:function(config){},
    //auth表示應該使用http基礎驗證，並提供資料。
    //這將設定一個Authorization頭，覆蓋掉現有的任意使用headers設定的自定義Authorization頭。
    auth:{
        username:'janedoe',
        password:'s00pers3cret'
    },
    //responseType表示伺服器響應的資料型別，可以是arraybuffer，blod，document，json，text，stream，
    responseType:json,//預設值
    //xsrfHeaderName是承載xsrf token的值的http頭的名稱。
    xsrfHeaderName:'X-XSRF-TOKEN',//預設值
    //onUploadProgress允許為上傳處理進度事件。
    onUploadProgress：function(progressEvent){
        //對原生進度事件的處理
    },
    //onDownloadProgress允許為下載處理進度事件。
    onDownloadProgress:function(){
        //對原生進度事件的處理
    },
    //maxContentLength定義允許的響應內容的最大尺寸。
    maxContentLength：2000,
    //validateStatus定義與給定的http相應狀態碼是resolve或reject promise。如果validateStatus返回 `true` (或者設定為 `null` 或 `undefined`)，promise 將被 resolve; 否則，promise 將被 rejecte。
    validateStatus: function (status) {
        return status >= 200 && status < 300; // 預設的
    },
    // `maxRedirects` 定義在 node.js 中 follow 的最大重定向數目
    // 如果設定為0，將不會 follow 任何重定向
    maxRedirects: 5, // 預設的

    // `httpAgent` 和 `httpsAgent` 分別在 node.js 中用於定義在執行 http 和 https 時使用的自定義代理。允許像這樣配置選項：
    // `keepAlive` 預設沒有啟用
    httpAgent: new http.Agent({ keepAlive: true }),
    httpsAgent: new https.Agent({ keepAlive: true }),
    // 'proxy' 定義代理伺服器的主機名稱和埠
    // `auth` 表示 HTTP 基礎驗證應當用於連線代理，並提供憑據
    // 這將會設定一個 `Proxy-Authorization` 頭，覆寫掉已有的通過使用 `header` 設定的自定義 `Proxy-Authorization` 頭。
    proxy: {
      host: '127.0.0.1',
      port: 9000,
      auth: : {
        username: 'mikeymike',
        password: 'rapunz3l'
      }
    },
    // `cancelToken` 指定用於取'消請求的 cancel token
    // （檢視後面的 Cancellation 這節瞭解更多）
    cancelToken: new CancelToken(function (cancel) {
   })
}

名詞講解：
http協議基本認證 Authorization。
在瀏覽網頁的時候，瀏覽器會彈出一個登陸驗證的對話方塊，如下圖，這就是使用HTTP基本renzheng。

HTTP基本認證的過程。
第一步：客戶端傳送http request給伺服器。
第二步：因為request中沒有包含Authorization header，伺服器會返回一個401 Unauthozied給客戶端，並且在Response的header“WWW-Authenticate”中新增資訊。


第三步：客戶端把使用者名稱和密碼用BASE64編碼後，放在Authorization header中傳送給伺服器， 認證成功。

第四步：伺服器將Authorization header中的使用者名稱密碼取出，進行驗證， 如果驗證通過，將根據請求，傳送資源給客戶端/。

HTTP OAuth認證。
OAuth 對於Http來說，就是放在Authorization header中的不是使用者名稱密碼， 而是一個token.

配置的預設值/defaults

你可以指定將被用在各個請求的配置預設值
全域性的axios預設值

axios.defaults.baseURl = 'http://api';
aixos.defaults.headers.common['Authorization']=AUTH_TOKEN;
axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded';

自定義例項預設值

// 建立例項時設定配置的預設值
var instance = axios.create({
  baseURL: 'https://api.example.com'
});

// 在例項已建立後修改預設值
instance.defaults.headers.common['Authorization'] = AUTH_TOKEN;

配置的優先順序
配置會以一個優先順序進行合併。這個順序是：在lib/defaults.js找到庫的預設值，然後是例項的defaults屬性，最後是請求的config引數。後者將優先於前者。這裡是一個例子：

//使用由庫提供的配置的預設值來建立例項
//此時超時配置的預設值是0
var instance= axios.create();
//覆寫庫的超時預設值
//現在，在超時前，所有的請求都會等待2.5秒
instance.defaults.timeout = 2500;
//為已知需要花費很長時間的請求覆寫超時設定
instance.get('/url',{
    timeout:5000
})

攔截器

在請求或響應被then或catch處理前攔截它們

//新增請求攔截器
axios.interceptors.request.use(function(config){
        //在傳送請求前做些什麼
        return config;
    },functoin(err){
        //對請求錯誤做些什麼
        return Promise.reject(err);
});
//新增響應攔截器
axios.interceptors.response.use(function(res){
        //對響應資料做點什麼
        return res;
    },function(err){
        //對響應錯誤做點什麼
        return Promise.reject(err)
    }
)

如果你想在稍後移除攔截器，可以這樣：

var myInterceptor = axios.ineterceptors.request.use(function(){});
axios.interceptors.request.eject(myInterceptor);

可以為自定義axios例項新增攔截器

var instance = axios.create();
instance.interceptors.request.use(function(){});

取消

使用cancel token取消請求。可以使用CancelToken.source工廠方法建立cancel token，像這樣：

var CancelToken = axios.CancelToken;
var source = CancelToken.source();
axios.get('/user/12345',{
    cancelToken:source.token
}).catch(function(thrown){
    if(axios.isCancel(thrown)){
        console.log('Request canceled',thrown.message)
    }else{
        //處理錯誤
    }
});
//取消請求（message引數是可選的）
source.cancel('sadsad')

還可以通過傳遞一個executor函式到CancelToken的建構函式來建立cancle token：

var CancelToken = axios.CancelToken;
var cancel;
axios.get('/user/12345',{
    cancelToken:new CnacelToken(function executor(c){
        //executor函式接受一個cancel函式作為引數
        cancel = c;
    })
});
//取消請求
cancel();