第 9 题：Async/Await 如何通过同步的方式实现异步？

Question

JS 在单线程上玩的越来越6，不禁产生这样的思考，如何将同步循环转换成异步循环。在单线程中，异步循环还是很有必要的，如果同步数据量过大，会造成浏览器卡死。

递归

JS 的异步无非那几个 api，我以 settimeout 为例，套一个函数使用递归即可：

const arr = [1,2,3,4,5,6,7]
let count =0 
const go= ()=>{
  if(count < arr.length){
    setTimeout(() => {
      console.log(arr[count])      
      count = count+1
      go()
    }, 1000);
  }
}
go()

利用死循环 api

死循环 api 比如 idleCallback 之类：

const arr = [1,2,3,4,5,6,7]
let count =0 

const go = (deadline)=>{
  while ((deadline.timeRemaining() > 0 || deadline.timeout) && count < arr.length) {
    console.log(arr[count])
     count = count + 1
  }
}
window.requestIdleCallback(go, { timeout: 1000 })

Answer 1

可以参考你不知道的js一书的中册里面的生成器与迭代器章节看看

Answer 2

题目是不是应该改成“如何通过异步的方式实现同步”？

Answer 3

我猜这道题的意思是，async，await 如何通过 同步方式的写法，达到的异步的效果，如

async function a() {
  const b = 1;
  fooFn();
  const res = await barFn(b); // 和同步的 fn 调用没有区别，却可以完成异步的效果
  bazFn(res);
  ...
}

如果是这样的话，那其实就是问 async, await 的实现机制，换句话说就是问 generator 的实现机制，提示一个词 协程

以上一点小见解，可能是错的~

Answer 4

是想考查async/await的实现原理吧？我只知道async/await是使用generator+run函数（自动执行generator），但是详细实现原理目前我还未理解，暂时也还没有看到有人对async/await 的实现原理有通俗易懂的讲解，还有很多细节没搞懂，不知道有没有正确理解题意？

Answer 5

这个题的意思是不是 async/await 如何通过es5 进行实现? 表述的时候可能有问题吧.
通过es5实现的机制主要是通过 while无线循环 + 状态机 进行实现.

Answer 6

Async/Await 如何通过同步的方式实现异步

首先想要更好的理解 Async/Await，需要了解这两个知识点：

• 同步
• 异步

背景

首先，js 是单线程的（重复三遍），所谓单线程，
通俗的讲就是，一根筋（比喻有点过分，哈哈）执行代码是一行一行的往下走（即所谓的同步），
如果上面的没执行完，就痴痴的等着（是不是很像恋爱中在路边等她/他的你，假装 new 了个对象，啊哈哈哈，调皮一下很开心），
还是举个

Answer 7

应该是下面这张写法吧(链式)：

Promise.resolve().then(() => {
    console.log(1111)
}).then(() => {
    console.log(2222)
}).then(() => {
    console.log(3333)
})
 //  111, 222,333

Answer 8

where is dalao？

U waiyu good

Answer 9

@shizhihua666 厉害啊 兄弟

Answer 10

async await 用于把异步请求变为同步请求的方式,第一个请求的返回值作为后面一个请求的参数,其中每一个参数都是一个promise对象
例如：这种情况工作中会经常遇到

(async () => {
    var a = await A();
    var b = await B(a);
    var c = await C(b);
    var d = await D(c);
})();

setTimeout 主要用户异步队列的形式，当然其中又分为宏观队列以及微观队列（Promise.then,process.nextTick等），比如隔1000ms执行一段逻辑代码（实际中不一定是1000ms后执行，需要考虑主任务的执行时间）

console.log(1);
setTimeout(() => {
    console.log(2)
}, 0)
setTimeout(() => {
    console.log(3)
}, 1000)
new Promise(resolve => {
    console.log(4)
    resolve()
}).then(() => {
    console.log(5)
})

Answer 11

Async/Await就是一个自执行的generate函数。利用generate函数的特性把异步的代码写成“同步”的形式。

var fetch = require('node-fetch');

function* gen(){  // 这里的*可以看成 async
  var url = 'https://api.github.com/users/github';
  var result = yield fetch(url);  // 这里的yield可以看成 await
  console.log(result.bio);
}

var g = gen();
var result = g.next();

result.value.then(function(data){
  return data.json();
}).then(function(data){
  g.next(data);
});

具体见这里

Answer 12

这个应该是考察基本使用

function getFoo(){
  return new Promise(resolve => setTimeOut( () => resolve('foo') , 1000))
}
async function asyncFn(){
  let foo = await getFoo()
  let logic = '同步是加引号的'
}

Answer 13

@shizhihua666 以同步的方式实现异步，不是说他是同步

Answer 14

Async/Await本来就是异步，那有同步可言

Answer 15

Async/Await 其实是generate函数的语法糖，想搞清楚用同步的方式实现异步只要搞清generate函数内部的机制就好了，不知道对不对- -

Answer 16

where is dalao？

Answer 17

no body?