axios也是基於XMLHttpRequest物件的一種請求資料的方式, 在尤大大的官方推薦下,被越來越多的人所熟知, 我也小小的去用了一下, 感覺上玩起來和vue-resource相差無幾, 可能是還有什麼深不可測的優勢是我這種小白無法理解的. 總之, 大神說用什麼好, 那我去用就好了, 反正都是工具嘛, 用著順手最重要.

一. axios的幾大特徵

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

二. axios的安裝使用

安裝就很簡單了, npm/cnpm/bower  install axios, 安裝好依賴就可以用起來了, 不需要像vue-resource一樣需要在main.js中配置, 當然, 關於axios基於本地json檔案測試時的使用配置, 另起一個部落格寫了, 對前端新手來說, 那還是個不小的坑. 

[更新]關於在vue中全域性注入axios:

在main.js中如下宣告使用
import axios from 'axios';
Vue.prototype.$axios=axios;
那麼在其他vue元件中就可以this.$axios呼叫使用

// 向具有指定ID的使用者發出請求
axios.get('/user?ID=12345')
  .then(function (response) {
    console.log(response);
  })
  .catch(function (error) {
    console.log(error);
  });
// 也可以通過 params 物件傳遞引數
axios.get('/user', {
    params: {
      ID: 12345
    }
  })
  .then(function (response) {
    console.log(response);
  })
  .catch(function (error) {
    console.log(error);
  });
 

axios.post('/user', {
    firstName: 'Fred',
    lastName: 'Flintstone'
  })
  .then(function (response) {
    console.log(response);
  })
  .catch(function (error) {
    console.log(error);
  });

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) {
    //兩個請求現已完成
  }));
 

這裡值得注意的是, 傳送GET請求時,可以將引數直接拼接在url地址中, 也可以通過配置params引數傳遞. 傳送POST請求時, 傳遞引數不能用params配置, 只需要一個{請求引數}物件即可.

三.axios API

與vue-resource差不多, axios 也封裝了7種請求API, 他們可以通過配置config來使用, 如下:

// 傳送一個 POST 請求
axios({
  method: 'post',
  url: '/user/12345',
  data: {
    firstName: 'Fred',
    lastName: 'Flintstone'
  }
});

也可以直接使用封裝好的別名直接呼叫, 此時就不需要指定config中的url，method和data屬性, 如下:

• axios.get（url [，config]）
  
• axios.post（url [，data [，config]]）
  
• axios.request（config）
  
• axios.delete（url [，config]）
  
• axios.head（url [，config]）
  
• axios.put（url [，data [，config]]）
  
• axios.patch（url [，data [，config]]）
  

axios也是基於Promise 執行回撥函式的, 使用then方法接收請求回來的資料, 使用catch捕捉錯誤異常. 當然, 在then方法內部, 可以對伺服器返回的不同狀態碼進行判斷, 然後執行不同的操作, 配合node.js使用風味更佳.

四. 關於config配置引數

axios除了method, data,url 等基本配置外, 也提供了很多其他的請求配置引數, 其配置引數如下:

{
  // `url`是將用於請求的伺服器URL
  url: '/user',
  // `method`是發出請求時使用的請求方法
  method: 'get', // 預設
  // `baseURL`將被新增到`url`前面，除非`url`是絕對的。
  // 可以方便地為 axios 的例項設定`baseURL`，以便將相對 URL 傳遞給該例項的方法。
  baseURL: 'https://some-domain.com/api/',
  // `transformRequest`允許在請求資料傳送到伺服器之前對其進行更改
  // 這隻適用於請求方法'PUT'，'POST'和'PATCH'
  // 陣列中的最後一個函式必須返回一個字串，一個 ArrayBuffer或一個 Stream
  transformRequest: [function (data) {
    // 做任何你想要的資料轉換
    return data;
  }],
  // `transformResponse`允許在 then / catch之前對響應資料進行更改
  transformResponse: [function (data) {
    // Do whatever you want to transform the data
    return data;
  }],
  // `headers`是要傳送的自定義 headers
  headers: {'X-Requested-With': 'XMLHttpRequest'},
  // `params`是要與請求一起傳送的URL引數
  // 必須是純物件或URLSearchParams物件
  params: {
    ID: 12345
  },
  // `paramsSerializer`是一個可選的函式，負責序列化`params`
  // (e.g. https://www.npmjs.com/package/qs, http://api.jquery.com/jquery.param/)
  paramsSerializer: function(params) {
    return Qs.stringify(params, {arrayFormat: 'brackets'})
  },
  // `data`是要作為請求主體傳送的資料
  // 僅適用於請求方法“PUT”，“POST”和“PATCH”
  // 當沒有設定`transformRequest`時，必須是以下型別之一：
  // - string, plain object, ArrayBuffer, ArrayBufferView, URLSearchParams
  // - Browser only: FormData, File, Blob
  // - Node only: Stream
  data: {
    firstName: 'Fred'
  },
  // `timeout`指定請求超時之前的毫秒數。
  // 如果請求的時間超過'timeout'，請求將被中止。
  timeout: 1000,
  // `withCredentials`指示是否跨站點訪問控制請求
  // should be made using credentials
  withCredentials: false, // default
  // `adapter'允許自定義處理請求，這使得測試更容易。
  // 返回一個promise並提供一個有效的響應（參見[response docs]（＃response-api））
  adapter: function (config) {
    /* ... */
  },
  // `auth'表示應該使用 HTTP 基本認證，並提供憑據。
  // 這將設定一個`Authorization'頭，覆蓋任何現有的`Authorization'自定義頭，使用`headers`設定。
  auth: {
    username: 'janedoe',
    password: 's00pers3cret'
  },
  // “responseType”表示伺服器將響應的資料型別
  // 包括 'arraybuffer', 'blob', 'document', 'json', 'text', 'stream'
  responseType: 'json', // default
  //`xsrfCookieName`是要用作 xsrf 令牌的值的cookie的名稱
  xsrfCookieName: 'XSRF-TOKEN', // default
  // `xsrfHeaderName`是攜帶xsrf令牌值的http頭的名稱
  xsrfHeaderName: 'X-XSRF-TOKEN', // default
  // `onUploadProgress`允許處理上傳的進度事件
  onUploadProgress: function (progressEvent) {
    // 使用本地 progress 事件做任何你想要做的
  },
  // `onDownloadProgress`允許處理下載的進度事件
  onDownloadProgress: function (progressEvent) {
    // Do whatever you want with the native progress event
  },
  // `maxContentLength`定義允許的http響應內容的最大大小
  maxContentLength: 2000,
  // `validateStatus`定義是否解析或拒絕給定的promise
  // HTTP響應狀態碼。如果`validateStatus`返回`true`（或被設定為`null` promise將被解析;否則，promise將被
  // 拒絕。
  validateStatus: function (status) {
    return status >= 200 && status < 300; // default
  },
  // `maxRedirects`定義在node.js中要遵循的重定向的最大數量。
  // 如果設定為0，則不會遵循重定向。
  maxRedirects: 5, // 預設
  // `httpAgent`和`httpsAgent`用於定義在node.js中分別執行http和https請求時使用的自定義代理。
  // 允許配置類似`keepAlive`的選項，
  // 預設情況下不啟用。
  httpAgent: new http.Agent({ keepAlive: true }),
  httpsAgent: new https.Agent({ keepAlive: true }),
  // 'proxy'定義代理伺服器的主機名和埠
  // `auth`表示HTTP Basic auth應該用於連線到代理，並提供credentials。
  // 這將設定一個`Proxy-Authorization` header，覆蓋任何使用`headers`設定的現有的`Proxy-Authorization` 自定義 headers。
  proxy: {
    host: '127.0.0.1',
    port: 9000,
    auth: : {
      username: 'mikeymike',
      password: 'rapunz3l'
    }
  },
  // “cancelToken”指定可用於取消請求的取消令牌
  // (see Cancellation section below for details)
  cancelToken: new CancelToken(function (cancel) {
  })
}

使用者可以自定義配置引數,優先順序順序是lib / defaults.js中的庫預設值，然後是例項的defaults屬性，最後是請求的config引數。 後者將優先於前者. 舉個栗子:

//使用庫提供的配置預設值建立例項
//此時，超時配置值為`0`，這是庫的預設值
var instance = axios.create（）;
 
//覆蓋庫的超時預設值
//現在所有請求將在超時前等待2.5秒
instance.defaults.timeout = 2500;
 
//覆蓋此請求的超時，因為它知道需要很長時間
instance.get（'/ longRequest'，{
   timeout：5000
}）;

五. 關於全域性攔截

//新增請求攔截器
axios.interceptors.request.use（function（config）{
     //在傳送請求之前做某事
     return config;
   }，function（error）{
     //請求錯誤時做些事
     return Promise.reject（error）;
   }）;
 
//新增響應攔截器
axios.interceptors.response.use（function（response）{
     //對響應資料做些事
      return response;
   }，function（error）{
     //請求錯誤時做些事
     return Promise.reject（error）;
   }）;

在server端的app.js檔案中,增加如下判斷程式碼:

//實現全域性攔截
app.use(function (req, res, next) {
  if (req.cookies.userId) {
    next();
  } else {
    if (req.originalUrl === '/users/login' || req.originalUrl === '/users/logout' || req.path === '/goods/list') {
      next();
    }else{
      res.json({
        status:'10001',
        msg:'當前未登入',
        result:''
      })
    }
  }
});