0. 系列文章

項目源碼請猛戳這里!!!

1. 前言

在之前的文章中，我們一直都是使用axios(config)來創建一個axios實例對象，然后發送請求。這樣做表面上看起來似乎沒什么問題，但是別忘了，我們在各個地方使用的axios其實是同一個實例對象，這樣就有一個問題，如果我修改了這個實例對象的默認配置，那么所有的axios實例都會受到影響，進而影響到所有的請求。這不是我們想要的，我們想要的是能夠創建出多個axios實例對象來，例如：我們可以創建出一個axiosLogInstance實例對象，該實例對象專門用來做跟日志相關操作的請求，並且給它配一些跟日志請求相關的默認配置；我們還可以再創建出一個axiosUserInstance實例對象，該實例對象專門用來做跟用戶相關的請求，並且給它配一些跟用戶請求相關的默認配置。這兩個實例對象互不影響，這才是我們想要的結果。好在官方axios為我們提供了axios.create()靜態接口，我們通過調用該接口可以創建出一個嶄新的實例對象，該對象接收一個AxiosRequestConfig類型的參數作為該實例的默認配置對象，也不可以不傳參數表示沒有默認配置，它返回一個實例對象，我們可以像之前使用axios對象那樣使用返回的這個實例對象，並且會它做一些自定義配置。說了這么多，不如看代碼一目了然，偽代碼如下：

const axiosLogInstance = axios.create({
  baseURL: '', 
  timeout: 0,
  headers: {
    'Content-Type': 'application/x-www-form-urlencoded'
  }
})

axiosLogInstance({
  url: '/log',
  method: 'post',
  data: {
    a: 1
  }
})

OK,了解了作用以后，我們就來給我們的axios混合對象上增加create靜態接口。

2. 定義接口類型

由於我們要給axios混合對象上擴展一個靜態接口，因此我們先來修改之前的定義的AxiosInstance接口類型。之前axios混合對象上的request、get、post...等這些實例方法，這些方法的接口類型都定義在了AxiosInstance里面，為了區別於這些方法，我們新創建一個接口類型AxiosStatic，並將其繼承自AxiosInstance，該類型用於定義create和后面講到的all、spread等靜態接口，它的定義如下：

export interface AxiosStatic extends AxiosInstance{
  create(config?:AxiosRequestConfig):AxiosInstance
}

create 函數可以接受一個 AxiosRequestConfig 類型的配置，作為默認配置的擴展，也可以接受不傳參數。

OK，接口類型定義好之后，我們就來實現create接口。

3. 實現create接口

實現起來也很容易，該接口支持接收一個 AxiosRequestConfig 類型的配置對象，把該配置對象和全局的默認配置對象進行合並，作為將來返回的新axios實例對象的默認配置，最后使用getAxios創建出一個新的實例對象返回即可。我們把實現邏輯寫在src/axios.ts內，如下：

import { AxiosRequestConfig, AxiosStatic } from "./types";
import Axios from "./core/Axios";
import { extend } from "./helpers/util";
import defaults from "./defaultes";
import mergeConfig from "./core/mergeConfig";

function getAxios(config: AxiosRequestConfig): AxiosStatic {
  const context = new Axios(config);
  const axios = Axios.prototype.request.bind(context);

  extend(axios, context);

  return axios as AxiosStatic;
}

const axios = getAxios(defaults);

axios.create = function(config: AxiosRequestConfig) {
  return getAxios(mergeConfig(defaults, config));
};

export default axios;

OK，接口的邏輯就實現好了，接下來我們就編寫demo來測試效果如何。

4. demo編寫

在 examples 目錄下創建 expandCreateInterface目錄，在 expandCreateInterface目錄下創建 index.html:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>expandCreateInterface demo</title>
  </head>
  <body>
    <script src="/__build__/expandCreateInterface.js"></script>
  </body>
</html>

接着再創建 app.ts 作為入口文件：

import axios from "../../src/axios";
import qs from "qs";

const instance1 = axios.create({
  headers: {
    NLRX: "Hello NLRX"
  }
});

instance1({
  url: "/api/expandCreateInterface",
  method: "post",
  data: qs.stringify({
    a: 1
  })
}).then(res => {
  console.log(res.data);
});

const instance2 = axios.create({
  headers: {
    test: "123"
  }
});

instance2({
  url: "/api/expandCreateInterface",
  method: "post",
  data: qs.stringify({
    a:1 
  })
}).then(res => {
  console.log(res.data);
});

在該demo中，我們使用axios.create創建了兩個實例instance1和instance2，在這兩個實例中，我們在創建的時候給它們的headers里面設置了不同的內容，其余均相同，然后用這兩個實例分別發出請求，如果在結果中這兩個請求的headers確實不同，表明這兩個實例互相獨立，互不影響。

接着在 server/server.js 添加新的接口路由：

// 添加create接口
router.post("/api/expandCreateInterface", function(req, res) {
  res.json(req.body);
});

最后在根目錄下的index.html中加上啟動該demo的入口：

<li><a href="examples/expandCreateInterface">expandCreateInterface</a></li>

OK,我們在命令行中執行：

# 同時開啟客戶端和服務端
npm run server | npm start

接着我們打開 chrome 瀏覽器，訪問 http://localhost:8000/ 即可訪問我們的 demo 了，我們點擊 expandCreateInterface，通過F12的 network 部分我們可以看到請求已正常發出，並且請求的headers如下：

從上圖的結果中看，兩個請求的headers確實不同，驗證了這兩個實例發出的請求互相獨立，互不相同，OK，create接口就增加完畢了。
(完)

免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。

猜您在找 axios 的理解和使用 axios.create(對axios請求進行二次封裝) 攔截器取消請求(axios.CancelToken) 使用Typescript重構axios(二十四)——防御XSRF攻擊使用Typescript重構axios(二十九)——添加baseURL 使用Typescript重構axios(十四)——實現攔截器使用Typescript重構axios(五)——實現基礎功能：處理請求的header 使用Typescript重構axios(六)——實現基礎功能：獲取響應數據基於TypeScript從零重構axios 基於TypeScript從零重構axios完整資源使用Typescript重構axios(二十六)——添加HTTP授權auth屬性使用Typescript重構axios(二十八)——自定義序列化請求參數