前言

这篇文章涵盖了之前几篇博客的核心内容，并且新增一些新的API（例如fetch、async等）和新的代码示例，如果有兴趣，可以先阅读入门的几篇博客

AJAX

Promise

异步

最近在整理以前的博客时，顺便查阅MDN做一些记录，以保证以前的学习知识并没有发生错误认知。

在此背景下，我动笔写下这篇博客。我一直认为，写博客能帮助我不断思考和学习，事实上我也是这么做的。希望我在写博客帮助自己学习的同时，也能帮助到别人。

同步和异步的比较

同步

要深入了解什么是异步，需要先知道同步。同步就是按照顺序执行代码，要马上看到结果。下面我们用一个例子来理解。

    const btn = document.querySelector('button');
    btn.addEventListener('click', () => {
      alert('You clicked me!');

      let pElem = document.createElement('p');
      pElem.textContent = 'This is a newly-added paragraph.';
      document.body.appendChild(pElem);
    });  

上面的代码主要获取了一个button，然后给它加了一个点击事件，当我们点击时，会触发alert，然后再生成一个p元素，里面的内容为'This is a newly-added paragraph.'，最后把这个p元素渲染到页面中。

毫无意外，当我们点击后，会直接运行alert，产生代码阻塞效果，当我们点击确定后，才会继续运行下面的代码，生成p元素。

这个例子说明了同步代码有个缺陷：当有个别代码产生阻塞时，会影响后续的代码。

产生阻塞的原因很多，有可能是需要完成一个非常耗时的任务，比如运行一百万次运算，比如产生一个网络请求等等都可能导致代码阻塞现象。

这是一种非常令人沮丧的体验，因为在目前计算机多核能力下，我们应当在同一时间让计算机完成更多的任务，而不是一件一件完成。由于JS是单线程的，而且这个设计未来也不一定会修改，所以要在单线程下不阻塞完成多个耗时的任务，就需要增加JS的线程辅助能力，而JS设计者是采用辅助线程web workers来帮助完成耗时的任务。但是本质上，由于其他线程不能修改DOM，所以JS还是单线程。

那么虽然增加了多线程来帮助运算，但这样做依然只是减少了代码阻塞问题，web workers虽然有用，但是没有更新DOM的权限，这是主线程的权利。

想象一个，假设我们需要让web workers去做一个获取图片的任务，而我在主线程上需要用到这张图片来更新dom呢？这样的情况下很可能就就报错了，因为很有可能web workers没有获取到图片，主线程的更新dom的操作就已经运行了。

为了解决这个问题，浏览器运行异步进行某些操作。

异步

理解了什么是同步，那么我们修改一下上面的代码，让它变成异步的

    const btn = document.querySelector('button');
    btn.addEventListener('click', () => {
      setTimeout(()=>{alert('You clicked me!');},2000)
     // alert('You clicked me!') 删除了这行
      let pElem = document.createElement('p');
      pElem.textContent = 'This is a newly-added paragraph.';
      document.body.appendChild(pElem);
    });  

这时候就会发现先渲染了，再执行alert，因为setTimeout就是浏览器认可异步操作。

callbacks和promise

异步分为两种学派，一种是callbacks，还一种是使用promise。

callbacks

callbacks就是使用callback函数来手动安排代码执行顺序。

上面示例中btn.addEventListener('click', () => {})中的第二个参数就是callback函数，它的意思是，点击事件后再回头来执行这个代码。

当我们把回调函数作为一个参数传递给另一个函数时，仅仅是把回调函数定义作为参数传递过去 — 回调函数并没有立刻执行，回调函数会在包含它的函数的某个地方异步执行，包含函数负责在合适的时候执行回调函数。

function fn(callback){
   callback()
}
function fn1(){}
fn(fn1)

上面的代码就是一个最简单的回调。

我们可以自己来写一个最简单的AJAX示例

function ajax(url,method,callback){
   const request=new XMLHttpRequest()
   request.open(method,url)
   request.onReadyStatechange=()=>{
      if(request.status===200 && request.readyState===4){
         callback(request.response)
   }
}
   request.send()
}

function fn(X){
   console.log(X)
}

ajax('5.json','GET',fn)

上面的代码先定一个一个ajax的函数，后定一个一个fn的函数，当我运行ajax并传递了参数时，会在ajax内部执行ajax的操作，最后再回调fn来打印出request.response

要注意不是所有的callback都是异步的，比如Array.prototype.forEach就是同步回调

Promise

promise是新派的异步代码，它主要有三种状态

创建promise时，它既不是成功也不是失败状态。这个状态叫作pending（待定）。

当promise返回时，称为 resolved（已解决）.

一个成功resolved的promise称为fullfilled（实现）。它返回一个值，可以通过将.then()块链接到promise链的末尾来访问该值。 .then()块中的执行程序函数将包含promise的返回值。

一个不成功resolved的promise被称为rejected（拒绝）了。它返回一个原因（reason），一条错误消息，说明为什么拒绝promise。可以通过将.catch()块链接到promise链的末尾来访问此原因。

promise只会产生两种状态转化结果：

• 从未完成到成功
• 从未完成到失败

let promise = new Promise((resolve,reject)=>{
   if('成功'){
     resolve('Success!')
   }else{
     reject(reason)
   }
})

Promise 构造函数接收一个函数为参数，函数中又接收两个函数作为参数，当异步操作成功时，执行 resolve 函数，不成功则执行 reject。

promise.then((message)=>{console.log(message)},(error)=>{console.error(error)})

上面的代码是异步之后的操作，通过一个then方法来执行异步后的操作，then接收两个callback，第一个是promise成功后的，第二个是promise失败后执行的。

它也可以写成这样

promise.then((message)=>{console.log(message)}).catch((error)=>{console.error(error)})

then 里的参数是可选的，catch(failureCallback) 是 then(null, failureCallback) 的缩略形式

链式调用

连续执行两个或者多个异步操作是一个常见的需求，.then方法返回一个promise对象，所以可以链式调用。

promise.then(()=>{})
.then(()=>{})
.catch(()=>{console.error()})

通常，一遇到异常抛出，浏览器就会顺着 Promise 链寻找下一个 onRejected 失败回调函数或者由 .catch() 指定的回调函数。

也就是说，不管前面多少个then，只要一步出问题了，就会执行.catch方法

promise.all

如果想在一大堆Promises全部完成之后运行一些代码呢,显然.then方法不太够用。

你可以使用巧妙命名的Promise.all()静态方法完成此操作。这将一个promises数组作为输入参数，并返回一个新的Promise对象，只有当数组中的所有promise都满足时才会满足。它看起来像这样：

Promise.all([a, b, c]).then(values => {
  ...
});

如果它们都实现，那么数组中的结果将作为参数传递给.then()块中的执行器函数。如果传递给Promise.all()的任何一个 promise 拒绝，整个块将拒绝

promise.finally

在promise完成后，你可能希望运行最后一段代码，无论它是否已实现（fullfilled）或被拒绝（rejected）。此前，你必须在.then()和.catch()回调中包含相同的代码，例如

myPromise
.then(response => {
  doSomething(response);
  runFinalCode();//重复
})
.catch(e => {
  returnError(e);
  runFinalCode(); //重复
});

在现代浏览器中，.finally() 方法可用，它可以链接到常规promise链的末尾，允许你减少代码重复并更优雅地执行操作。上面的代码现在可以写成如下

myPromise
.then(response => {
  doSomething(response);
})
.catch(e => {
  returnError(e);
})
.finally(() => {
  runFinalCode();
});

async和await:异步语法糖

简单来说，它们是基于promises的语法糖，使异步代码更易于编写和阅读。通过使用它们，异步代码看起来更像是老式同步代码，因此它们非常值得学习。

async关键字

async function hello() { return "Hello" };
hello();
//Promise {<fulfilled>: "Hello"}

话不多说，上面的代码增加async关键字后，这个函数会返回promise。这是异步的基础，可以说，现在的异步JS就是使用promise。

箭头函数写法

let hello=async ()=>{return 'hello'}

现在我们可以使用.then方法啦

hello().then((mes)=>{console.log(mes)})

await关键字

await 只在异步函数里面才起作用,它的主动作用是会暂停代码在该行上，直到 promise 完成，然后返回结果值

我们可以造一个实际的例子

const p=new Promise((resolve,reject)=>{
  setTimeout(resolve,3000,'doing')
})
const r=new Promise((resolve,reject)=>{
  setTimeout(resolve,0,p)
})
const o=r.then((mes)=>{
  return mes+'=>done'
})
o.then((mes)=>{console.log(mes)}).catch((error)=>{console.log(error)})
//doing => done

上面代码中，r会拿到p的结果，然后链式调用下去。

我们可以使用async+await进行封装

    function promise(ms, mes) {
      return new Promise((resolve, reject) => {
        setTimeout(resolve, ms, mes);
      });
    }
    async function fn() {
      const p = await promise(3000, "doing");
      console.log(p); // doing
      const r = await promise(0, p);
      console.log(r); //doing
      const o = await (r + "=>done");
      console.log(o); //doing =>done
    }
    fn();

可以看到上面的异步代码就跟同步代码的写法一样。

async和await要同时使用才会有异步的效果，单单使用async依然是同步代码，只是返回promise对象

与fetch相结合

fetch就是使用promise版本的XMLHttpRequest

fetch('products.json').then(function(response) {
  return response.json();
}).then(function(json) {
  console.log(json)
}).catch(function(err) {
  console.log('Fetch problem: ' + err.message);
});

上面的代码的意思是通过fetch申请一个json数据，然后得到数据后将其json化，再打印出来。

转化成async和await方法

const promise=()=>{
  try{
     const j=await fetch('products.json')
     const result=await j.json()
     console.log(result)
  }catch(error){
     console.log(error)
  }
}
promise()

总结

异步JS中，最多的是使用ajax来产生带动网页工作，理解Promise是我们学习的基础，现代JS就是基于Promise来工作的。

在了解Promise后，通过async和await语法糖，我们能够更加简单地实现promise，避免大量then的嵌套。

参考文档

异步JavaScript

使用fetch

Promise

XMLHttpRequest