Chrome操作指南——入门篇（七）console中的await和log前端与后端的交互，往往充斥着大量的api接口调用

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

前言

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

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

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

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

使用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打印，因为他已经给你自动返回了。

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

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

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

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