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

前言

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

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

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

await

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

使用 promise：

使用 async:

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

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

(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 = 22console.log(stu)

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

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