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