当前位置:   article > 正文

React项目封装axios网络请求文件(初级)_react项目中标准的request文件封装

react项目中标准的request文件封装

#自学笔记

第一步:安装axios 

npm i axios

第二步:在services文件夹内创建request文件夹,request文件夹内创建config.js文件和index.js文件

第三步:在config.js内配置baseUrl以及timeout

  1. export const BASE_URL = "http://www.codercba.com:1888/airbnb/api"
  2. export const TIME_OUT = 10000

在index.js内封装网络请求: 

  1. import axios from 'axios'
  2. import { BASE_URL,TIME_OUT } from './config';
  3. class DDRequest{
  4. constructor(baseUrl, timeout){
  5. //创建一个axios实例,传入请求地址和请求超时时间
  6. this.instance = axios.create({
  7. baseUrl,
  8. timeout,
  9. //也可以设置默认请求头
  10. //headers: {
  11. // 'Authorization': 'Bearer your_token_here'
  12. //}
  13. })
  14. //响应拦截器
  15. this.instance.interceptors.response.use(res => {
  16. //这里对响应数据做一些操作
  17. return res.data
  18. },err => {
  19. return err
  20. })
  21. }
  22. request(config){
  23. return this.instance.request(config)
  24. }
  25. get(config){
  26. return this.request({...config, method:'get'})
  27. }
  28. post(config){
  29. return this.request({...config, method:'post'})
  30. }
  31. }
  32. export default new DDRequest(BASE_URL,TIME_OUT)

第四步:在services文件夹内创建一个index.js文件,导出请求实例

  1. import ddRequest from './config.js'
  2. export default ddRequest

第五步:在home页面测试发送网络请求是否成功

  1. import React, { memo, useEffect } from 'react'
  2. import ddRequest from '@/services'
  3. const Home = memo(() => {
  4. useEffect(() => {
  5. ddRequest.get({'/home/highscore'}).then(res => {
  6. console.log(res) //打印请求到的数据
  7. })
  8. },[])
  9. return (
  10. <div><div/>
  11. )
  12. })

声明:本文内容由网友自发贡献,不代表【wpsshop博客】立场,版权归原作者所有,本站不承担相应法律责任。如您发现有侵权的内容,请联系我们。转载请注明出处:https://www.wpsshop.cn/w/weixin_40725706/article/detail/761121
推荐阅读
相关标签
  

闽ICP备14008679号