日本免费高清视频-国产福利视频导航-黄色在线播放国产-天天操天天操天天操天天操|www.shdianci.com

學無先后，達者為師

網站首頁 編程語言 正文

react使用axios進行api網絡請求的封裝方法詳解_React

作者：北海的大魚 ? 更新時間： 2022-05-27 編程語言

前言

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

準備工作

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

在這里插入圖片描述

如果沒有，請先安裝axios

npm install axios

開始封裝axios

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

config.js

這個文件我們用來進行基礎配置，區分開發環境：

1.定義devBaseUrl開發環境和proBaseUrl生產環境

2.使用process.env來區分開發還是生產環境，它返回的是一個包含用戶的環境信息

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'

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

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

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

2.使用data接收請求的結果，在request中寫請求需要的params參數

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

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

查看打印的結果：

可以看到請求到的data數據，這樣就說明請求成功啦

在這里插入圖片描述

總結

原文鏈接：https://blog.csdn.net/weixin_45745641/article/details/123693319

欄目分類
最近更新