vue中axios封装

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=>{

    })
  }
}