封裝axios

来源:https://www.cnblogs.com/champyin/archive/2019/12/29/12115617.html
-Advertisement-
Play Games

axios 是一個輕量的 HTTP客戶端，它基於 XMLHttpRequest 服務來執行 HTTP 請求，支持豐富的配置，支持 Promise，支持瀏覽器端和 Node.js 端。在真實項目中為了提高我們的代碼質量，我們通常會對 axios 二次封裝一下再使用。這篇文章就帶你從零開始封裝 axio... ...


前言

axios 是一個輕量的HTTP客戶端，它基於 XMLHttpRequest 服務來執行 HTTP 請求，支持豐富的配置，支持 Promise，支持瀏覽器端和 Node.js 端。自Vue2.0起，尤大大（Vue作者尤雨溪）宣佈取消對 vue-resource 的官方推薦，轉而推薦 axios。現在 axios 已經成為大部分 Vue 開發者的首選。
（如果你還不熟悉 axios，可以在這裡查看它的API）。

axios 的API很友好，你完全可以很輕鬆地在項目中直接使用。不過隨著項目規模增大，如果每發起一次HTTP請求，就要把這些比如設置超時時間、設置請求頭、根據項目環境判斷使用哪個請求地址、錯誤處理等等操作，都就地寫一遍，得瘋！這種重覆勞動不僅浪費時間，而且讓代碼變得冗餘不堪，難以維護。

為了提高我們的代碼質量，我們應該在項目中二次封裝一下 axios 再使用。

那麼，怎麼封裝 axios 呢？

原來的樣子

封裝前，先來看下，不封裝的情況下，一個實際項目中axios請求的樣子。大概是長這樣：

axios('http://localhost:3000/data', {
  method: 'GET',
  timeout: 1000,
  withCredentials: true,
  headers: {
    'Content-Type': 'application/json',
    Authorization: 'xxx',
  },
  transformRequest: [function (data, headers) {
    return data;
  }],
  // 其他請求配置...
})
.then((data) => {
  // todo: 真正業務邏輯代碼
  console.log(data);
}, (err) => {
  if (err.response.status === 401) {
  // handle authorization error
  }
  if (err.response.status === 403) {
  // handle server forbidden error
  }
  // 其他錯誤處理.....
  console.log(err);
});

可以看到在這段代碼中，頁面代碼邏輯只在第15行處，上方的一大塊請求配置代碼和下方一大塊響應錯誤處理代碼，幾乎跟頁面功能沒有關係，而且每個請求中這些內容都差不多，甚至有的部分完全一樣。想象一下，每發一次請求都來這麼一下，十幾個請求一寫，會是什麼盛況？

封裝步驟

封裝的本質就是在待封裝的內容外面添加各種東西，然後把它們作為一個新的整體呈現給使用者，以達到擴展和易用的目的。

封裝axios要做的事情，就是把所有HTTP請求共用的配置，事先都在axios上配置好，預留好必要的參數和介面，然後把它作為新的axios返回。

接下來我們藉助一個demo實現一個具有良好擴展性的axios封裝。

demo目錄結構如下(由Vue-cli 3.0 生成)：

|--public/
|--mock/
|   |--db.json  # 我新建的介面模擬數據
|--src/
|   |--assets/
|   |--components/
|   |--router/
|   |--store/
|   |--views/
|       |--Home.Vue
|   |--App.vue
|   |--main.js
|   |--theme.styl
|--package.json
|...

封裝目標

我希望在 Home 頁，發起 axios 請求時就像調用一個只有少量參數的方法一樣簡單，這樣我就可以專註業務代碼了。

1. 將 axios 封裝到一個獨立的文件

  • 在src下創建 utils/http.js 文件
cd src
mkdir utils
touch http.js
  • 引入 axios
// src/utils/http.js

import axios from 'axios';
  • 創建一個類
    你也可以用函數來封裝，我只是覺得類更語義化而已。
//src/utils/http.js

//...
class NewAxios {

}
  • 給不同環境配置不同請求地址
    根據 process.env.NODE_ENV 配置不同的 baseURL，使項目只需執行相應打包命令，就可以在不同環境中自動切換請求主機地址。
// src/utils/http.js

//...
const getBaseUrl = (env) => {
  let base = {
    production: '/',
    development: 'http://localhost:3000',
    test: 'http://localhost:3001',
  }[env];
  if (!base) {
    base = '/';
  }
  return base;
};

class NewAxios {
  constructor() {
    this.baseURL = getBaseUrl(process.env.NODE_ENV);
  }
}
  • 配置超時時間
    timeout屬性，我一般設置10秒。
// src/utils/http.js

//...
class NewAxios {
  constructor() {
    //...
    this.timeout = 10000;
  }
}
  • 配置允許攜帶憑證
    widthCredentials屬性設為true。
// src/utils/http.js

//...
class NewAxios {
  constructor() {
    //...
    this.withCredentials = true;
  }
}
  • 給這個類創建實例上的方法request
    在 request 方法里，創建新的axios實例，接收請求配置參數，處理參數，添加配置，返回axios實例的請求結果（一個promise對象）。
    你也可以不創建，直接使用預設導出的axios實例，然後把所有配置都放到它上面，不過這樣一來整個項目就會共用一個axios實例。雖然大部分項目下這樣夠用沒問題，但是有的項目中不同服務地址的請求和響應結構可能完全不同，這個時候共用一個實例就沒辦法支持了。所以為了封裝可以更通用，更具靈活性，我會使用axios的create方法，使每次發請求都是新的axios實例。
// src/utils/http.js

//...
class NewAxios {
  //...
  request(options) {
    // 每次請求都會創建新的axios實例。
    const instance = axios.create();
    const config = { // 將用戶傳過來的參數與公共配置合併。
      ...options,
      baseURL: this.baseURL,
      timeout: this.timeout,
      withCredentials: this.withCredentials,
    };
    // 配置攔截器，支持根據不同url配置不同的攔截器。
    this.setInterceptors(instance, options.url);
    return instance(config); // 返回axios實例的執行結果
  }
}

因為攔截器配置內容比較多，所以封裝成一個內部函數了。

  • 配置請求攔截器
    在發送請求前對請求參數做的所有修改都在這裡統一配置。比如統一添加token憑證、統一設置語言、統一設置內容類型、指定數據格式等等。做完後記得返回這個配置，否則整個請求不會進行。
    我這裡就配置一個token。
// src/utils/http.js

//...
class NewAxios {
  //...
  // 這裡的url可供你針對需要特殊處理的介面路徑設置不同攔截器。
  setInterceptors = (instance, url) => { 
    instance.interceptors.request.use((config) => { // 請求攔截器
      // 配置token
      config.headers.AuthorizationToken = localStorage.getItem('AuthorizationToken') || '';
      return config;
    }, err => Promise.reject(err));
  }
  //...
}
  • 配置響應攔截器
    在請求的then或catch處理前對響應數據進行一輪預先處理。比如過濾響應數據，更多的，是在這裡對各種響應錯誤碼進行統一錯誤處理，還有斷網處理等等。
    我這裡就判斷一下403和斷網。
// src/utils/http.js

//...
class NewAxios {
  //...
  setInterceptors = (instance, url) => {
    //...
    instance.interceptors.response.use((response) => { // 響應攔截器
      // todo: 想根據業務需要，對響應結果預先處理的，都放在這裡
      console.log();
      return response;
    }, (err) => {
      if (err.response) { // 響應錯誤碼處理
        switch (err.response.status) {
          case '403':
            // todo: handler server forbidden error
            break;
            // todo: handler other status code
          default:
            break;
        }
        return Promise.reject(err.response);
      }
      if (!window.navigator.online) { // 斷網處理
        // todo: jump to offline page
        return -1;
      }
      return Promise.reject(err);
    });
  }
  //...
}

另外，在攔截器里，還適合放置loading等緩衝效果：在請求攔截器里顯示loading，在響應攔截器里移除loading。這樣所有請求就都有了一個統一的loading效果。

  • 預設導出新的實例
// src/utils/http.js

//...
export default new NewAxios();

最後完整的代碼如下：

// src/utils/http.js

import axios from 'axios';

const getBaseUrl = (env) => {
  let base = {
    production: '/',
    development: 'http://localhost:3000',
    test: 'http://localhost:3001',
  }[env];
  if (!base) {
    base = '/';
  }
  return base;
};

class NewAxios {
  constructor() {
    this.baseURL = getBaseUrl(process.env.NODE_ENV);
    this.timeout = 10000;
    this.withCredentials = true;
  }

  setInterceptors = (instance, url) => {
    instance.interceptors.request.use((config) => {
      // 在這裡添加loading
      // 配置token
      config.headers.AuthorizationToken = localStorage.getItem('AuthorizationToken') || '';
      return config;
    }, err => Promise.reject(err));

    instance.interceptors.response.use((response) => {
      // 在這裡移除loading
      // todo: 想根據業務需要，對響應結果預先處理的，都放在這裡
      return response;
    }, (err) => {
      if (err.response) { // 響應錯誤碼處理
        switch (err.response.status) {
          case '403':
            // todo: handler server forbidden error
            break;
            // todo: handler other status code
          default:
            break;
        }
        return Promise.reject(err.response);
      }
      if (!window.navigator.online) { // 斷網處理
        // todo: jump to offline page
        return -1;
      }
      return Promise.reject(err);
    });
  }

  request(options) {
    // 每次請求都會創建新的axios實例。
    const instance = axios.create();
    const config = { // 將用戶傳過來的參數與公共配置合併。
      ...options,
      baseURL: this.baseURL,
      timeout: this.timeout,
      withCredentials: this.withCredentials,
    };
    // 配置攔截器，支持根據不同url配置不同的攔截器。
    this.setInterceptors(instance, options.url);
    return instance(config); // 返回axios實例的執行結果
  }
}

export default new NewAxios();

現在 axios 封裝算是完成了80%。我們還需要再進一步把axios和介面結合再封裝一層，才能達到我在一開始定的封裝目標。

2. 使用新的 axios 封裝API

  • 在 src 目錄下新建 api 文件夾。把所有涉及HTTP請求的介面統一集中到這個目錄來管理。
  • 新建 home.js。我們需要把介面根據一定規則分好類，一類介面對應一個js文件。這個分類可以是按頁面來劃分，或者按模塊等等。為了演示更直觀，我這裡就按頁面來劃分了。實際根據自己的需求來定。
  • 使用新的 axios 封裝API（固定url的值，合併用戶傳過來的參數），然後命名導出這些函數。
// src/api/home.js 

import axios from '@/utils/http';
export const fetchData = options => axios.request({
  ...options,
  url: '/data',
});
export default {};
  • 在 api 目錄下新建 index.js，把其他文件的介面都在這個文件里彙總導出。
// src/api/index.js

export * from './home';

這層封裝將我們的新的axios封裝到了更簡潔更語義化的介面方法中。

現在我們的目錄結構長這樣：

|--public/
|--mock/
|   |--db.json  # 介面模擬數據
|--src/
|   |--api/     # 所有的介面都集中在這個目錄下
|       |--home.js  # Home頁面里涉及到的介面封裝在這裡
|       |--index.js # 項目中所有介面調用的入口
|   |--assets/
|   |--components/
|   |--router/
|   |--store/
|   |--utils/
|       |--http.js  # axios封裝在這裡
|   |--views/
|       |--Home.Vue
|   |--App.vue
|   |--main.js
|   |--theme.styl
|--package.json
|...

使用封裝後的axios

現在我們要發HTTP請求時，只需引入 api 下的 index.js 文件就可以調用任何介面了，並且用的是封裝後的 axios。

// src/views/Home.vue

<template>
  <div class="home">
    <h1>This is home page</h1>
  </div>
</template>

<script>
// @ is an alias to /src
import { fetchData } from '@/api/index';

export default {
  name: 'home',
  mounted() {
    fetchData()  // axios請求在這裡
      .then((data) => {
        console.log(data);
      })
      .catch((err) => {
        console.log(err);
      });
  },
};
</script>

axios請求被封裝在fetchData函數里，頁面請求壓根不需要出現任何axios API，悄無聲息地發起請求獲取響應，就像在調用一個簡單的 Promise 函數一樣輕鬆。並且在頁面中只需專註處理業務功能，不用被其他事物干擾。

運行

運行 npm run serve 啟動項目，執行 npm run mock 啟動服務mock介面。

現在打開 localhost:8080 可以看到home頁面。打開瀏覽器控制台，可以看到列印的請求響應結果：

wrap-axios.jpg

簡潔，優雅。

總結

  1. 封裝思想是前端技術中很有用的思想，簡單的axios及介面封裝，就可以讓我們可以領略到它的魅力。
  2. 封裝 axios 沒有一個絕對的標準，只要你的封裝可以滿足你的項目需求，並且用起來方便，那就是一個好的封裝方案。
  3. BTW：以上封裝給大家提供了一個封裝好的axios和api框架，經過以上過程封裝好的 axios，可以不局限於 Vue，React 項目同樣可以拿去使用，它適用任何前端項目。

本文的代碼可以在這裡獲取：https://github.com/yc111/wrap-axios

歡迎交流～

歡迎轉載，轉載請註明出處：
https://champyin.com/2019/12/23/%E5%B0%81%E8%A3%85axios/


您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • vue基礎用法
    vue.js是什麼 vue.js也稱為vue,讀音/vju/ 是一個構建用戶界面的框架 是一個輕量級MVVM(Model-view-viewModel)框架，和angular，react類似，其實就是所謂的數據雙向綁定 數據驅動+組件化的前端開發(核心思想) 通過簡單的API實現響應式的數據綁定和組 ...
  • HTML5基礎-新增標簽+新增屬性+佈局案例
    html5中常用的結構標簽 article 文章 header 頭部 nav 導航 section 區域 aside 側邊欄 hgroup 區塊的相關信息 figure 定義一組內容及標題 figcaption 定義figure元素的標題 footer 底部 dialog 對話框 使用習慣： hea ...
  • form中把圖片設為按鈕
    提交按鈕sumbit <input type="image" src="圖片路徑">//type="image"預設是sumbit，不用再添加onclick事件提交，否則會發生表單被提交兩次的情況 重置按鈕reset <input type="image" src="圖片路徑" onclick="d ...
  • react-native-vector-icons 安裝、使用
    使用react-native-vector-icons時出現了很多問題，如IOS報錯unRecognized font family 'FontAwesome'以及安卓無法正常顯示圖標 ...
  • CSS中的z-index屬性如何使用
    z index屬性介紹 只有設置了定位我們才會使用到該 屬性，如： 、`相對定位 絕對定位`。 定位元素預設的 屬性值是 。 如果 個定位的元素都沒有設置 屬性，後者會覆蓋到前者。 如果 個定位的元素都設置了 屬性，並且數值一樣大還是後者會覆蓋到前者。 屬性的屬性值大的就會覆蓋小，就是設置元素的層級 ...
  • css基礎-定位+網頁佈局案例
    position:static 忽略top/bottom/left/right或者z-index position:relative 設置相對定位的元素不會脫離文檔流 position:fixed 不會隨著視口滾動而滾動，繼承absolute的特點 position:sticky 和top屬性搭配， ...
  • JS事件之自建函數bind()與相容性問題解決
    JavaScript事件綁定常用方法 對象.事件 = 函數; 它只能同時為一個對象的一個事件綁定一個響應函數 不能綁定多個，如果有多個，後面的會覆蓋前面的 addEventListener() 此方法也可以為元素綁定響應函數 參數： 1. 事件的字元串(不帶on) 2. 回調函數，事件觸發時執行 3 ...
  • 深入學習CSS中如何使用定位
    CSS中定位介紹 屬性在英文單詞中表示 的意思，在 中主要作用設置元素的定位。 中一共有 種定位如下： 屬性值 | 描述 | fixed | 設置固定定位。 relative | 設置相對定位。 absolute|設置絕對定位。 固定定位實踐 在實踐固定定位之前我們先看看代碼結構是什麼樣子的呢。 代 ...
一周排行
    -Advertisement-
    Play Games
  • 移動開發（一）：使用.NET MAUI開發第一個安卓APP
    移動開發（一）：使用.NET MAUI開發第一個安卓APP 對於工作多年的C#程式員來說，近來想嘗試開發一款安卓APP，考慮了很久最終選擇使用.NET MAUI這個微軟官方的框架來嘗試體驗開發安卓APP，畢竟是使用Visual Studio開發工具，使用起來也比較的順手，結合微軟官方的教程進行了安卓 ...
  • wpf ToggleButton選中效果和一個登錄界面
    前言 QuestPDF 是一個開源 .NET 庫，用於生成 PDF 文檔。使用了C# Fluent API方式可簡化開發、減少錯誤並提高工作效率。利用它可以輕鬆生成 PDF 報告、發票、導出文件等。 項目介紹 QuestPDF 是一個革命性的開源 .NET 庫，它徹底改變了我們生成 PDF 文檔的方 ...
  • 彈幕樹洞項目功能新增篇
    項目地址 項目後端地址： https://github.com/ZyPLJ/ZYTteeHole 項目前端頁面地址： ZyPLJ/TreeHoleVue (github.com) https://github.com/ZyPLJ/TreeHoleVue 目前項目測試訪問地址： http://tree ...
  • 第27篇 sqlserver2022詳細安裝步驟
    話不多說，直接開乾 一.下載 1.官方鏈接下載： https://www.microsoft.com/zh-cn/sql-server/sql-server-downloads 2.在下載目錄中找到下麵這個小的安裝包 SQL2022-SSEI-Dev.exe，運行開始下載SQL server； 二. ...
  • .NET 開源高性能 MQTT 類庫
    前言 隨著物聯網（IoT）技術的迅猛發展，MQTT（消息隊列遙測傳輸）協議憑藉其輕量級和高效性，已成為眾多物聯網應用的首選通信標準。 MQTTnet 作為一個高性能的 .NET 開源庫，為 .NET 平臺上的 MQTT 客戶端與伺服器開發提供了強大的支持。 本文將全面介紹 MQTTnet 的核心功能 ...
  • Serilog文檔翻譯系列（六） - 可用的接收器、增強器、格式化輸出
    Serilog支持多種接收器用於日誌存儲，增強器用於添加屬性，LogContext管理動態屬性，支持多種輸出格式包括純文本、JSON及ExpressionTemplate。還提供了自定義格式化選項，適用於不同需求。 ...
  • 警惕 Visual Studio 屬性求值副作用導致邏輯不符合預期
    目錄簡介獲取 HTML 文檔解析 HTML 文檔測試參考文章 簡介 動態內容網站使用 JavaScript 腳本動態檢索和渲染數據，爬取信息時需要模擬瀏覽器行為，否則獲取到的源碼基本是空的。 本文使用的爬取步驟如下： 使用 Selenium 獲取渲染後的 HTML 文檔 使用 HtmlAgility ...
  • [使用目前最新版]HybridCLR6.9.0+YooAsset2.2.4實現純C# Unity熱更新方案 (一)
    1.前言 什麼是熱更新 游戲或者軟體更新時，無需重新下載客戶端進行安裝，而是在應用程式啟動的情況下，在內部進行資源或者代碼更新 Unity目前常用熱更新解決方案 HybridCLR，Xlua，ILRuntime等 Unity目前常用資源管理解決方案 AssetBundles，Addressable， ...
  • 在 ASP.NET Core Web API 中使用操作篩選器統一處理通用操作
    本文章主要是在C# ASP.NET Core Web API框架實現向手機發送驗證碼簡訊功能。這裡我選擇是一個互億無線簡訊驗證碼平臺，其實像阿裡雲，騰訊雲上面也可以。 首先我們先去 互億無線 https://www.ihuyi.com/api/sms.html 去註冊一個賬號 註冊完成賬號後，它會送 ...
  • 第28篇 如何.net中實現高效可靠數據同步api
    通過以下方式可以高效，並保證數據同步的可靠性 1.API設計 使用RESTful設計，確保API端點明確，並使用適當的HTTP方法（如POST用於創建，PUT用於更新）。 設計清晰的請求和響應模型，以確保客戶端能夠理解預期格式。 2.數據驗證 在伺服器端進行嚴格的數據驗證，確保接收到的數據符合預期格 ...
所有分類