React进行axios二次封装

Axios 是一个基于 promise 的 HTTP 库，可以用在浏览器和 node.js 中。在实际的项目中，我们一般会进行二次封装。

---

1.引用及准备

封装之前首先进行引用及构造请求地址API。其中services模块汇总了所有请求地址与类型，请求示例如reqCheckLogin所示。

 

/**
 * services模块根据接口文档定义接口的名称和方法
 * 根据模块拆分文件
 * index.js为出口文件，需要引入其他的services并整合
 */
import login from './login'
import permission from './permission'
import menu from './menu'
import user from './user'

const API = Object.assign(
    {},
    login,
    permission,
    menu,
    user,
)

export default API

2.二次封装

首先创建axios示例，然后遍历services中的请求进行参数检查，根据参数判断请求的合法性，返回不同的信息。

// services 循环遍历输出不同的请求方法
let baseURL = '/url'
let instance = axios.create({
    baseURL: baseURL,
    timeout: 10000,
})

const Http = {} // 包裹请求方法的容器

// 请求格式/参数的统一
for (let key in services) {
    let api = services[key]; // url method
    // async方法，同步方式写异步代码
    Http[key] = async function (
        params, // 请求参数 get|delete:url,put|post|patch:data
        isFormData = false, // 标识是否为form-data请求
        config = {}, // 配置参数
        splicedParam,//URL拼接参数
    ) {
        // await axios.get('url')
        let {url, method} = api
        // 用于处理form-data的参数
        let newParams = {}
        // content-type是否为form-data的判断
        if (params && isFormData) {
            newParams = new FormData()
            for (let key in params) {
                newParams.append(key, params[key])
            }
        } else {
            newParams = params
        }
        // 不同请求的判断
        let response = {} // 请求的返回值
        if (method === 'put' || method === 'post' || method === 'patch') {
            try {
                response = await instance[method](url, newParams, config)
            } catch (err) {
                message.error("请求错误，请重试")
            }
        } else if (method === 'get' || method === 'delete') {
            if (splicedParam) {
                url = url + '/' + splicedParam
            }
            config.params = newParams
            try {
                response = await instance[method](url, config)
            } catch (err) {
                message.error("请求错误，请重试")
            }
        }

        if (response.status === 200) {
            const res = response.data
            if (res.code === 0) {
                return res
            } else {
                message.error(res.message)
                return false
            }
        }
        if (response.status === 404) {
            this.props.history.push('/page404')
        }
        if (response.status === 403) {
            this.props.history.push('/page403')
        }
        if (response.status === 500) {
            this.props.history.push('/page500')
        }

    }
}

3.使用​​​​​​

​​​​​​实际使用中调用封装好的方法进行请求。

import Http from '@/axios'
import { call } from 'redux-saga/effects'

export function* asyncCheckLogin({payload}) {

  const res = yield call(Http.reqCheckLogin, payload.values)

  if(res&&res.code==='0'){   
    // 跳转到首页
    payload.history.replace('/')
  }else {
    message.warn("你错了")
  }
}