react使用axios封装请求方法

react项目封装axios请求方法

react确实是一个非常好用的前端框架, 但是其并没有封装发送请求相关的东西, 由于我前期使用vue 中发送请求用的axios, 所以我也在react项目中使用axios, 下面就是我进行简单封装的方法:

搭建react项目就不说了, 这种教程太多了

搭建项目

npx create-react-app 项目名称

弹出配置

npm run eject

本地安装axios

cnpm install axios -S

封装axios

在src目录下新建request文件夹, 在request文件夹下新建index.js文件, 在index.js中进行封装axios

1. 导入axios

   import axios from 'axios'
   

   如果请求的的Content-Type为application/x-www-form-urlencoded 还需要导入qs, 这个是node下的包, 只要安装了 node就可以直接导入

   import qs from 'qs'
   

2. 配置请求基础路径 和 context-type

   // axios.defaults.baseURL = 'http://192.168.1.101:8081'; // 设置全局默认基本信息
   axios.defaults.headers['Content-Type'] = 'application/x-www-form-urlencoded'; // 设置默认的请求头的Content-Type
   

由于我的项目开发时候, 后端地址值有多个, 所以我就把路径放到一个单独的文件中, 如果地址只有一个, 就直接把上面第一行注释打开, 下面一步也就不需要

3. 在request目录下新建url.js 用来保存请求的路径, 这个地址根据需求, 可以配置多个

   let baseUrl1 = "192.168.1.5:8080"; //地址1
   let baseUrl2 = "192.168.1.6:8080"; //地址2
   

   还可以配置打包后的环境

   if (process.env.NODE_ENV === "production") {
   	baseUrl1 = baseUrl2 = "你的线上地址"
   }
   

   最后, 导出url

   export default {
   	baseUrl1,
   	baseUrl2
   }
   

   并在index.js中导入

   import url from './url'
   

4. 进行分装

   get请求

   /**
    * @description 封装的get请求的方法
    * @param {*} url 请求的地址
    * @param {*} data  请求的数据
    * @returns 数据请求的promise对象
    */
   function getRequest(url, data) {
   	return axios.get(url, {
   		params: data
   	})
   }
   

   使用箭头函数的写法:

   const getRequest = (url, data) => axios.get(url, { params: data })
   

   post请求

   /**
    * @description 封装post请求的方法
    * @param {*} url 请求的地址
    * @param {*} data 请求的数据
    * @returns 数据请求的promise对象
    */
   function postRequest(url, data) {
   	return axios.post(url, data)
   }
   

   使用箭头函数的用法

   const postRequest = (url, data) => axios.post(url, data)
   

5. 配置请求拦截器和响应拦截器

   • 请求拦截器: 需要使用qs转化一下发送的data, 要不后端接收不到数据

     一开始我是这么写的:

     axios.interceptors.request.use(config => {
         config.data = qs.stringify(config.data);
         return config
     })
     

     这样式写发送一般的post请求是没问题的, 但是上传文件就不行啦, 上传的文件不能被转换, 在网上找了一圈找到了答案:

     发送文件用的是 FormData 对象, 发送普通数据用的是普通js对象, 这两个对象调用toString方法生成的字符串是不一样的, 所以最后也就变成了这种写法:

     // 请求拦截器
     axios.interceptors.request.use(config => {
         if (Object.prototype.toString.call(config.data) !== '[object FormData]') {
             config.data = qs.stringify(config.data);
         }
         return config
     })
     

   • 响应拦截器: 由于返回的数据不仅有后端返回的, 还有一些请求的相关信息, 拿到的时候会比较乱, 所以, 需要在响应拦截器中过滤一下. 当然, 也可以进行一些其他的判断操作

     // 响应拦截器
     axios.interceptors.response.use(response => response.data)
     

6. 导出

   export default {
       ...url,
       postRequest,
       getRequest
   }
   

   我就在这里, 把 url 一起导出了, 用起来的时候方便

使用

1. 在普通jsx中使用

   导入:

   import $axios from '../request'
   

   配置url

   const Url1 = $axios.baseUrl1 + '你的地址后缀'    // 拼接地址
   

   使用

   const res = await $axios.postRequest(Url1, param);
   

   param 是要发送的数据, get请求一样

   使用await 要在 外层函数中使用async 修饰一下

   res就是后端返回的数据

2. 结合 redux或者 dvajs 使用

   import $axios from '../request'
   
   const Url = $axios.baseUrl1 + '你的请求地址'
   
   // 获取验证码
   export const sendData = async (params) => $axios.postRequest(Url, params)
   

   params是要发送的数据

这个是我经常在项目中用的封装axios方法, 小伙伴们要根据自己的项目来搭配, 适合自己的才是最好的, vue封装方法和这个类似, 有需要的可以给我留言, 我再出一个vue中封装axios教程