共计 1047 个字符，预计需要花费 3 分钟才能阅读完成。
今天给大家写一篇关于 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 的方法，叫 postvoid
var 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 就可以了