React項目中axios的封裝與API接口的管理詳解
前言
在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!
推薦閱讀:
- Vue如何防止按鈕重復點擊方案詳解
- vue封裝axios與api接口管理的完整步驟
- vue日常開發基礎Axios網絡庫封裝
- axios的interceptors多次執行問題解決
- 可能是vue中使用axios最詳細教程