web建站教程
  1. 首页
  2. vuejs
  3. js
  4. 好玩
  5. seo教程
  6. 前端知识
  7. 百度echarts
  8. 更多
    php入门
    nodejs
    mockjs
    reactjs
    mysql
    wordpress
    织梦cms
    帝国cms
    git教程
    IT知识
    模板大全
    休息站

vue在js中封装Axios(请求拦截器,响应拦截器)完整代码

425 ℃
     
import axios from 'axios'
import qs from 'qs';
import {
  MessageBox,
  Message
} from 'element-ui'
import store from '@/store'
import router from '@/router'
import {
  getToken
} from '@/utils/auth'

// 创建一个axios实例
const service = axios.create({
  baseURL: 'XXXXX', 
  withCredentials: true, 
  timeout: 15000 
})

service.interceptors.request.use(
  config => {
    if (store.getters.token) {
    // 让每个请求携带令牌——['Has-Token']作为自定义密钥。
    // 请根据实际情况修改。
    config.headers['Has-Token'] = getToken()
    }
    //在这里根据自己相关的需求做不同请求头的切换,我司是需要使用这两种请求头。
    if (config.json) {
      config.headers['Content-Type'] = 'application/json'
    } else {
      config.headers['Content-Type'] = 'application/x-www-form-urlencoded;charset=UTF-8'
      config.data = qs.stringify(config.data);   //利用qs做json序列化
    }
    return config
  },
  error => {
    // 处理请求错误
    console.log(error) // 调试
    return Promise.reject(error)
  }
)
service.interceptors.response.use(
  response => {
    const res = response.data    //这是响应返回后的结果
    //在这里可以根据返回的状态码对存在响应错误的请求做拦截,提前做处理。

    //以下为我司的处理规则
    // 如果自定义代码不是200,则判断为错误。
    if (res.code == 200 || res.code == 300) {
      // 重新登陆
      MessageBox.confirm('您的登录状态存在问题,您可以取消以停留在此页面,或再次登录', '系统提示', {
        confirmButtonText: '重新登录',
        type: 'warning'
      }).then(() => {
        store.dispatch('user/resetToken').then(() => {
          location.reload();
        })
      })
      return
    } else {
      if (res.code == 700) {
        Message.warning('您没有获取请求的权限!')
        router.replace({
          path: '/401'
        })
        return
      } else {
        return res
      }
    }
    //end
  },
  error => {
    console.log('err' + error)
    Message({
      message: error.message,
      type: 'error',
      duration: 5 * 1000
    })
    return Promise.reject(error)
  }
)

export default service

vue如何实现数据请求(axios/ajax)

vuejs打包后修改static文件夹下json文件中值但页面上获取不到最新数据

vuejs如何利用$axios调用json模拟数据

react如何实现axios拦截功能(附代码介绍)

vue3中axios的使用方法独到之处

标签: axios, 封装

上面是“vue在js中封装Axios(请求拦截器,响应拦截器)完整代码”的全面内容,想了解更多关于 vuejs 内容,请继续关注web建站教程。

当前网址:https://ipkd.cn/webs_2.html

声明:本站提供的所有资源部分来自互联网,如果有侵犯您的版权或其他权益,请发送到邮箱:admin@ipkd.cn,我们会在看到邮件的第一时间内为您处理!

当前位置: 网站首页 > vuejs
本文共计1690个字,预计阅读时长12分钟
生活小工具,收录了80多款小工具
上一篇: 抖音联合方正打造免费可商用品牌字体——抖音美好体
下一篇: 推荐一个在线图文转视频、AI 数字人工具——一帧秒创(免费赠送100分钟)
x 打工人ai神器