Chrome操作指南——入门篇(七)console中的await和log

1,200 阅读1分钟

携手创作,共同成长!这是我参与「掘金日新计划 · 8 月更文挑战」的第八天,点击查看活动详情

前言

前端与后端的交互,往往充斥着大量的api接口调用,而这些接口调用往往都是异步的,而解决异步问题,无非不是通过promise,就是通过asyncawait

用过promise的应该都知道,往往要进行链式调用。而用asyncawait的,确总要用async给代码进行包裹一层。当然这也无可厚非,但是如果你只想看看这个接口的返回结果或者说是否能够调通的话,这样是稍显繁琐一点的。

如果你试过在浏览器中调用接口的话,你会发现,一切是这么的简洁。

await

我在必应首页随便找了个接口为例:

使用promise: image.png

使用async: image.png

看起来不是很简洁,其实在console中是可以直接使用await的,你不需要嵌套async 他会直接帮你处理好。你甚至可以不使用console.log()。

image.png

点击右侧的链接,跳转的源码。

async.gif

(async () => {
        res = await fetch('https://cn.bing.com/hp/api/model?FORM=Z9FD1')
        return (await res.json())
    }
)()

你会发现,他已经自动的给你包裹好了,甚至你都不用通过log打印,因为他已经给你自动返回了。

console.log()

当你声明一个Object的时候,打印它,并修改,打印,你会发现一个有意思的现象。

const stu = {
    name: 'mike',
    age: 20
}
console.log(stu)
stu.name = 'tom'
stu.age = 22
console.log(stu)

log.gif

你会发现,他打印的是正常的值,而你点击打印的对象展开的时候,确实引用的值。并且他还会提示Value below was evaluated now.

这一点不得不说,google做的还真是挺贴心的。