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就能够了

 

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