React項目中axios的封裝與API接口的管理詳解

Posted on by

前言

在react項目中，和後臺交互獲取數據這塊，我們通常使用的是axios庫，它是基於promise的http庫，可運行在瀏覽器端和node.js中。他有很多優秀的特性，例如攔截請求和響應、取消請求、轉換json、客戶端防禦XSRF等。如果還對axios不瞭解的，可以移步axios文檔。

安裝

//使用npm安裝
npm install axios; 
//使用yarn安裝
yarn add axios

引入

在項目根目錄中，新建一個request文件夾，然後在裡面新建一個index.js和一個api.js文件。index.js文件用來封裝我們的axios，api.js用來統一管理我們的接口。

//在index.js中引入axios
import axios from 'axios';
//引入qs模塊，用來序列化post類型的數據
import QS from 'qs';
//antd的message提示組件，大傢可根據自己的ui組件更改。
import { message } from 'antd'

環境的切換

我們的項目環境可能有開發環境、測試環境和生產環境。我們通過node的環境變量來匹配我們的默認的接口url前綴。這裡需要node的全局變量process,process.env.NODE_ENV可以區分是開發環境還是生產環境。

//保存環境變量
const isPrd = process.env.NODE_ENV == 'production';

//區分開發環境還是生產環境基礎URL
export const basciUrl = isPrd ? 'https://www.production.com' : 'http://www.development.com'

這裡導出基礎URL是為瞭防止有其他地方用到資源不一樣，需要區分生產環境還是開發環境，導入就直接可以用瞭。

請求攔截

我們在發送請求前可以進行一個請求的攔截，為什麼要攔截呢，我們攔截請求是用來做什麼的呢？比如，有些請求是需要用戶登錄之後才能訪問的，或者post請求的時候，我們需要序列化我們提交的數據。這時候，我們可以在請求被發送之前進行一個攔截，從而進行我們想要的操作。

//設置axios基礎路徑
const service = axios.create({
  baseURL: basicUrl
})
// 請求攔截器
service.interceptors.request.use(config => { 
  // 每次發送請求之前本地存儲中是否存在token，也可以通過Redux這裡隻演示通過本地拿到token
  // 如果存在，則統一在http請求的header都加上token，這樣後臺根據token判斷你的登錄情況
  // 即使本地存在token，也有可能token是過期的，所以在響應攔截器中要對返回狀態進行判斷 
  const token = window.localStorage.getItem('userToken') || window.sessionStorage.getItem('userToken');
  //在每次的請求中添加token
  config.data = Object.assign({}, config.data, {
    token: token,
  })
  //設置請求頭
  config.headers = {
    'Content-Type': 'application/x-www-form-urlencoded; charset=utf-8'
  }
  config.data = QS.stringify(config.data)
  return config
}, error => { 
    return error;
})

這裡說一下token，一般是在登錄完成之後，將用戶的token通過localStorage或者sessionStorage存在本地，然後用戶每次在進入頁面的時候（即在main.js中），會首先從本地存儲中讀取token，如果token存在說明用戶已經登陸過，則更新Redux中的token狀態。然後，在每次請求接口的時候，都會在請求的header中攜帶token，後臺人員就可以根據你攜帶的token來判斷你的登錄是否過期，如果沒有攜帶，則說明沒有登錄過。

響應攔截

// 響應攔截器
service.interceptors.response.use(response => {
  //根據返回不同的狀態碼做不同的事情
  // 這裡一定要和後臺開發人員協商好統一的錯誤狀態碼
  if (response.code) {
    switch (response.code) {
      case 200:
        return response.data;
      case 401:
        //未登錄處理方法
        break;
      case 403:
        //token過期處理方法
        break;
      default:
        message.error(response.data.msg)
    }
  } else { 
    return response;
  }
})
//最後把封裝好的axios導出
export default service

響應攔截器很好理解，就是服務器返回給我們的數據，我們在拿到之前可以對他進行一些處理。例如上面的思想：如果後臺返回的狀態碼是200，則正常返回數據，否則的根據錯誤的狀態碼類型進行一些我們需要的錯誤，具體返回的狀態碼需要處理那些流程還需要跟後臺開發人員協商。

上面的message.error()方法時我引入的antd的庫提示組件，需要根據你的UI庫，對應使用提示組件

api的統一管理

整齊的api就像電路板一樣，即使再復雜也能很清晰整個線路。上面說瞭，我們會新建一個api.js,然後在這個文件中存放我們所有的api接口。

首先我們在api.js中引入我們封裝的axios

//導入我們封裝好的axios 
import service from './index'

現在，例如我們有這樣一個接口，是一個post請求：

http://www.development.com/api/v1/articleEdit

我們可以在api.js中這樣封裝：

export const apiArticleEdit = info => service.post('/api/v1/articleEdit', info);

我們定義瞭一個apiArticleEdit方法，這個方法有一個參數info，info是我們請求接口時攜帶的參數對象。而後調用瞭我們封裝的axios方法，第一個參數是我們的接口地址，第二個參數是apiArticleEdit的info參數，即請求接口時攜帶的參數對象。最後通過export導出apiArticleEdit。

然後在我們的頁面中可以這樣調用我們的api接口：

import React, { Component } from 'react'
 import { apiArticleEdit } from './request/api'
export default class App extends Component {
  componentDidMount() { 
    // 調用api接口，並且提供瞭兩個參數
    let params = { type: 2, author: '北孤清茶' }
    apiArticleEdit(params).then(res => { 
      // 獲取數據成功後的其他操作
      //.....
      console.log(res)
    })
  }
  render() {
    return (
      <div>
        
      </div>
    )
  }
}

其他的api接口，就在api.js中繼續往下面擴展就可以瞭。友情提示，為每個接口寫好註釋哦！！！

api接口管理的一個好處就是，我們把api統一集中起來，如果後期需要修改接口，我們就直接在api.js中找到對應的修改就好瞭，而不用去每一個頁面查找我們的接口然後再修改會很麻煩。關鍵是，萬一修改的量比較大。還有就是如果直接在我們的業務代碼修改接口，一不小心還容易動到我們的業務代碼造成不必要的麻煩。

好瞭，最後把完成的axios封裝代碼奉上。

//在index.js中引入axios
import axios from 'axios';
//引入qs模塊，用來序列化post類型的數據
import QS from 'qs';
//antd的message提示組件，大傢可根據自己的ui組件更改。
import { message } from 'antd'

//保存環境變量
const isPrd = process.env.NODE_ENV == 'production';

//區分開發環境還是生產環境基礎URL
export const basciUrl = isPrd ? 'https://www.production.com' : 'http://www.development.com'

//設置axios基礎路徑
const service = axios.create({
  baseURL: basicUrl
})

// 請求攔截器
service.interceptors.request.use(config => { 
  // 每次發送請求之前本地存儲中是否存在token，也可以通過Redux這裡隻演示通過本地拿到token
  // 如果存在，則統一在http請求的header都加上token，這樣後臺根據token判斷你的登錄情況
  // 即使本地存在token，也有可能token是過期的，所以在響應攔截器中要對返回狀態進行判斷 
  const token = window.localStorage.getItem('userToken') || window.sessionStorage.getItem('userToken');
  //在每次的請求中添加token
  config.data = Object.assign({}, config.data, {
    token: token,
  })
  //設置請求頭
  config.headers = {
    'Content-Type': 'application/x-www-form-urlencoded; charset=utf-8'
  }
  //序列化請求參數，不然post請求參數後臺接收不正常
  config.data = QS.stringify(config.data)
  return config
}, error => { 
    return error;
})

// 響應攔截器
service.interceptors.response.use(response => {
  //根據返回不同的狀態碼做不同的事情
  // 這裡一定要和後臺開發人員協商好統一的錯誤狀態碼
  if (response.code) {
    switch (response.code) {
      case 200:
        return response.data;
      case 401:
        //未登錄處理方法
        break;
      case 403:
        //token過期處理方法
        break;
      default:
        message.error(response.data.msg)
    }
  } else { 
    return response;
  }
})
//最後把封裝好的axios導出
export default service

總結

到此這篇關於React項目中axios的封裝與API接口管理的文章就介紹到這瞭,更多相關React中axios封裝與API接口內容請搜索WalkonNet以前的文章或繼續瀏覽下面的相關文章希望大傢以後多多支持WalkonNet！

推薦閱讀：