Vue请求封装

现在大部分的Vue开发者都使用了axios请求方式

1. 新建一个Http.js文件
2. 引入axios(需要npm安装到项目中)
3. 引入Vue（存储登录信息）

import axios from 'axios'
import Vue from 'vue'
import util from '@/util.js'// 自己定义的工具类
axios.defaults.timeout = 5000;  //响应时间
axios.defaults.headers.post['Content-Type'] 
= 'application/x-www-form-urlencoded;charset=UTF-8';  //配置请求头

4.封装Post请求
在请求时要首先验证请求的Url是否存在，这时候调用工具类中的方法。
在util.js中

function isBlank(str) {
     
    if (Object.prototype.toString.call(str) === '[object Undefined]') {
      //空
        return true;
    } else if (Object.prototype.toString.call(str) === '[object Null]') {
      //空
        return true;
    } else if (Object.prototype.toString.call(str) === '[object String]') {
      //字条串
        return str.length == 0 ? true : false;
    } else if (Object.prototype.toString.call(str) === '[object Array]') {
      //数组
        return str.length == 0 ? true : false;
    } else if (Object.prototype.toString.call(str) === '[object Object]') {
      //对象
        return JSON.stringify(str) == '{}' ? true : false;
    } else {
     
        return false;
    }
}
//暴露给外部调用
export default {
     
isBlank
}

在请求中调用

async function Post(option) {
     
    if (util.isBlank(option.url))
        //在此处返回错误消息提示
    var op = {
     
        method: 'post',
        url: option.url,
        data: option.data
    };
    var Success = function (response) {
     
        typeof option.OnSuccess == "function" ? option.OnSuccess(response) : function () {
      }
    }
    var Error = function (error) {
     
        var response = error.response;
        var status = response.status; 
        if (status == 401) {
     //未登陆 
             //跳转到登录页面
        }
        else if (status == 500) {
     //系统错误 
           //在此处返回错误消息提示
        }
        else if (status == 501) {
     //自定义错误
        //在此处返回错误消息提示
        }
        else {
     //其他错误
           //在此处返回错误消息提示
        }
        return false;
    }
    await axios(op).then(Success, Error)
        .catch(function (error) {
     
            console.log("axios Catch");
            console.log(error);
        });
}

需要暴露给外部使用

export default {
     
    Post
}

在vue文件中使用

1. 在中引用

import http from "@/Http.js";

2. 使用

  //加载表格数据
            GetOrderData() {
     
                var self = this;
                var op = {
     
                    url: "接口",
                    data: {
     
                        CustomID: self.CustomID  
                    },
                    OnSuccess: function (res) {
     
                    console.log(res)
                    }
                };
                http.Post(op);
            },

完成。。。