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