axios拦截器

最新推荐文章于 2022-03-31 20:31:06 发布

yaojie.yao

最新推荐文章于 2022-03-31 20:31:06 发布

阅读量214

点赞数 1

分类专栏： vue 文章标签： vue ajax javascript 前端 vue.js

本文链接：https://blog.csdn.net/listStyleScript/article/details/106253527

版权

vue 专栏收录该内容

5 篇文章

订阅专栏

本文介绍了如何在Vue项目中封装axios拦截器，包括安装axios、创建request.js文件、在main.js中导入并使用，以及在实际页面中调用拦截器的方法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在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);
  })
  },