vue fetch中的.then()的正确使用方法

时间:2021-05-26

先看一段代码:

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(data=>{ console.log(data);})// 接口app.get('/books', (req, res) => { res.send('传统的URL传递参数!' + req.query.id)})


在这段代码中我们发现,最初传入的是一个对象,紧接着后一个.then()的传入参数使用了前一个.then()的返回值,换句话说,就是后一个then使用前一个then的封装结果

那么现在去掉注释:

.then(function(value2){ console.log(value2); return 'HelloWorld';}).then(function(data){ console.log(data); return data.text(); })text()方法属于fetchAPI的一部分,返回一个Promise实例对象,用于获取后台返回的数据

这段代码中,传入的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));})


输出了接口询问的内容,为String类型

到此这篇关于vue fetch中的.then()的正确使用方法的文章就介绍到这了,更多相关vue fetch .then()内容请搜索以前的文章或继续浏览下面的相关文章希望大家以后多多支持!

声明:本页内容来源网络,仅供用户参考;我单位不保证亦不表示资料全面及准确无误,也不保证亦不表示这些资料为最新信息,如因任何原因,本网内容或者用户因倚赖本网内容造成任何损失或损害,我单位将不会负任何法律责任。如涉及版权问题,请提交至online#300.cn邮箱联系删除。

相关文章