React項(xiàng)目中axios的封裝與API接口的管理詳解

更新時間：2021年09月29日 09:01:03 作者：北孤清茶

Axios是一個npm軟件包,允許應(yīng)用程序?qū)TTP請求發(fā)送到Web API,下面這篇文章主要給大家介紹了關(guān)于React項(xiàng)目中axios的封裝與API接口的管理的相關(guān)資料,需要的朋友可以參考下

前言

在react項(xiàng)目中，和后臺交互獲取數(shù)據(jù)這塊，我們通常使用的是axios庫，它是基于promise的http庫，可運(yùn)行在瀏覽器端和node.js中。他有很多優(yōu)秀的特性，例如攔截請求和響應(yīng)、取消請求、轉(zhuǎn)換json、客戶端防御XSRF等。如果還對axios不了解的，可以移步axios文檔。

安裝

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

引入

在項(xiàng)目根目錄中，新建一個request文件夾，然后在里面新建一個index.js和一個api.js文件。index.js文件用來封裝我們的axios，api.js用來統(tǒng)一管理我們的接口。

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

環(huán)境的切換

我們的項(xiàng)目環(huán)境可能有開發(fā)環(huán)境、測試環(huán)境和生產(chǎn)環(huán)境。我們通過node的環(huán)境變量來匹配我們的默認(rèn)的接口url前綴。這里需要node的全局變量process,process.env.NODE_ENV可以區(qū)分是開發(fā)環(huán)境還是生產(chǎn)環(huán)境。

//保存環(huán)境變量
const isPrd = process.env.NODE_ENV == 'production';

//區(qū)分開發(fā)環(huán)境還是生產(chǎn)環(huán)境基礎(chǔ)URL
export const basciUrl = isPrd ? 'https://www.production.com' : 'http://www.development.com'

這里導(dǎo)出基礎(chǔ)URL是為了防止有其他地方用到資源不一樣，需要區(qū)分生產(chǎn)環(huán)境還是開發(fā)環(huán)境，導(dǎo)入就直接可以用了。

請求攔截

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

//設(shè)置axios基礎(chǔ)路徑
const service = axios.create({
  baseURL: basicUrl
})
// 請求攔截器
service.interceptors.request.use(config => { 
  // 每次發(fā)送請求之前本地存儲中是否存在token，也可以通過Redux這里只演示通過本地拿到token
  // 如果存在，則統(tǒng)一在http請求的header都加上token，這樣后臺根據(jù)token判斷你的登錄情況
  // 即使本地存在token，也有可能token是過期的，所以在響應(yīng)攔截器中要對返回狀態(tài)進(jìn)行判斷 
  const token = window.localStorage.getItem('userToken') || window.sessionStorage.getItem('userToken');
  //在每次的請求中添加token
  config.data = Object.assign({}, config.data, {
    token: token,
  })
  //設(shè)置請求頭
  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存在本地，然后用戶每次在進(jìn)入頁面的時候（即在main.js中），會首先從本地存儲中讀取token，如果token存在說明用戶已經(jīng)登陸過，則更新Redux中的token狀態(tài)。然后，在每次請求接口的時候，都會在請求的header中攜帶token，后臺人員就可以根據(jù)你攜帶的token來判斷你的登錄是否過期，如果沒有攜帶，則說明沒有登錄過。

響應(yīng)攔截

// 響應(yīng)攔截器
service.interceptors.response.use(response => {
  //根據(jù)返回不同的狀態(tài)碼做不同的事情
  // 這里一定要和后臺開發(fā)人員協(xié)商好統(tǒng)一的錯誤狀態(tài)碼
  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導(dǎo)出
export default service

響應(yīng)攔截器很好理解，就是服務(wù)器返回給我們的數(shù)據(jù)，我們在拿到之前可以對他進(jìn)行一些處理。例如上面的思想：如果后臺返回的狀態(tài)碼是200，則正常返回數(shù)據(jù)，否則的根據(jù)錯誤的狀態(tài)碼類型進(jìn)行一些我們需要的錯誤，具體返回的狀態(tài)碼需要處理那些流程還需要跟后臺開發(fā)人員協(xié)商。

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

api的統(tǒng)一管理

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

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

//導(dǎo)入我們封裝好的axios 
import service from './index'

現(xiàn)在，例如我們有這樣一個接口，是一個post請求：

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

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

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

我們定義了一個apiArticleEdit方法，這個方法有一個參數(shù)info，info是我們請求接口時攜帶的參數(shù)對象。而后調(diào)用了我們封裝的axios方法，第一個參數(shù)是我們的接口地址，第二個參數(shù)是apiArticleEdit的info參數(shù)，即請求接口時攜帶的參數(shù)對象。最后通過export導(dǎo)出apiArticleEdit。

然后在我們的頁面中可以這樣調(diào)用我們的api接口：

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

其他的api接口，就在api.js中繼續(xù)往下面擴(kuò)展就可以了。友情提示，為每個接口寫好注釋哦?。。?/p>

api接口管理的一個好處就是，我們把a(bǔ)pi統(tǒng)一集中起來，如果后期需要修改接口，我們就直接在api.js中找到對應(yīng)的修改就好了，而不用去每一個頁面查找我們的接口然后再修改會很麻煩。關(guān)鍵是，萬一修改的量比較大。還有就是如果直接在我們的業(yè)務(wù)代碼修改接口，一不小心還容易動到我們的業(yè)務(wù)代碼造成不必要的麻煩。

好了，最后把完成的axios封裝代碼奉上。

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

//保存環(huán)境變量
const isPrd = process.env.NODE_ENV == 'production';

//區(qū)分開發(fā)環(huán)境還是生產(chǎn)環(huán)境基礎(chǔ)URL
export const basciUrl = isPrd ? 'https://www.production.com' : 'http://www.development.com'

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

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

// 響應(yīng)攔截器
service.interceptors.response.use(response => {
  //根據(jù)返回不同的狀態(tài)碼做不同的事情
  // 這里一定要和后臺開發(fā)人員協(xié)商好統(tǒng)一的錯誤狀態(tài)碼
  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導(dǎo)出
export default service