axios入門

安裝到項目中：

# npm install axios --save

在項目中import使用：

import axios from 'axios'

Axios和其他的ajax庫都是很類似的，提供了2種使用的方式一種是直接使用實例方法的如：
下面是實例的所有可用方法，方法中的config會與axios實例中的config合並。（實例可以將一些通用的config先配置好）

axios.get('/user?ID=12345')
.then(function (response) {
  console.log(response);
})
.catch(function (error) {
  console.log(error);
});

　

Config 配置：

{
  // `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) {
  })
}

 

response 響應：

// 服務器返回的數據
data: {},
// HTTP狀態嗎
status: 200,
// 服務器返回的消息
statusText: 'OK',
// 返回頭
headers: {},
// 在返回我們的配置
config: {}

 

統一配置：

axios.defaults.timeout = 5000;
axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded;charset=UTF-8';
axios.defaults.baseURL = 'http://www.xxxx.xxx/api';
// axios.defaults.baseURL = 'http://192.168.1.129:8383';

 

Interceptors 攔截器

這里我必須重點介紹，在我們發起大量的請求時候，需要對請求做統一的處理那就用到它了。筆者在使用了vue-resource和axios之后親身比較，axios的配置更加人性化。
官方的API上這樣介紹

You can intercept requests or responses before they are handled by then or catch.
您可以攔截請求或響應之前，他們處理的操作或者異常

 

實例用法：

import axios from 'axios'
import qs from 'qs'

axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded;charset=UTF-8';
//POST傳參序列化
let params = {
　　username: 'tzf',
　　password: '123456'
}

axios.post(
　　'https://domail.com/api/login', //url
　　qs.stringify(params)
).then(
　　res => {
　　　　console.log(res.data)
　　},
　　error => {
　　　　console.log(error)
　　}
)

 

request統一處理操作

如果是POST的請求，配置中可不能用params字段了，需要使用data字段。
這里有個小地方需要注意，POST的傳參需要序列化，不然服務端不會正確的接收哦，會報錯。所以這里我們要對request的數據進行一次序列化。這里我用了qs,直接import qs from 'qs' 即可

import axios from 'axios'
import qs from 'qs'
axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded;charset=UTF-8';
//POST傳參序列化
axios.interceptors.request.use((config) => {
  if(config.method  === 'post'){
    config.data = qs.stringify(config.data);
  }
  return config;
},(error) =>{
   alert("錯誤的傳參");
  return Promise.reject(error);

 

response統一處理操作

也就是說我們可以統一的在發起請求前，或者獲得數據，對其進行統一的操作。這點非常的高效，在筆者的項目中，接口會返回一個code,就和微信API一樣，code為200代表返回請求數據正確為其它時就自動跳出彈窗打印消息即可。

//code狀態碼200判斷
axios.interceptors.response.use((res) =>{
  if(res.data.code != '200'){
    alert(res.data.msg);
    return Promise.reject(res);
  }
  return res;
}, (error) => {
  alert("網絡異常");
  return Promise.reject(error);
});

如果發生這些錯誤了我要結束當前的Promise所以返回一個Promise.reject(res)，停止Promise隊列下面的操作,如果有對於Promise不熟悉的童鞋請自行搜索Promise(這里還遇到了一個小坑最后會介紹)

 

參考配置

文件名是config/http.js

import axios from 'axios'
import qs from 'qs'
import * as _ from './whole'
axios.defaults.timeout = 5000;
axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded;charset=UTF-8';
axios.defaults.baseURL = 'http://www.guinaben.com:8070';
// axios.defaults.baseURL = 'http://192.168.1.129:8383';
//POST傳參序列化
axios.interceptors.request.use((config) => {
  if(config.method  === 'post'){
    config.data = qs.stringify(config.data);
  }
  return config;
},(error) =>{
   _.toast("錯誤的傳參");
  return Promise.reject(error);
});
//code狀態碼200判斷
axios.interceptors.response.use((res) =>{
  if(res.data.code != '200'){
    _.toast(res.data.msg);
    return Promise.reject(res);
  }
  return res;
}, (error) => {
  _.toast("網絡異常");
  return Promise.reject(error);
});
export default axios;

發起的請求

import axios from 'config/http'
axios({
  method:'get',
  url: 'xxxx/xxxxx',
  params: {
    "textbook_id":id,
    "token":token
  }
})
.then((response) => {
  resolve(response);
})
axios({
  method:'post',
  url: 'teacher/pwd/resetByMobile',
  data: {
   "textbook_id":id,
    "token":token
  }
})
.then((response) => {
    resolve(response);
})

一定要看

因為這里我使用的Promise,所以在安卓4.4.3一下的手機還是不支持Promise的，所以會報錯。需要引入npm install babel-polyfill和npm install babel-runtime，在入口文件上加上即可。

import 'babel-polyfill'

 

POST請求時，參數需要使用qs.stringify()

 

 

參考鏈接：https://blog.ygxdxx.com/2017/01/29/Axios-Config/