react使用axios封装请求方法


react项目封装axios请求方法

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

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

搭建项目

1
npx create-react-app 项目名称

弹出配置

1
npm run eject

本地安装axios

1
cnpm install axios -S

封装axios

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

  1. 导入axios

    1
    import axios from 'axios'

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

    1
    import qs from 'qs'

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

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

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

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

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

    还可以配置打包后的环境

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

    最后, 导出url

    1
    2
    3
    4
    export default {
        baseUrl1,
        baseUrl2
    }

    并在index.js中导入

    1
    import url from './url'

  2. 进行分装

    get请求

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    /**
     * @description 封装的get请求的方法
     * @param {*} url 请求的地址
     * @param {*} data  请求的数据
     * @returns 数据请求的promise对象
     */
    function getRequest(url, data) {
        return axios.get(url, {
            params: data
        })
    }

    使用箭头函数的写法:

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

    post请求

    1
    2
    3
    4
    5
    6
    7
    8
    9
    /**
     * @description 封装post请求的方法
     * @param {*} url 请求的地址
     * @param {*} data 请求的数据
     * @returns 数据请求的promise对象
     */
    function postRequest(url, data) {
        return axios.post(url, data)
    }

    使用箭头函数的用法

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

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

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

      一开始我是这么写的:

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

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

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

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

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

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

  4. 导出

    1
    2
    3
    4
    5
    export default {
        ...url,
        postRequest,
        getRequest
    }

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

使用

  1. 在普通jsx中使用

    导入:

    1
    import $axios from '../request'

    配置url

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

    使用

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

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

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

    res就是后端返回的数据

  2. 结合 redux或者 dvajs 使用

    1
    2
    3
    4
    5
    6
    import $axios from '../request'

    const Url = $axios.baseUrl1 + '你的请求地址'

    // 获取验证码
    export const sendData = async (params) => $axios.postRequest(Url, params)

    params是要发送的数据

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