第react使用axios進行api網(wǎng)絡(luò)請求的封裝方法詳解目錄前言準備工作開始封裝axiosconfig.jsrequest.js進行請求總結(jié)

前言

最近寫react項目使用到axios進行請求封裝，在這里記錄一下，希望可以幫助到初學(xué)的小伙伴

準備工作

進行請求需要使用axios，所以要先確定你已經(jīng)安裝完成了axios,查看package.json文件

如果沒有，請先安裝axios

npminstallaxios

開始封裝axios

首先在src目錄下新建axios文件夾，這里我們新建兩個文件，分別是config.js和request.js

config.js

這個文件我們用來進行基礎(chǔ)配置，區(qū)分開發(fā)環(huán)境：

1.定義devBaseUrl開發(fā)環(huán)境和proBaseUrl生產(chǎn)環(huán)境

2.使用process.env來區(qū)分開發(fā)還是生產(chǎn)環(huán)境，它返回的是一個包含用戶的環(huán)境信息

3.最后設(shè)置一下timeout

constdevBaseUrl='/'

constproBaseUrl='http:xxx//'

exportconstBASE_URL=process.env.NODE_ENV==='development'devBaseUrl:proBaseUrl

exportconstTIMEOUT=5000

request.js

存放對應(yīng)的封裝方法和攔截器：

1.首先導(dǎo)入axios和config中我們上面寫的BASE_URL,TIMEOUT

2.定義instance=axios.create({})，里面存放對象

3.寫一個請求攔截器，在請求攔截器里面就可以做token驗證之類的操作

importaxiosfrom'axios'

import{BASE_URL,TIMEOUT}from'./config'

constinstance=axios.create({

baseURL:BASE_URL,

timeout:TIMEOUT

//請求攔截器

erceptors.request.use(config={

console.log('被攔截做一些操作')

returnconfig

},err={

returnerr

exportdefaultinstance

進行請求

做完上面的封裝之后，我們就可以進行請求操作了，來到要使用的頁面

首先進行導(dǎo)入剛剛寫的request文件：

importrequestfrom'../../axios/request'

我這里請求的是網(wǎng)上的一個天氣接口，地址已經(jīng)寫在了上面config.js文件中的devBaseUrl

對于api的請求，我們這里在componentDidMount()生命周期中進行異步請求：

1.使用asyncawait進行異步操作

2.使用data接收請求的結(jié)果，在request中寫請求需要的params參數(shù)

3.最后打印data看下結(jié)果，后面是使用setState修改值

asynccomponentDidMount(){

constdata=awaitrequest({

//參數(shù)

params:{

app:'weather.today',

weaId:248,

appkey:10003,

sign:'b59bc3ef6191eb9f747dd4e83c99f2a4',

format:'json'

console.log(data)

this.setState({weather:data.data.result.weather})

查看打印