axios使用心得

特性

  • 從瀏覽器中建立 XMLHttpRequests
  • 從 node.js 建立 http 請求
  • 支持 Promise API
  • 攔截請求和響應
  • 轉換請求數據和響應數據
  • 取消請求
  • 自動轉換 JSON 數據
  • 客戶端支持防護 XSRF

使用

安裝

使用 npm:javascript

$ npm install axios

使用 cdn:html

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

在vue項目中使用axios

  1. 掛載在vue的原型上 全局使用vue

    首先在主入口文件main.js中引用,以後掛在vue的原型鏈上java

    import axios from 'axios'
    Vue.prototype.$axios = axios

    在vue組件中使用:node

    this.$axios.get('/api/getList').then((res) => {
        this.newList = res.data.data
    }).catch(err => {
        console.log(err)
    })
  2. 結合 vue-axios使用ios

    在main.js中引用npm

    import axios from 'axios'
    import VueAxios from 'vue-axios'
    
    Vue.use(VueAxios,axios);

axios API

axios.get(url[, config])json

axios.delete(url[, config])axios

axios.post(url[, data[, config]])api

axios.put(url[, data[, config]])

axios.patch(url[, data[, config]])

this.axios.get('/api/demo', {
  params: {
    id: 124, 
    name: 'jerry'
  }
})
其實通常axios添加參數是
this.axios.get('/api/demo?id=124&&name='jerry)

this.axios.delete('/api/demo', {
  data: {
    id: 123,
    name: 'Henry',
    sex: 1,
    phone: 13333333
}

this.axios.post('/api/demo', {
  name: 'jack',
  sex: 'man'
})

this.axios.put('/api/demo', {
  name: 'jack',
  sex: 'man'
})

在使用axios時,注意到配置選項中包含params和data二者,覺得他們是相同的,實則否則。 
 
由於params是添加到url的請求字符串中的,用於get請求。  參數是以id=124&name=jerry的形式附到url的後面
 
而data是添加到請求體(body)中的, 用於post請求。

POST請求提交時,使用的Content-Type是application/x-www-form-urlencoded,而使用原生AJAX的POST請求若是不指定請求頭RequestHeader,默認使用的Content-Type是text/plain;charset=UTF-8。

執行多個併發請求

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 傳遞相關配置來建立請求

axios(config)

// 發送 POST 請求
axios({
  method: 'post',
  url: '/user/12345',
  data: {
    firstName: 'Fred',
    lastName: 'Flintstone'
  }
});
//等同於如下寫法
axios.post('/user/12345', {
  firstName: 'Fred',
  lastName: 'Flintstone'
})

// 獲取遠端圖片
axios({
  method:'get',
  url:'http://bit.ly/2mTM3nY',
  responseType:'stream'
}).then(function(response) {
  response.data.pipe(fs.createWriteStream('ada_lovelace.jpg'))
});

簡單的請求配置(config)

{
   // `url` 是用於請求的服務器 URL
  url: '/user',

  // `method` 是建立請求時使用的方法
  method: 'get', // default

  // `baseURL` 將自動加在 `url` 前面,除非 `url` 是一個絕對 URL。
  // 它能夠經過設置一個 `baseURL` 便於爲 axios 實例的方法傳遞相對 URL
  baseURL: 'https://some-domain.com/api/',
  
  // `headers` 是即將被髮送的自定義請求頭
  headers: { Authorization: token }
  
  // `params` 是即將與請求一塊兒發送的 URL 參數  用於get請求
  // 必須是一個無格式對象(plain object)或 URLSearchParams 對象
  params: {
    ID: 12345
  },

  // `data` 是做爲請求主體被髮送的數據
  // 只適用於這些請求方法 'PUT', 'POST', 和 'PATCH'
  data: {
    firstName: 'Fred'
  },
  
  // `timeout` 指定請求超時的毫秒數(0 表示無超時時間)
  // 若是請求話費了超過 `timeout` 的時間,請求將被中斷
  timeout: 1000,
  
 }

響應結構

某個請求的響應包含如下信息

{
  // `data` 由服務器提供的響應
  data: {},

  // `status` 來自服務器響應的 HTTP 狀態碼
  status: 200,

  // `statusText` 來自服務器響應的 HTTP 狀態信息
  statusText: 'OK',

  // `headers` 服務器響應的頭
  headers: {},

   // `config` 是爲請求提供的配置信息
  config: {},
 // 'request'
  // `request` is the request that generated this response
  // It is the last ClientRequest instance in node.js (in redirects)
  // and an XMLHttpRequest instance the browser
  request: {}
}

接收響應

axios支持Promise對象,因此獲取響應值 用then
axios.get('/user/12345')
  .then(function(res) {
    console.log(rese.data);
    console.log(res.status);
    console.log(res.statusText);
    console.log(res.headers);
    console.log(res.config);
  });

能夠用catch作錯誤處理

全局配置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.defaults.headers.common['Authorization'] = ''; // 設置請求頭爲 Authorization
axios.defaults.timeout = 200;  在超時前,全部請求都會等待 2.5 秒

錯誤處理

axios.get("/user/12345")
  .catch(function (error) {
    if (error.response) {
      // 請求已發出,但服務器響應的狀態碼不在 2xx 範圍內
      console.log(error.response.data);
      console.log(error.response.status);
      console.log(error.response.headers);
    } else {
      // Something happened in setting up the request that triggered an Error
      console.log("Error", error.message);
    }
    console.log(error.config);
  });

能夠使用 validateStatus 配置選項定義一個自定義 HTTP 狀態碼的錯誤範圍。

axios.get("/user/12345", {
  validateStatus: function (status) {
    return status < 500; // 狀態碼在大於或等於500時纔會 reject
  }
})

攔截器

能夠自定義攔截器,在在請求或響應被 thencatch 處理前攔截它們。

// 添加請求攔截器
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);
 });
//配置發送請求前的攔截器 能夠設置token信息 
axios.interceptors.request.use(config => {
  //loading開始  //加載進度條
  loadingInstance.start();
  let token = localStorage.getItem("x-auth-token");  // 給全部請求帶上token
  if (token) {  // 判斷是否存在token,若是存在的話,則每一個http header都加上token
    config.headers.token = `${token}`;
  }
  return config;
}, error => {
  //出錯,也要loading結束
  loadingInstance.close();
  return Promise.reject(error);
});


// 配置響應攔截器 
axios.interceptors.response.use(res => {
  //loading結束
  loadingInstance.close();
  //這裏面寫所須要的代碼
  if (res.data.code == '401') {
    //全局登錄過濾,當判讀token失效或者沒有登陸時 返回登錄頁面
    return false;
  };
  return Promise.resolve(res);
}, error => {
  loadingInstance.close();
  return Promise.reject(error);
})

注意事項

axios會默認序列化 JavaScript 對象爲 JSON

axios中POST的默認請求體類型爲Content-Type:application/json(JSON規範流行)這也是最多見的請求體類型,也就是說使用的是序列化後的json格式字符串來傳遞參數,如:{ "name" : "mike", "sex" : "male" };同時,後臺必需要以支持@RequestBody的形式接收參數,不然會出現前臺傳參正確,後臺接收不到的狀況。
若是想要設置類型爲Content-Type:application/x-www-form-urlencoded(瀏覽器原生支持),axios提供了兩種方式,以下:

  1. URLSearchParams

    const params = new URLSearchParams();
    params.append('param1', 'value1');
    params.append('param2', 'value2');
    axios.post('/user', params);
  2. qs

    默認狀況下在安裝完axios後就能夠使用qs庫 選擇使用qs庫編碼數據:

    const qs = require('qs');0
    axios.post('/foo', qs.stringify({ 'bar': 123 }));

參考博客

官方文檔

相關文章
相關標籤/搜索