vue中使用jquery发送ajax请求封装
首先确保你的vue项目中已经安装了jquery,如果没有请先安装。
src/request/request.js :
import $ from "jquery"
var app_debug = true;
if (app_debug == true) {
var HTTP_HOST = "http://开发环境地址";
} else {
var HTTP_HOST = "http://生产环境地址";
}
// 获取请求完整url
var ajax_url = function(url){
return HTTP_HOST + url;
}
// 获取请求完整参数
var ajax_data = function(data = {}){
data["_client_"] = "web";
data["_version_"] = "1.0.0";
// 更多公共参数~
return JSON.stringify(data);
}
// 公共请求成功(需验证业务逻辑)
var ajax_success = function(result, status, xhr){
// 验证业务逻辑部分(如未登录跳转登录等~)
return true;
}
// 公共请求失败
var ajax_error = function(xhr, status, error){
// 公共请求失败处理逻辑
console.log("请求失败:" + error);
return true;
}
// AJAX请求默认参数
$.ajaxSetup({
type: "POST",
dataType: "json",
timeout: 3000,
beforeSend : function(request) {
request.setRequestHeader("Content-Type", "application/json; charset=utf-8");
}
});
export default {
post (url, data = {}, callback, errCallback) {
$.ajax({
url: ajax_url(url),
data: ajax_data(data),
success (result, status, xhr){
if (ajax_success(result, status, xhr) === true) {
typeof(callback) == "function" && callback(result, status, xhr);
}
},
error (xhr, status, error) {
if (ajax_error(xhr, status, error) === true) {
typeof(errCallback) == "function" && errCallback(xhr, status, error);
}
}
});
}
}
注:我只放了一个post的请求方法,如需更多请自行扩展
main.js 中添加以下内容
import $ from 'jquery'
import request from './request/request.js'
Vue.prototype.request = request;
使用:
this.request.post("test", {}, function(){
console.log('success');
}, function(){
console.log('error');
});