vue实现axios各种请求方法,并处理正常异常情况


在elementUI的admin项目中,如果与服务端交互是{"code":0,"msg":"提示信息","data":{}}结构,可以使用下述请求封装方法

请求方法封装

定义一个网络类network.js,内容为:

import axios from 'axios'
import Vue from 'vue'
import Qs from 'qs'
import {Loading} from 'element-ui'

var host = 'api前缀'
//axios.defaults.withCredentials = true // 跨域请求时发送cookie(本项目无意义)
export default {
  //发起一个http request请求(请求地址,参数对象,成功的回调函数,失败的回调函数,请求方法)
  request: function (url, params, success, failure = null, method = 'post') {
    if (typeof success !== 'function') {
      throw Error("success 必须是个函数");//开发阶段的错误
    }

    const loading = Loading.service({
      lock: true,
      text: '努力加载中...',//可以自定义文字
      spinner: 'el-icon-loading',//自定义加载图标类名
      background: 'rgba(0, 0, 0, 0.7)'//遮罩层背景色
    });

    //配置axios请求头,axios每次发起请求携带token,在Network中的headers看的到
    axios.interceptors.request.use(config => {
      config.timeout = 20000  //设置请求超时时间
      config.headers['CLIENT-P'] = 'WEB'//设置请求头中的平台
      config.headers['CLIENT-I'] = localStorage.getItem('uid') ? localStorage.getItem('uid') : 0 //设置请求头中的uid
      config.headers['CLIENT-T'] = localStorage.getItem('token') ? localStorage.getItem('token') : ''//设置请求头中的token
      return config
    });

    //请求方法:get/delete/head/post/put/patch
    axios.post(host + url, Qs.stringify(params))
      .then(function (res) {
        let json = res.data;//服务器JSON对象
        //正常返回,http状态码是200
        if (!(json instanceof Object) || !json.hasOwnProperty('code') || json.code !== 0) {
          let msg = json instanceof Object && json.hasOwnProperty('msg') ? json.msg : '数据结构出错,请联系管理员';
          if (json.code % 1 !== 0) {
            Vue.prototype.$message.error(msg);//code不是整数是异常
            loading.close();
            return false;
          }
          //状态大于0小于1000都表示业务逻辑无法继续
          if (json.code < 1000) {
            if (json.code === 110) {//为110踢出去,跳转到登录页
              removeToken()//这个函数好像没有意义?
              localStorage.removeItem('uid')
              localStorage.removeItem('token')
              window.location.href = '#/login'
            }
            if (typeof failure === 'function') {
              failure({code: json.code, msg: msg, data: {}});//回调实现具体逻辑
            } else {
              Vue.prototype.$message.error(msg);//你不处理错误我来处理错误
            }
            loading.close();
            return false;
          }
          Vue.prototype.$message.warning(msg);//警告1000~2000
          //Vue.prototype.$message.error(Vue.prototype.$md5('123456'));
        }
        success(json);//回调实现具体逻辑
        loading.close();
      })
      .catch(function (err) {
        //异常返回,http状态码非200,errMsg
        if (typeof failure === 'function') {
          failure({code:2,msg: 'error:'+err.response,data:{}});//回调实现具体逻辑
        } else {
          Vue.prototype.$message.error(err.response);//你不处理错误我来处理错误
        }
        loading.close()
      })
  }
}

直接使用

完整用法:

this.network.request('/admin/finance.adjust/select', params, (json) => {
    this.net = json.data; //成功获取数据
},(json)=>{
    //this.$message.error('我其实不用处理了')
},'post')

最简用法(failure和method用缺省的即可):

this.network.request('/admin/finance.adjust/select', params, (json) => {
    this.net = json.data; //成功获取数据
})

原文链接:https://blog.yongit.com/note/862160.html