axios的实例封装与拦截器的设置

最新推荐文章于 2026-03-24 10:00:00 发布

原创最新推荐文章于 2026-03-24 10:00:00 发布 · 1.3k 阅读

3 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #前端

axios 专栏收录该内容

2 篇文章

订阅专栏

本文介绍如何封装Axios库以简化HTTP请求管理，包括设置基础URL、超时时间及请求响应拦截器，实现统一配置和错误处理，提高代码可维护性和灵活性。

为什么要进行封装：
1.方便管理，我们可能会在多个地方用到axios请求，如果每个地方都再单独引入它，明显不方便管理，封装后，我们只需引用一个封装好的方法，在这个封装好的方法里可以设置一些公用的配置如timeout,baseUrl,拦截器等。这样就不用在每个使用的地方都重新配置
2.减少依赖，如果有一天我们不再使用axios来发起请求，封装后，我们只需要改变封装的方法，把封装的方法中axios部分改成我们想要的方法即可，其他真正使用请求方法的地方就无需再做改变了。
一.封装
1.安装axios
在这里插入图片描述
这里使用的是npm install axios
2.在src目录下新建文件 axios的封装.js
3.封装方法

import axios from 'axios'
export function request(config){
    const instance=axios.create({
        baseURL:"http://httpbin.org/",
        timeout:1000*60
    })
    // axios拦截器
    // 1.请求拦截
    instance.interceptors.request.use(config=>{
         //请求拦截一般会有哪些操作
        // 1.比如config中的一些信息不符合服务器的要求,这里可以做一些修改
        // 2.比如每次发送网络请求时,都希望在界面中显示一个请求的图标(然后再响应拦截中取消显示)
        // 3.某些网络请求必须携带一些特殊的信息(如登录token),如果没有携带就可以拦截并作响应提示

        // 判断本地使用有token,如果没有则跳转到登录页面
        if(window.localStorage.getItem('token')==null){
            alert('请先登录')
            window.location.href='/'
        }
        else{
            // 给请求头添加token
            config.headers.Authorization=window.localStorage.getItem('token')
             //做了请求成功拦截后不要忘了将请求参数返回,要不然会发送失败
            return config
        }
    },err=>{
        // 请求未成功发出，如没有网络
        return Promise.reject(error)
    })
    // 2.响应拦截器
    instance.interceptors.response.use(
        res=>{
        //成功响应的拦截
        console.log('res.status',res.status)
        return Promise.resolve(res.data)
        },
        err=>{
        // 响应失败的拦截
        console.log(err)
        if(err.response){
            // 失败响应的status需要在response中获得
            console.log(err.response)
            switch(err.response.status){
                // 对得到的状态码的处理，具体的设置视自己的情况而定
                case 401:
                    console.log('未登录')
                    window.location.href='/'
                    break
                case 404:
                    window.location.href='/'
                    break
                case 405:
                    console.log('不支持的方法')
                    break
                // case ...
                default:
                    console.log('其他错误')
                    break
            }
           
        }
        // 注意这里这里应该return promise.reject(),
        // 因为如果直接return err则在调用此实例时，响应失败了也会进入then(res=>{})而不是reject或catch方法
        return Promise.reject(err)
    })
    
    return instance(config)
}

二.调用封装的方法
这里是在vue文件中调用的

<script>
import {request} from '@/axios的封装.js'
export default {
  name: 'App',
  created(){
    // 这里设置token是因为request做了请求拦截，实际token时通过后端返回得到的
    window.localStorage.setItem('token','$w12@&123')
    request({
       url:"/api/post",
      method:"post",
      data:JSON.stringify({
        mess:'hello'
      })
    }).then(res=>{
      console.log('响应成功',res)
    },reject=>{
      console.log('响应失败',reject)
    })
  }
}
</script>