import axios from 'axios' import router from '../router' import {Toast} from 'vant' //跳转到登录的方法 const goLogin = ()=>{ router.replace({ path:'/login', query:{ redirect:router.currentRoute.fullPath } }) } //提示 const tip = msg=>{ Toast({ message:msg, duration:1000, forbidClick:true }) } //定义请求失败统一处理 const errorHandle = (status,other)=>{ switch(status){ //未登录,跳转登录页 case 401: goLogin() break; //token过期,请出token并跳转到登录页 case 403: tip('登录过期请重新登录') localStorage.removeItem('token') setTimeout(() => { goLogin() }, 1000); break; //404请求不存在 case 404: tip('请求资源不存') break; default: console.log(other) } } //创建axios实例 var instace = axios.create({ timeout:1000* 12 }) //设置post请求头 instace.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded' //请求拦截器,每次请求如果token存在则在请求头中携带token instace.interceptors.request.use( config=>{ //登录流程控制中,根据本地是否存在token判断用户登录的情况 //存在token过期的情况,每次请求携带token后台检查token是否过期,返回状态码,我们在拦截器中根据状态码进行统一操作 const token = localStorage.getItem('token') if(token && (config.headers.Authorization = token)){ return config } },error =>Promise.error(error) ) //响应拦截器 instace.interceptors.response.use( res=>res.status === 200 ? Promise.resolve(res) :Promise.reject(res), error => { const {response} = error if(response){ //请求发出,但是不是2x errorHandle(response.status,response.data.message) return Promise.reject(response) }else{ // 处理断网的情况 // eg:请求超时或断网时,更新state的network状态 // network状态在app.vue中控制着一个全局的断网提示组件的显示隐藏 // 关于断网组件中的刷新重新获取数据,会在断网组件中说 if(!window.navigator.onLine){ //处理断网的操作 }else{ return Promise.reject(error) } } }) export default instace //新建一个api文件夹统一管理api 里面放index.js出口文件,和其他模块接口文件例如order.js import order from './api/order' export default { order } //order.js文件 import domain from './domain' import axios from '.././request' import qs from 'qs' //用来序列化 const order = { //订单列表 orderList(){ return axios.get(`${domain.offine}/getOrderList`) }, //订单详情 orderDetail(id,params){ return axios.get(`${domain.offine}/orderDetail/${id}`) }, //post提交 updateDetai(params){ return axios.post(`${domain.offine}/updateDetail`,qs.stringify(params)) } } export default order; //在main.js中把api挂在到vue原型上方便全局调用 import api from '/api' Vue.prototype.$api = api //页面上具体使用 methods:{ getOrderDetail(id) { this.$api.order.orderDetail(id,{123}).then(res=>{ }) } }