vue fetch中的.then()的正確使用方法
更新時(shí)間：2020年04月17日 09:13:29 作者：風(fēng)華正茂百花洲
這篇文章主要介紹了vue fetch中的.then()的正確使用方法，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
先看一段代碼：
fetch('http://localhost:3000/books?id=123456',{
method:'get'
})
.then(function(value1){
console.log(value1);
return 'hello';
})
.then(function(value2){
console.log(value2);
return 'HelloWorld';
})
/*
.then(function(data){
console.log(data);
return data.text();
})
*/
.then(data=>{
console.log(data);
})
// 接口
app.get('/books', (req, res) => {
res.send('傳統(tǒng)的URL傳遞參數(shù)!' + req.query.id)
})
在這段代碼中我們發(fā)現(xiàn)，最初傳入的是一個(gè)對(duì)象，緊接著后一個(gè).then()的傳入?yún)?shù)使用了前一個(gè).then()的返回值，換句話說，就是后一個(gè)then使用前一個(gè)then的封裝結(jié)果
那么現(xiàn)在去掉注釋：
.then(function(value2){
console.log(value2);
return 'HelloWorld';
})
.then(function(data){
console.log(data);
return data.text();
})
text()方法屬于fetch API的一部分，返回一個(gè)Promise實(shí)例對(duì)象，用于獲取后臺(tái)返回的數(shù)據(jù)
這段代碼中，傳入的data是上一步封裝的字符串，所以此時(shí)用data.text()報(bào)錯(cuò)，除非data為對(duì)象
下面演示正確使用方式：
fetch('http://localhost:3000/books?id=123456',{
method:'get'
})
.then(function(data){
console.log(data);
console.log(typeof(data));
return data.text();
})
.then(data=>{
console.log(data);
console.log(typeof(data));
})
輸出了接口詢問的內(nèi)容，為String類型
到此這篇關(guān)于vue fetch中的.then()的正確使用方法的文章就介紹到這了,更多相關(guān)vue fetch .then()內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
Vue+Websocket簡(jiǎn)單實(shí)現(xiàn)聊天功能
這篇文章主要為大家詳細(xì)介紹了Vue+Websocket簡(jiǎn)單實(shí)現(xiàn)聊天功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-08-08
這篇文章主要介紹了vue?ant?design?封裝彈窗表單的使用，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-06-06
記一次vue-webpack項(xiàng)目?jī)?yōu)化實(shí)踐詳解
這篇文章主要介紹了記一次vue-webpack項(xiàng)目?jī)?yōu)化實(shí)踐，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2019-02-02
el-table-column疊加el-popover使用示例小結(jié)
el-table-column有一列展示多個(gè)tag信息,實(shí)現(xiàn)點(diǎn)擊tag展示tag信息以及tag對(duì)應(yīng)的詳細(xì)信息,本文通過示例代碼介紹el-table-column疊加el-popover使用示例小結(jié),感興趣的朋友跟隨小編一起看看吧2024-04-04
淺談在Vue-cli里基于axios封裝復(fù)用請(qǐng)求
這篇文章主要介紹了淺談在Vue-cli里基于axios封裝復(fù)用請(qǐng)求，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2017-11-11
這篇文章主要介紹了vue中的搜索關(guān)鍵字實(shí)例講解，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-04-04
本篇文章主要介紹了vue之頁(yè)面緩存問題(基于2.0)，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2017-01-01
這篇文章介紹了VUE中template的三種寫法，文中通過示例代碼介紹的非常詳細(xì)。對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2022-04-04
使用typescript構(gòu)建Vue應(yīng)用的實(shí)現(xiàn)
這篇文章主要介紹了使用typescript構(gòu)建Vue應(yīng)用的實(shí)現(xiàn),文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-08-08
這篇文章主要介紹了探秘vue-rx 2.0(推薦)，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2018-09-09