快捷導(dǎo)航

react使用axios進(jìn)行api網(wǎng)絡(luò)請(qǐng)求的封裝方法詳解

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

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

前言

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

準(zhǔn)備工作

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

在這里插入圖片描述

如果沒有，請(qǐng)先安裝axios

npm install axios

開始封裝axios

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

config.js

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

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

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

3.最后設(shè)置一下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

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

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

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

3.寫一個(gè)請(qǐng)求攔截器，在請(qǐng)求攔截器里面就可以做token驗(yàn)證之類的操作

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

進(jìn)行請(qǐng)求

做完上面的封裝之后，我們就可以進(jìn)行請(qǐng)求操作了，來到要使用的頁(yè)面

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

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

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

對(duì)于api的請(qǐng)求，我們這里在componentDidMount()生命周期中進(jìn)行異步請(qǐng)求：

1.使用async await 進(jìn)行異步操作

2.使用data接收請(qǐng)求的結(jié)果，在request中寫請(qǐng)求需要的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é)果：

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

在這里插入圖片描述