vue+axios request拦截器与响应拦截器

最新推荐文章于 2024-08-04 21:45:12 发布

Yang-Z-Hua

最新推荐文章于 2024-08-04 21:45:12 发布

阅读量369

点赞数

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

本文链接：https://blog.csdn.net/qq_42896240/article/details/126398264

版权

本文介绍了如何在Vue.js项目中结合Axios设置request和response拦截器，通过创建request.js和api.js文件来统一管理请求，方便在组件中便捷调用接口。

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

1，创建request.js

import axios from 'axios'
import { MessageBox, Message } from 'element-ui'
axios.defaults.headers['Content-Type'] = 'application/json;charset=utf-8'
// 创建axios实例
let base_url = process.env.BASE_URL;//这里baseUrl放在dev.env.js与prod.env.js
const service = axios.create({
  baseURL: base_url,
  timeout: 15000
})
// request拦截器
service.interceptors.request.use(config => {
  console.log(config)
  return config
}, error => {
  console.log(error)
  if (!error.response) {
    console.log("Please check your internet connection.");
  }

  return Promise.reject(error)
})

// 响应拦截器
service.interceptors.response.use(res => {
  // 未设置状态码则默认成功状态
// console.log("res.data："+JSON.stringify(res.data));
  const code = res.data.code|| 200;
  console.log(code)
  // 获取错误信息
  if (code !== 200){
    if (code === 400) {
      MessageBox.confi