axios.js

使用promise封装axios

// utils文件下的request.js文件
import axios from 'axios'
import { MessageBox, Message } from 'element-ui'
import store from '@/store'
import { getToken } from '@/utils/auth'
 import Vue from 'vue'
// 创建axios实例
const service = axios.create({
  baseURL: process.env.VUE_APP_BASE_API, // url = base url + request url
  withCredentials: false, // 表示跨域请求时是否需要使用凭证,默认是false
  timeout: 60000 // 请求时长
})
// 请求拦截器
service.interceptors.request.use(
  config => {
    // 在发送请求之前做的一些事
    if (store.getters.token){
      config.headers['token'] = getToken()
    }
    return config
  },
  error => {
    // 处理请求错误
    console.log(error) // for debug
    Message({
      message: '网络异常，请稍后再试！',
      type: 'error',
      duration: 1000
    }) 
    return Promise.reject('网络异常，请稍后再试！')
  }
)
let controllJurisdiction='ZHI';
let controllError='error';//当不是权限异常提示，其他的后端返回error提示的时候控制，在1500ms内显示一次错误信息
let failIs='z';//控制接口请求失效，在没有网络的时候请求多个接口，只允许弹出一次网络异常提示
// 响应拦截器
service.interceptors.response.use(
  /**
   * 如果您想获取http信息，如状态请在response中获取
   *  
  */
  /**
   * 通过自定义代码定义请求状态 
   * 您也可以通过HTTP状态码来判断状态
   */

  response => {
    const res = response.data  
    if (!res.success) {
      if(res.msg.includes('权限')){
        //这里是我对于请求提示的权限控制，通过controllJurisdiction这个状态是否有值，适应在同时请求多个接口的时候，保证弹窗提示弹出一次
        if(controllJurisdiction!==''){
          controllJurisdiction='';
          MessageBox.confirm(res.msg, '提示', {
            confirmButtonText: '确定',
            type: 'warning',
            center: true
          }).then(() => {
            controllJurisdiction='zhi';
          })
        }
        var timer=setTimeout(()=>{
          controllJurisdiction='zhi';
          clearTimeout(timer);
        },1000)
      }
      if(!res.msg.includes('权限')){
        if(controllError){
          controllError='';
          Message({
            message: res.msg || 'Error',
            type: 'error',
            duration:  1500
          })
        }
        var timerc=setTimeout(()=>{
          controllError='zhi';
          clearTimeout(timerc);
        },1500)
      } 
      // 50008: Illegal token; 50012: Other clients logged in; 50014: Token expired;
      if(res.msg.includes('获取用户身份信息为空')){
         store.dispatch('user/logout')
        Vue.$router.push(`/login?redirect=${this.$route.fullPath}`)
        return;
      }
       
      if (res.code === 5104) {
        MessageBox.confirm('您已注销，您可以取消停留在此页面，或重新登录  ', '确认注销', {
          confirmButtonText: '重新登录',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
            //用户登录状态失效，退出登录清空token，刷新页面重置路由返回login页
          store.dispatch('user/resetToken').then(() => {
            location.reload()
          })
        })
      }
 
      //请求错误返回结果
      return res
    } else { 
      return res
    }
  },
  error => { 
    if(error.code === 'ECONNABORTED' || error.message ===   "Network Error" ||  error.message.includes("timeout")){
      if(failIs){
        failIs=''
        let zhi=setTimeout(()=>{
          Message({
            message: '网络异常，请稍后再试',
            type: "error",
            duration:  1000,
            onClose: () => {
              failIs='z'
              clearTimeout(zhi);
            }
          })
        
        },1000)
      } 
    } 
    switch (error.response.status) {
      case 400:
        Message({
          message: '网络异常，请稍后再试',
          type: 'error',
          duration: 1500,
          customClass: 'element-error-message-zindex'
        })
        break
      case 401:
        store.dispatch('user/logout')
        Vue.$router.push(`/login?redirect=${this.$route.fullPath}`)
        break
      case 405:
        Message({
          message: 'http请求方式有误',
          type: 'error',
          duration: 1500,
          customClass: 'element-error-message-zindex'
        })
        break
      case 500:
        Message({
          message: '网络异常，请稍后再试',
          type: 'error',
          duration: 1500,
          customClass: 'element-error-message-zindex'
        })
        break
      case 501:
        Message({
          message: '服务器不支持当前请求所需要的某个功能',
          type: 'error',
          duration: 1500,
          customClass: 'element-error-message-zindex'
        })
        break
    } 
     
    return Promise.reject('网络异常，请稍后重试！')
  }
)
export default service

index.js

import request from '@/utils/request' 

export function findStockCategoryList(query) {
  return request({
    url：'url',
    method: 'get',
    params: query
  })
}
export function UpdateStockCategory(data) {
  return request({
    url: url,
    method: 'put',
    data: data
  })
}

export function DeleteStockCategory(data) {
  return request({
    url: 'url',
    method: 'post',
    data: data
  })
}
export function deleteStockMaterial(query) {
  return request({
    url: 'url',
    method: 'delete',
    params: query
  })
}

index.vue

<script>
    export default {
      import { 
        findStockCategoryList
      } from '@/api/index.js'
       methods:{
        //使用同步执行,异步加载的方式调用接口
          async findStockCategoryList(){ 
              let result =await findStockCategoryList(); 
                 if(result){ 
                    console.log(result) 
                }
            }   
         }
      }
    }
</script>