推荐阅读:
当初学者想要通过 fetch 等异步方法获取后台返回值的时候,常常会遇到有关Promise
的取值问题,现有一异步方法:
|
|
运行后控制台返回:
|
|
显然不是我们想要的结果。
针对第一条,我们 console 出了一个处于pending
状态的Promise
对象,这说明在第一个.then
还没结束时,Promise
会一直被标记为pending
,直到.then
方法结束,Promise
才会被标记为fulfilled
或者rejected
。而对于Promise
对象而言,其中的值我们并不能直接调用,正如我们不能从当前
调用未来
的值。
针对第二条,需要明确的是,response
包含的数据是通过 Stream
接口异步读取的, 部分针对response
使用的方法如.json()
、.text()
等都会把response
对象标为已读
。就像在一个单向流通的管道里只运送一个物物品,那么在任何时候任何地点把东西取出,在此之后就无法从管道中取出物品,因为它已经被取出了,因此,在此之后所有对response
对象进行的调用都会出问题,因为你已经读取过response的值
了,所以才会打印出error
。
现在我们可以理解,在调用fetch
方法时首先会返回一个Promise
对象,那么我们应该如何取出其中的值呢?首先需要使用.json()
方法将Promise
解析为JSON
格式,并且再次使用.then
进行链式调用才能取出其中的值。
将代码进行改进
|
|
此时我们就可以在控制台得到正确的数据了,
当然,现在我们通常会使用封装好的 http 请求库进行接口调用和数据交互,如Axios
、Request
、Superagent
等
|
|
使用这些库就可以减少取值的步骤,简化请求的流程和代码,提高我们的开发效率。