Ajax在vue中的封裝及使用

pingink 發布于2019-08-02 14:22 / 1991人閱讀

摘要：今天給大家寫一篇關于在中的應用及封裝，有些同學可能會有疑問，因為熟悉的都知道，中有和是專門用于交互的，那么豈不是多此一舉嗎其實不然，有的優勢，并且小編本身對有著特殊的感情，今天就給大家詳細詳解在中的應用。

今天給大家寫一篇關于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就可以了

云服務器 GPU云服務器一個封裝的Ajax類原生js封裝ajax js ajax 請求數據封裝 webrtc中的網絡封裝

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/53766.html

Ajax在vue中的封裝及使用

摘要：今天給大家寫一篇關于在中的應用及封裝，有些同學可能會有疑問，因為熟悉的都知道，中有和是專門用于交互的，那么豈不是多此一舉嗎其實不然，有的優勢，并且小編本身對有著特殊的感情，今天就給大家詳細詳解在中的應用。今天給大家寫一篇關于ajax在vue中的應用及封裝，有些同學可能會有疑問，因為熟悉vue的都知道，vue中有vue-resource和axios是專門用于http交互的，那么ajax...

godruoyi 2019-08-23 15:33 評論0 收藏0
前端相關大雜燴

摘要：希望幫助更多的前端愛好者學習。前端開發者指南作者科迪林黎，由前端大師傾情贊助。翻譯最佳實踐譯者張捷滬江前端開發工程師當你問起有關與時，老司機們首先就會告訴你其實是個沒有網絡請求功能的庫。前端基礎面試題(JS部分) 前端基礎面試題(JS部分) 學習 React.js 比你想象的要簡單原文地址：Learning React.js is easier than you think 原文作...

fuyi501 2019-08-22 13:46 評論0 收藏0
邁出全棧第一步，vue+node+mysql獨立完成前后端分離的增刪改查流程

摘要：本使用創建本地服務器，在就能完成全部流程，并不需要線上服務器。路徑要與后端接口一致。后端返回成功后，前端數據中對應的元素也要刪掉，更新視圖。控制器里拿一個方法出來說一下吧，完整的代碼都在。讀取操作完成后調用釋放連接。寫在前面本文只是本人學習過程的一個記錄，并不是什么非常嚴謹的教程，希望和大家一起共同進步。也希望大家能指出我的問題。適合有一定基礎，志在全棧的前端初學者學習，從點擊按鈕...

fsmStudy 2019-08-20 16:10 評論0 收藏0