axios拦截器

关注

原创最新推荐文章于 2026-04-14 09:56:57 发布 246 阅读 AI 写同款· GEO 优化 ›

Vue3 网络请求——axios 高级用法之 axios 拦截器实战与并发请求 Axios 是一个流行的基于 Promise 的 HTTP 客户端库，用于在浏览器和 Node.js 中发出 HTTP 请求。Axios 还支持请求和响应的拦截器。接下来通过这篇文章，我们一起来学习和了解一下 Axios 拦截器和并发请求，通过实际代码来介绍如何使用 Axios 拦截器。阅读详情

在vue封装axios拦截器

首先下载axios

npm i axios --save

创建request.js(自己命名)文件

 // 导入axios
import axios from 'axios'  
// 创建axios实例
const service = axios.create({
  baseURL: '默认接口域名url',
  timeout:2500 //给实例添加默认超时时间
});

// 添加请求拦截
service.interceptors.request.use(function (config) {
    //发送成功请求
    return config;
  }, function (error) {
    //发送错误请求的拦截
    return Promise.reject(error);
  });

// 添加响应拦截
service.interceptors.response.use(function (res) {
    //成功返回   
    return res;
  }, function (error) {
    //失败返回
    return Promise.reject(error);
  });

// 导出
export default service

在main.js中进行导入使用

import service from "@/api/request"  //根据自己路径导入

Vue.prototype.$axios =service  // 绑定到vue的原型上,在每个页面都可以使用了

在页面使用

   created() {
    this.$axios.get('https://wwww.....').then(response=>{
    console.log(response);
  }).catch(function (error) {
    console.log(error);
  })
  },