axios基本封装、请求拦截和响应拦截配置

axios基本封装、请求拦截和响应拦截配置

我们在开发中基本上都要对请求进行统一配置，这样非常利于我们后期的维护
比如可以在此配置请求拦截，响应拦截等
大部分请求都需要携带token，我们可以在请求拦截中进行配置，让页面每次发起请求时都被拦截下来加上token再通过。

import axios from 'axios'
// 在此可判断当前是什么环境 开发环境、生产环境
const isDev = process.env.NODE_ENV;
// 基础配置
const ins = axios.create({
// 根路径 根据上方判断的环境 切换不能请求根地址
  // baseURL: isDev ? 'http://121.89.205.189/admin' : 'http://121.89.205.189/admin',
 baseURL: '/api',
  headers: {
    'Content-Type': 'application/json;charset=UTF-8'
  },
  // 设置请求超时的时长
  timeout: 6000
})

// 请求拦截
ins.interceptors.request.use((config) => {
	// 例如在请求头中设置新属性token，参数为我们的token ，实现每次请求都会在请求头中携带token
  config.headers.common.token = localStorage.getItem('token') || ''
  return config
}, error => {
  return Promise.reject(error)
})

// 响应拦截
ins.interceptors.response.use(response => {
// 根据后端返回的数据，错误时的统一操作
    return response

}, error => {
  return Promise.reject(error)
})


async function request(config) {
  let { url, data, method = 'GET', headers } = config

  // restful api  GET / POST /PUT/PATCH/DELETE
    const requestIns = () => {
        switch (method.toUpperCase()) {
            case 'GET':
                return ins.get(url, { params: data })
            case 'POST':
                // 表单提交  application/x-www-form-url-encoded
                if (headers['content-type'] === 'application/x-www-form-url-encoded') {
                    // 转参数 URLSearchParams/第三方库qs
                    const p = new URLSearchParams()
                    for (let key in data) {
                        p.append(key, data[key])
                    }
                    return ins.post(url, p, { headers })
                }
                // 文件提交  multipart/form-data
                if (headers['content-type'] === 'multipart/form-data') {
                    const p = new FormData()
                    for (let key in data) {
                        p.append(key, data[key])
                    }
                    return ins.post(url, p, { headers })
                }
                // 默认 application/json
                return ins.post(url, data)
            case 'PUT': // 全部更新
                return ins.put(url, data)
            case 'PATCH': // 局部更新
                return ins.patch(url, data)
            case 'DELETE': // 删除
                return ins.delete(url, { data })
            default:
                return ins(config)
        }

    }

    try {
        const { data } = await requestIns();


        if (data.retCode !== '200') {

            throw Error(data.retMsg);
        }

        return data.retData || data;
    } catch (error) {
    	// 统一在此处抛出错误处理
        message.error(error.message);

        return {
            error,
            requestError: true,
        };
    }
}

export default request

发送请求示例

根据请求方式，发起请求的参数形式不同，使用以下函数配置好后，后续在页面中调用此函数进行请求，将请求方式，地址，数据等当做参数的形式传入。这样使我们的请求结构清晰统一格式。例如：

import request from "@/utils/request/request";

export const getUserTokenConfig = async () => {
  const  defaultParams =JSON.parse(window.sessionStorage.getItem('defaultParams')as any) 
  const res = await request({
    url: "/api/getUserConfig",
    method: "post",
    data: {
      code: defaultParams?.code || '',
      uin: defaultParams?.uin || '',
    }
  });
  
  return {
    // userId: res?.userId || '',
    userName: res?.userName || '',
  };
};