Vue axios處理http請求

2021-08-03 20:54:55 字數 1983 閱讀 7015

//

make a request for a user with a given id

axios.get('

/user?id=12345')

.then(function (response) )

.catch

(function (error) );

//optionally the request above could also be done as

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) ));

這個的使用方法其實和原生的ajax是一樣的,一看就懂。

var qs = require('qs'

); axios.post(

'/bbg/goods/get_goods_list_wechat

', qs.stringify()}),

}).then(function (response)

}).catch

(function (error) );

注意: 對於post請求,一般情況下,第乙個引數是url,第二個引數是要傳送的請求體的資料,第三個引數是對請求的配置。

對於post請求,我們也可以使用下面的jquery的ajax來實現:

$.ajax()        

},

beforesend: function(request) ,

type:

'post

',

datatype:

'json

',

success:function(data),

error: function (error) ,

complete: function ()

});

另外,對於兩個同樣的請求,即使都請求成功了,但是兩者請求得到的結果也是不一樣的,如下:

不難看到: 使用axios返回的結果會比jquery的ajax返回的結構(實際的結果)多包裝了一層,包括相關的config、 headers、request等。

對於get請求, 我個人還是推薦使用axios.get()的形式,如下所示:

axios.get('

/bbg/shop/get_classify

', ,

headers:

}).then(function (response)

console.log(response.data.code);

}).catch

(function (error) );

即第乙個引數是:url, 第二個引數就是乙個配置物件,我們可以在配置物件中設定 params 來傳遞引數。 

個人理解為什麼get沒有第二個引數作為傳遞的查詢字串,而post有第二個引數作為post的資料。

因為get可以沒有查詢字串,也可以get請求,但是post必須要有post的資料,要不然就沒有使用post的必要了。

Vue axios 實現http攔截及路由攔截例項

現如今,每個前端對於vue都不會陌生,vue框架是如今最流行的前端框架之一,其勢頭直追react.最近我用vue做了乙個專案,下面便是我從中取得的一點收穫.基於現在用vue webpack搭建專案的文件已經有很多了,我就不再累述了.技術棧vue2.0 vue router axios 首先我們要明白...

Vue axios 實現http攔截及路由攔截

在整1個小東東,改下試試,原來的乙個東東改動。中間需要用到 使用者許可權和攔截,看了vue2的方式。看到這文章,不錯,收藏了 用到了 http攔截 和 路由攔截 就不扒了,可過去看文章 建議方式 http攔截建1個獨立的檔案,在 main 中引入 路由正常應該都是給 弄成1個獨立檔案,在main 中...

Vue axios 實現http攔截及路由攔截

在整1個小東東,改下試試,原來的乙個東東改動。中間需要用到 使用者許可權和攔截,看了vue2的方式。看到這文章,不錯,收藏了 用到了 http攔截 和 路由攔截 就不扒了,可過去看文章 建議方式 http攔截建1個獨立的檔案,在 main 中引入 路由正常應該都是給 弄成1個獨立檔案,在main 中...