Vue 工具类整理 完整案例（可直接使用）

上一篇博客介绍了,全局使用request工具类！

本次完全独立出来，完整的工具类

import Vue from 'vue'
import router from '../router/index'
let Export = {}
let vue = new Vue({router})

Export.post = function (options) {
options.method = 'POST'
options.url = vue.SERVER_NAME + vue.API_PREFIX + options.url
return Request(options)
};
Export.get = function (options) {
options.method = 'GET'
options.url = vue.SERVER_NAME + vue.API_PREFIX + options.url
return Request(options)
};
Export.put = function (options) {
options.method = 'PUT'
options.url = vue.SERVER_NAME + vue.API_PREFIX + options.url
return Request(options)
};
Export.del = function (options) {
options.method = 'DELETE'
options.url = vue.SERVER_NAME + vue.API_PREFIX + options.url
return Request(options)
};

const Request = function (options) {

let newDef = $.Deferred()
/**
* @url：请求的接口地址
* @method: 请求方式（GET/POST/PUT/DELETE）
* @param: 请求参数{key:val} (id:'11',name:'name')
* @headers: 请求的headers{key:val} (token:aabbccdd)
* @useCache: 缓存（针对GET方式）
* @skipValidation：跳过验证
*/
let url = options.url
let method = options.method
let param = options.data || true
    let headers = options.headers || true
    let useCache = options.cache || true
    let skipValidation = options.skipValidation || true
    if (method !== "GET") {
param = (typeof param === "string") ? param : JSON.stringify(param)
}

$.ajax({
url: url,
type: method.toUpperCase(),
dataType: "json",
contentType: "application/json; charset=utf-8",
headers: headers,
data: param,
cache: !!useCache,
success: function (data) {
if (skipValidation) {
newDef.resolve(data)
} else if (handleApiResponseStatus(url, data)) {
newDef.resolve(data)
}
},
error: function (request, textStatus) {
handleHttpResponseStatus(url, request.status)
}
});
/**
* 处理接口响应状态
*/
function handleApiResponseStatus(url, data){
console.info('handle Api Response Status Error')
if (!data || (!data.codeText)) {
console.error(url, data)
return false
}

if (data.codeText == "RESULT_LOGIN_EXPIRED") {
console.info('哎呦喂！登陆超时')
return false
} else if (data.codeText == "RESULT_NEED_ADVANCE_AUTH") {
console.info('哎呦喂！登陆超时,重新登陆')
} else if (data.codeText == "RESULT_NEED_BINDPHONE") {

return true
} else if (data.codeText == "FORBIDDEN") {
console.info('哎呦喂！权限验证失败')
return false
}

return true
}

/**
* 处理HTTP相应状态
*/
function handleHttpResponseStatus(url, status) {
console.info('handle Http Response Status Error：' + status)
let statu = Number(status)
if (statu == 404) {
console.info('哎呦喂！我找不到页面')
} else if (statu >= 500) {
console.info('哎呦喂！服务器异常')
} else {
console.info('哎呦喂！网络出现异常')
}
}

return newDef.promise()

}
export default Export

工具内部可直接跳转页面 vue.$router.push()

调用的时候，import Request form 'kit'

Request.get({ ··参数同上一章节·· }).then(function (resp) {
console.log(resp)
})

有那些不明白的地方可以直接加我QQ：836059265询问（记得加备注vue···）

我会不定时更新内容，毕竟我也在慢慢深入研究咩···