Vue 向服務端請求的幾種方式

前言: vue的使用使前端程式設計師主要精力放在業務上，省去了大量dom的操作。身邊的很多同事仍然使用jquery的ajax傳送請求，使用jquery 也就僅僅使用了封裝好的ajax，這樣給頁面的載入增加負擔，jquery的引入使頁面的載入顯的很笨重。前端傳送請求的方式很多種，不一定要再頁面上大量使用jquery封裝的ajax，有幾種請求方式可以省去jquery的引入進行ajax請求。下面我將進行一一介紹：

首先需要知道：axios不是一種新的技術。

axios 是乙個基於promise 用於瀏覽器和 nodejs 的 http 客戶端，本質上也是對原生xhr的封裝，只不過它是promise的實現版本，符合最新的es規範，有以下特點：

使用 npm:

$ npm install axios

使用 bower:

$ bower install axios

使用 cdn:

// 為給定 id 的 user 建立請求
axios.get('/user?id=12345')
.then(function (response) )
.catch(function (error) );
// 上面的請求也可以這樣做
axios.get('/user', 
}).then(function (response) )
.catch(function (error) );

axios.post('/user', )
.then(function (response) )
.catch(function (error) );

function getuseraccount() 
function getuserpermissions() 
axios.all([getuseraccount(), getuserpermissions()])
.then(axios.spread(function (acct, perms) ));

fetch是前端發展的一種新技術產物。

不需要引入js，只要引入vue.js就可以，很方便

fetch('')
.then(function(response) )
.then(function(myjson) );

fetch("",
, body:"id=39"
}) .then(function(resp) )
.then(data=>)
.catch(error=>)

用的比較廣泛的一種非同步請求方式

如果沒有 jquery，ajax 程式設計還是有些難度的。

編寫常規的 ajax **並不容易，因為不同的瀏覽器對 ajax 的實現並不相同。這意味著您必須編寫額外的**對瀏覽器進行測試。

$.ajax(,
//請求成功
success : function(result) ,
//請求失敗，包含具體的錯誤資訊
error : function(e)
});

jquery load() 方法是簡單但強大的 ajax 方法。

load() 方法從伺服器載入資料，並把返回的資料放入被選元素中。

語法：

$(selector).load(url,data,callback);

$("button").click(function());
});

語法:

$.get(url,callback);

$("button").click(function());
});

語法：

$.post(url,data,callback);

$("button").click(function(),
function(data,status));
});

vue-resource是乙個通過xmlhttprequrest或jsonp技術實現非同步載入服務端資料的vue外掛程式

提供了一般的 http請求介面和restful架構請求介面，並且提供了全域性方法和vue元件例項方法。

this.$http.get('/try/ajax/ajax_info.txt').then(function(res),function());

如果需要傳遞資料，可以使用 this.$http.get('get.php',) 格式，第二個引數jsondata就是傳到後端的資料。

this.$http.get('get.php',}).then(function(res),function(res));

post 傳送資料到後端，需要第三個引數。

Vue 向服務端請求的幾種方式

幾種常見的服務端認證客戶端的方式

SSRF（服務端請求偽造）

SSRF 服務端請求偽造

Vue 向服務端請求的幾種方式

幾種常見的服務端認證客戶端的方式

SSRF（服務端請求偽造）

SSRF 服務端請求偽造

相關推薦