vue怎么封装ajax,Ajax在vue中的封装及运用

本日给人人写一篇关于ajax在vue中的运用及封装，有些同砚可能会有疑问，由于熟习vue的都晓得，vue中有vue-resource和axios是特地用于http交互的，那末ajax岂不是节外生枝吗？其实不然，ajax有ajax的上风，而且小编自身对ajax有着特别的情绪，本日就给人人细致详解ajax在vue中的运用。

起首我们有必要设置一下jQuery，详细设置要领很简朴，教程以下：1.装置jquery

npm install jquery --save-dev

2.build/webpack.base.conf.js中，

导入：var webpack = require('webpack');

最下面增加：

plugins: [

new webpack.ProvidePlugin({

$:"jquery",

jQuery:"jquery",

"window.jQuery":"jquery"

})

]

假如你还未能设置好jquery的话，能够百度查找最新的教程解决问题，固然，设置jquery也是由于合营运用ajax，接下来我们须要新建一个js文件，寄存的位置以下，固然也能够跟我的位置差别，随便

我们新建一个要求http的要领，叫postvoidvar common = {

postvoid(url, data, cellback) {

var token = xxxxxx;

var username = xxxxxxx;

$.ajax({

type: "POST",

url: this.res_url + url,

data: data,

async: true,

headers: {

"token": token,

"username": username

},

success: function (res) {

cellback(res)

},

error: function () {

alert("收集毛病")

}

})

}

}

module.exports = common

入参的url是要求地点，data是要求入参，callback是回调函数，用于返回挪用方效果用 ，ajax的headers是要求头信息，module.exports = common 是把要领暴露给出去，轻易挪用。

下面我们看一下怎样挪用这个文件这个要领

起首我们在test.vue文件中导入http.js文件，并把效果赋给变量g，轻易挪用g.post_func("/api/v1/xxx", req_data, function(data) {

console.log(data);

});

挪用起来就很简朴了，把参数传进去，打印data就能够了