axios的簡單的使用

Axios 是什麼?

Axios 是一個基於 promise 網路請求庫，作用於node.js 和瀏覽器中。 它是 isomorphic 的(即同一套程式碼可以執行在瀏覽器和node.js中)。在服務端它使用原生 node.js http 模組, 而在客戶端 (瀏覽端) 則使用 XMLHttpRequests。

特性

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

基礎用法

引入之後直接使用，不做任何配置

import axios from 'axios';

// 向給定ID的使用者發起請求

axios.get('/user?ID=12345')

  .then((response) => {

    // 處理成功情況

    console.log(response);

  })

  .catch((error) => {

    // 處理錯誤情況

    console.log(error);

  })

常規用法

一般我們在專案中使用都會統一的配置介面的baseUrl，超時時間等等

import axios from 'axios';

const _axios = axios.create({

    baseUrl: 'http://localhost:9333/api',

    timeout: 1000 * 15,

})

配置請求攔截器

在請求攔截器中可以做一些常規配置，比如要給請求頭新增token或附加一些特殊的共有資料等等

_axios.interceptors.request.use(config=>{

    // 新增token

    config.headers.token = 'token';

    // do something

},error=>Promise.reject(error))

配置返回攔截器

在請求攔截器中可以做一些常規配置，比如要給請求頭新增token或附加一些特殊的共有資料等等

_axios.interceptors.response.use(config=>{

    // do something

},error=>{

    // 做一些統一的錯誤處理

    // 401 需要授權

    // 404 介面不存在

    // 405 請求方式不允許，本來介面是get的而你使用了post

    // 等等

})

取消重複請求

在專案中會經常碰到一個按鈕連續多次的快速點選，這樣就會在極短的時間內請求多次，實際上我們只需要一次返回結果就可以，這個時候就可以取消之前多次的重複提交。

在此我們會用到 axios.CancelToken 這個方法，具體使用方法可以檢視文件

封裝取消請求的方法

class CancelToken {

  constructor() {

    this.store = new Map();

  }

  add (config)  {

      const key = this.getKey(config);

      new axios.CancelToken((cancel) => {

        if (this.store.has(key)) {

            this.remove(config)

        }

        this.store.set(key, cancel);

      });

  }

  remove (config)  {

      const key = this.getKey(config);

    if (this.store.has(key)) {

      let cancel = this.store.get(key);

      cancel(key);

      this.store.delete(key);

    }

  }

  // 根據請求引數獲取唯一的key

  getKey(config){

    const { method, url, params, data } = config;

    return [method, url, params, data].join('-');

  }

}

使用CancelToken方法

const cancelToken = new CancelToken();

// 請求攔截器

axios.interceptors.request.use(config=>{

    cancelToken.add(config);

},error=>Promise.reject(error))

// 接收攔截器

axios.interceptors.response.use(

    response => {

        const config = response.config;

        cancelToken.remove(config)

        Promise.resolve(response)

    },

    error => {

        return Promise.reject(error);

    }

);

至此，axios的常規使用就介紹完了，感謝各位的閱讀。