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的方法，叫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就能够了