react使用axios进行api网络请求的封装方法详解

更新时间：2022年03月24日 15:36:18 作者：北海的大鱼

这篇文章主要为大家详细介绍了react使用axios进行api网络请求的封装方法，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下，希望能够给你带来帮助

前言

最近写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数据，这样就说明请求成功啦

在这里插入图片描述

总结

本篇文章就到这里了，希望能够给你带来帮助，也希望您能够多多关注脚本之家的更多内容!

您可能感兴趣的文章:

优雅的在React项目中使用Redux的方法
这篇文章主要介绍了优雅的在React项目中使用Redux的方法，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2018-11-11
浅谈react受控组件与非受控组件(小结)
本篇文章主要介绍了浅谈react受控组件与非受控组件(小结)，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2018-02-02
前端 react 实现图片上传前压缩(缩率图)
这篇文章主要介绍了前端 react 实现图片上传前压缩(缩率图),本文通过实例代码给大家介绍的非常详细,感兴趣的朋友跟随小编一起看看吧
2024-08-08
详解在React项目中如何集成和使用web worker
在复杂的React应用中,某些计算密集型或耗时操作可能会阻塞主线程,导致用户界面出现卡顿或响应慢的现象,为了优化用户体验,可以采用Web Worker来在后台线程中执行这些操作,本文将详细介绍在React项目中如何集成和使用Web Worker来改善应用性能,需要的朋友可以参考下
2023-12-12
React Native第三方平台分享的实例（Android，IOS双平台）
本篇文章主要介绍了React Native第三方平台分享的实例（Android，IOS双平台），具有一定的参考价值，有兴趣的可以了解一下
2017-08-08
react如何使用mobx6动态加载数据
MobX是一个强大而简单的状态管理工具,它可以帮助我们更好地组织和管理React应用程序中的数据流,本文给大家介绍react如何使用mobx6动态加载数据,感兴趣的朋友跟随小编一起看看吧
2024-02-02
关于React Native报Cannot initialize a parameter of type''NSArra
这篇文章主要介绍了关于React Native报Cannot initialize a parameter of type'NSArray＜id＜RCTBridgeModule＞＞错误，本文给大家分享解决方案,需要的朋友可以参考下
2021-05-05
React控制元素显示隐藏的三种方法小结
这篇文章主要介绍了React控制元素显示隐藏的三种方法小结，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
2022-12-12
详解如何在React中优雅的使用addEventListener
这篇文章主要为大家详细介绍了如何在React中优雅的使用addEventListener，文中的示例代码简洁易懂，对大家学习React有一定的帮助，需要的可以参考一下
2023-01-01
React路由动画切换实现过程详解
这篇文章主要介绍了react-router 路由切换动画的实现示例，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2022-12-12