JavaScript异步实现

目前实现js异步处理，有三种基本方法，分别系
setTimeout/setInterval ，
Promise ，
Async + await

接下来分别说说各个的用法与区别：

1.setTimeout/setInterval

这两作用相仿，都有两个参数，第一个是回调函数（用于延时/隔段时间 执行）的函数名，第二个是时间（毫秒为单位）.

setTimeout的作用是：根据第二个参数所写的时间，延时执行回调函数。
setInterval的作用是： 根据第二个参数所写的时间，每隔一段时间，执行回调函数。

说说他们是怎么个异步法：
两个函数中都有个时间参数，当js引擎主线程运行到该行代码时，会把函数交给另外一个负责计时的线程，然后继续实行后面的同步任务。
当到了所设定的时间，就会把callback回调函数放到消息队列。
Js引擎主线程执行完栈里的同步任务时，就会借助even loop 事件循环机制，到消息队列里找到需要执行的任务，压到栈里执行。

// With a named function
let myGreeting = setTimeout(function sayHi() {
  alert('Hello, Mr. Universe!');
}, 2000)

// With a function defined separately
function sayHi() {
  alert('Hello Mr. Universe!');
}

let myGreeting = setTimeout(sayHi, 2000);

2.Promise

因为采用回调函数的方式很麻烦且难以阅读（通常称为“回调地狱”），
而借助Promise的方式，编写方便并且易于阅读。

Promise有几种状态：pending，fulfilled, rejected
pending为正在执行中。
Fulfilled为实现，执行完成，接下来继续执行.then()块中的内容。
Rejected是拒绝，执行失败，会跳到catch块里，如果没有作catch块处理，就会报错。

Pending可以转换为fulfilled或rejected，而fulfilled以及rejected是无法改变的，一旦转换了，就无法再转回来。

使用Promise可以把代码块链再一起：
.then():如果前面的promise为fulfilled，则继续执行.then()中的内容，返回一个Promise。
.catch():前面的任何一个Promise如果为rejected，就会跳到catch块里，执行catch块里的内容。

Promise的步骤：
（1）当js主线程执行到该行代码时，会马上执行Promise里面的内容。
（2）执行完该行代码，就把Promise挂起，直到状态变为fulfilled或rejected，就把后边的.then()/.catch()代码块，push到消息队列
（3）等待同步任务完成，借助even loop ，再执行

fetch('coffee.jpg')
.then(response => {
  if (!response.ok) {
    throw new Error(`HTTP error! status: ${response.status}`);
  } else {
    return response.blob();
  }
})
.then(myBlob => {
  let objectURL = URL.createObjectURL(myBlob);
  let image = document.createElement('img');
  image.src = objectURL;
  document.body.appendChild(image);
})
.catch(e => {
  console.log('There has been a problem with your fetch operation: ' + e.message);
});

3.Async + await

Async + await 其实就是一个简化版的Promise，将Promise的链式代码块简化，如同写同步代码一样。

当函数开头标识上async时，函数返回值就会是一个Promise。

Await其实就是用于标识then的位置，await的后一行代码其实就系Promise的then。当js执行到await的时候，会把后面的代码挂起，直到promise的状态为fulfilled/rejected，就会把callback回调函数（其实就是后面的代码）,push到消息队列，等待js线程来执行。

Promise里使用的是链式结构（.then()/.catch()），当然async也可以使用。或者直接在代码块里使用try{}catch(){},也是无伤大雅的.

async function myFetch() {
  let response = await fetch('coffee.jpg');
  return await response.blob();
}

myFetch().then((blob) => {
  let objectURL = URL.createObjectURL(blob);
  let image = document.createElement('img');
  image.src = objectURL;
  document.body.appendChild(image);
})
.catch((e) =>
  console.log(e)
);