react使用axios進行api網(wǎng)絡請求的封裝方法詳解

更新時間：2022年03月24日 15:36:18 作者：北海的大魚

這篇文章主要為大家詳細介紹了react使用axios進行api網(wǎng)絡請求的封裝方法，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來幫助

前言

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

準備工作

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

在這里插入圖片描述

如果沒有，請先安裝axios

npm install axios

開始封裝axios

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

config.js

這個文件我們用來進行基礎配置，區(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.最后設置一下timeout

const devBaseUrl = 'http://api.k780.com/'
const proBaseUrl = 'http:xxx//xxxx.xx.com'
export const BASE_URL = process.env.NODE_ENV === 'development' ? devBaseUrl : proBaseUrl
export const TIMEOUT = 5000

request.js

存放對應的封裝方法和攔截器：

1.首先導入axios和config中我們上面寫的BASE_URL, TIMEOUT

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

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

import axios from 'axios'
import { BASE_URL, TIMEOUT } from './config'
const instance = axios.create({
    baseURL: BASE_URL,
    timeout: TIMEOUT
})
// 請求攔截器
instance.interceptors.request.use(config => {
    console.log('被攔截做一些操作')
    return config
}, err => {
    return err
})
export default instance

進行請求

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

首先進行導入剛剛寫的request文件：

import request from '../../axios/request'

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

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

1.使用async await 進行異步操作

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

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

async componentDidMount() {
    const data = await request({
      // 參數(shù)
      params: {
        app: 'weather.today',
        weaId: 248,
        appkey: 10003,
        sign: 'b59bc3ef6191eb9f747dd4e83c99f2a4',
        format: 'json'
      }
    })
    console.log(data)
    this.setState({weather: data.data.result.weather})
  }

查看打印的結(jié)果：

可以看到請求到的data數(shù)據(jù)，這樣就說明請求成功啦

在這里插入圖片描述