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)文章
Element plus實(shí)現(xiàn)圖片手動(dòng)上傳與回顯的過程
近期,發(fā)現(xiàn)點(diǎn)擊修改,element ui 的圖片沒有回顯到框中,所以本文給大家介紹了Element plus實(shí)現(xiàn)圖片手動(dòng)上傳與回顯的過程,文中通過代碼示例給大家介紹的非常詳細(xì),具有一定的參考價(jià)值,需要的朋友可以參考下2024-09-09
這篇文章主要介紹了vue 如何處理防止按鈕重復(fù)點(diǎn)擊問題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-10-10
這篇文章主要介紹了vue接入騰訊防水墻代碼，代碼超級(jí)簡單，非常不錯(cuò)，具有一定的參考借鑒價(jià)值 ,需要的朋友可以參考下2019-05-05
如果在面試中，面試官問你Vue組件之間有哪些數(shù)據(jù)通信方式，你會(huì)怎么回復(fù)，不要擔(dān)心，本文為大家整理了超全的Vue3中組件數(shù)據(jù)通信方式，需要的小伙伴快收藏起來吧2023-06-06
今天小編就為大家分享一篇淺談在vue中使用mint-ui swipe遇到的問題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2018-09-09
vue學(xué)習(xí)筆記之slot插槽用法實(shí)例分析
這篇文章主要介紹了vue學(xué)習(xí)筆記之slot插槽用法,結(jié)合實(shí)例形式對(duì)比分析了vue使用slot插槽的相關(guān)操作技巧與注意事項(xiàng),需要的朋友可以參考下2020-02-02
vue3組合式api實(shí)現(xiàn)v-lazy圖片懶加載的方法實(shí)例
vue作為前端主流的3大框架之一,目前在國內(nèi)有著非常廣泛的應(yīng)用,下面這篇文章主要給大家介紹了關(guān)于vue3組合式api實(shí)現(xiàn)v-lazy圖片懶加載的相關(guān)資料,需要的朋友可以參考下2022-09-09
這篇文章主要介紹了vue中使用axios固定url請(qǐng)求前綴的實(shí)現(xiàn)方式，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-12-12
這篇文章主要介紹了vue如何將v-for中的表格導(dǎo)出來,需要的朋友可以參考下2018-05-05
VUE3使用Element-Plus時(shí)如何修改ElMessage中的文字大小
在使用Element-plus的Elmessage時(shí)使用默認(rèn)的size無法滿足我們的需求時(shí),我們可以自定義字體的大小,但是直接重寫樣式后,并沒有起作用,甚至使用::v-deep深度選擇器也沒有效果,本文介紹VUE3使用Element-Plus時(shí)如何修改ElMessage中的文字大小,感興趣的朋友一起看看吧2023-09-09