React--对axios的封装

时间:2021-09-15
本文章向大家介绍React--对axios的封装,主要包括React--对axios的封装使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。
/**
 * 对axios的封装
 */

//引入axios
import axios from 'axios';

//引入其它配置(根据具体需求按需引入)
import { history } from 'umi';


//1.创建axios实例,默认配置也可以在具体请求内复写修改。
const instance = axios.create({
    //请求头默认配置
    headers: {
        'x-requested-with': 'XMLHttpRequest',
        'Content-Type': 'application/x-www-form-urlencoded'
    },

    // 覆写库的超时默认值
    // 现在,在超时前,所有请求都会等待 5 秒
    timeout:5000,

    //apibaseURL设置
    baseURL:'http://localhost:3000',
});


// 2.添加请求拦截器
instance.interceptors.request.use((request) => {
    // 在发送请求之前做些什么
    
    /**
     * 添加权限验证
        const user: any = true;
        if (user) {
        request.headers = {
            ...request.headers,
            Authorization: user,
        };
        }
     */
    return request;

},(error)=>{

    // 对请求错误做些什么(转到错误页面之类的)
    return Promise.reject(error);

});


// 3.添加响应拦截器
instance.interceptors.response.use((response) => {
    // 对响应数据做点什么
    /**
     * 对特定api进行操作
     * if (response.config.url == '/api/auth/getCode') {
        return response;
      }
     */

    //对一些特定的后端指定错误进行页面跳转(比如权限验证等的)

    //返回data使用时只关注数据
    return response.data;
},(error) => {
    // 对响应错误做点什么(转到错误页面之类的)
    return Promise.reject(error);
});

export default instance;

  

原文地址:https://www.cnblogs.com/fei-yu9999/p/15271563.html