Ajax在vue中的封装及运用

2019年8月31日 262次阅读 来源: 马明瑞

本日给人人写一篇关于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就能够了

 

    原文作者：马明瑞
    原文地址: https://segmentfault.com/a/1190000018341793
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞