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中父子组件通信详解，在父组件中，为子组件添加属性数据，即可实现父组件向子组件通信，文章通过围绕主题展开详细的内容介绍，具有一定的参考价值，需要的小伙伴可以参考一下2022-08-08
React项目中fetch实现跨域接收传递session的解决方案
这篇文章主要介绍了React项目中fetch实现跨域接收传递session的解决方案,本次项目使用了react框架，同时使用fetch取代ajax作为获取接口数据的交互方法，下面就对这次问题的解决做个总结，需要的朋友可以参考下2022-04-04
这篇文章主要介绍了深入研究React中setState源码，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-11-11
React中的getDefaultProps功能允许开发者为类组件定义默认属性,提高组件的灵活性和容错性,本文介绍了getDefaultProps的作用、语法以及最佳实践,并探讨了其他替代方案,如函数组件中的默认参数、高阶组件和ContextAPI等,理解这些概念有助于提升代码的可维护性和用户体验2024-09-09
这篇文章主要介绍了React项目动态设置title标题的方法示例，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-09-09
这篇文章主要为大家详细介绍了的React Refs属性，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下，希望能够给你带来帮助2022-03-03
这篇文章主要为大家介绍了React弹窗使用方式NiceModal重新思考分析，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2022-08-08
这篇文章主要介绍了React 路由使用,使用路由时需要为组件指定一个路由的path，最终会以path为基础，进行页面的跳转，具体使用先看个简单示例，该示例比较简单就是两个Tab页面的来回切换2022-05-05
这篇文章主要为大家介绍了Next.js搭建Monorepo组件库文档，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2022-11-11
这篇文章主要介绍了详解各版本React路由的跳转的方法，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-05-05
最新评论