React專案中axios的封裝與API介面的管理詳解
目錄
- 前言
- 安裝
- 引入
- 環境的切換
- 請求攔截
- 響應攔截
- api的統一管理
- 總結
前言
在react專案中,和後臺互動獲取資料這塊,我們通常使用的是axios庫,它是基於promise的http庫,可執行在瀏覽器端和node.中。他有很多優秀的特性,例如攔截請求和響應、取消請求、轉換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判斷你的登入情況 //www.cppcns.com即使本地存在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(conwww.cppcns.comfig.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.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介面內容請搜尋我們以前的文章或繼續瀏覽下面的相關文章希望大家以後多多支援我們!