【React】axios 封装使用

一颗不甘坠落的流星

已于 2022-04-18 18:20:22 修改

阅读量647

点赞数 1

分类专栏： React 全家桶文章标签： react axios

于 2021-06-15 15:44:29 首次发布

本文链接：https://blog.csdn.net/qq_45677671/article/details/116299752

版权

React 全家桶专栏收录该内容

30 篇文章 31 订阅

订阅专栏

这篇博客介绍了如何在项目中封装axios，通常在src/utils目录下创建request.js文件。配置包括设置基础路径和超时时间，并通过interceptors进行请求和响应拦截，处理如token配置、错误日志等。此外，还展示了如何处理不同状态码的错误情况，例如404和500错误。

摘要由CSDN通过智能技术生成

axios的封装

一般在项目文件夹中的src目录下，单独建个文件夹utils，里面新建个request.js文件用来封装路由。

基本格式如下：

//axios 的封装

import axios from 'axios';
//配置
const service = axios.create({
    baseURL: '/',//基础路径
    timeout: 60000 //请求的超时时间
})

//请求拦截
service.interceptors.request.use(
    config => {
        //配置头部的token
        return config;
    },
    err => {
        console.log("请求出错", err);
    }
)

//响应拦截
service.interceptors.response.use(
    data => {
        //需要有后台的文档支持
        return data;
    },
    err => {//响应时出错
        console.log(err.response.status);
        const status = err.response.status;
        if (status === 404) {
            console.log("页面没找到");
        } else if (status === 500) {
            console.log("服务器端错误");
        } else {
            console.log("请求出错");
        }

    }
)

export default service;