vue axios拦截器的封装

// request.js

import axios from 'axios'
import qs from 'qs'// 创建axios实例
const service = axios.create({timeout: 10000, // 请求超时时间transformrequest: data => qs.stringify(data)
})
// request拦截器
service.interceptors.request.use(config => {config.headers['X-Requested-With'] = 'XMLHttpRequest'config.headers['X-Platform'] = window.__wxjs_environment === 'miniprogram' ? 'MiniProgram' : 'H5'return config},error => ({ status: 0, msg: error.message })
)// respone拦截器
service.interceptors.response.use(response => {const res = responseif (response.status === 200) {switch (res.status) {case 0: // 错误并提示if (!response.config.errorSelf) {//
        }return { data: res.data, msg: res.msg, status: false }case 1: // 成功返回数据return { data: res.data, msg: res.msg, status: true }case -1: // 暂不进行任何操作return { data: res.data, status: false }default:return { data: res.data, status: true }}}return { data: response.data, status: false }},error => {console.log('err' + error) // for debugswitch (error.request.status) {case 401: // 无权限访问，需要登录return Promise.reject ? Promise.reject(error) : errorcase 500: // 请求接口错误if (error.config.linkError) {//
      }return Promise.reject ? Promise.reject(error) : error}return Promise.reject ? Promise.reject(error) : error}
)export default service

调用：

import request from '@/utils/request'/*** 登录*/
export function login (data) {return request({url: '/sqlapi/login',method: 'post',data: {username: data.username,password: data.password}})
}

转载于:https://www.cnblogs.com/Jbridge/p/10643980.html

vue axios拦截器的封装相关推荐

vue axios 拦截器配置与封装
一.安装 1. 利用npm安装npm install axios --save --save:安装在生产环境二.例子要想统一处理所有http请求和响应,就得用上 axios 的拦截器. axios ...
Vue axios拦截器使用
axios 是一个基于Promise 用于浏览器和 nodejs 的 HTTP 客户端.这篇文章主要介绍了vue/axios请求拦截的相关知识,需要的朋友可以参考下 axios使用拦截器在请求或响应 ...
axios 拦截器不生效填坑
Vue axios拦截器不生效填坑: 1.let instance = axios.create();//此处创建拦截器,拦截器处理过程省略 2.Vue.prototype.$http = insta ...
Vue2学习小记-给Vue2路由导航钩子和axios拦截器做个封装
1.写在前面最近在学习Vue2,遇到有些页面请求数据需要用户登录权限.服务器响应不符预期的问题,但是总不能每个页面都做单独处理吧,于是想到axios提供了拦截器这个好东西,再于是就出现了本文. 2. ...
Vue2学习小记-给Vue2路由导航钩子和axios拦截器做个封装 1
1.写在前面最近在学习Vue2,遇到有些页面请求数据需要用户登录权限.服务器响应不符预期的问题,但是总不能每个页面都做单独处理吧,于是想到axios提供了拦截器这个好东西,再于是就出现了本文. 2. ...
封装axios加载动画Loding——vuex+axios拦截器
封装axios加载动画Loding--vuex+axios拦截器前言:我们在axios发送请求时候,会存在请求等待时长,我们一般会加一个动画,如果很多个时候一个一个的加动画代码看起来很臃肿很冗余,我 ...
Vue学习笔记：axios 拦截器的用法
Vue学习笔记:axios 拦截器的用法什么是axios 拦截器? 拦截器就是拦截每一次的请求和响应,然后进行相应的处理.请求拦截器,它可以统一在你发送请求前在请求体里加上token:响应拦截器,是 ...
axios vue 加载效果动画_vue中使用axios拦截器实现数据加载之前的loading动画显示 @劉䔳...
首先新建一个 loading.vue组件,写loading动画效果 .loader { width: 100%; height: 100%; display: flex; align-items: c ...
【vue开发问题-解决方法】（八）利用axios拦截器实现elementUI中加载动画，控制加载区域
[vue开发问题-解决方法](八)利用axios拦截器实现elementUI中加载动画,控制加载区域参考文章: (1)[vue开发问题-解决方法](八)利用axios拦截器实现elementUI中加 ...

vue axios拦截器的封装

vue axios拦截器的封装相关推荐

最新文章

热门文章