异步相关

你别睡这么晚2024-04-022024-04-03

3.1 promise和 async await 区别

参考答案：

概念
Promise 是异步编程的一种解决方案，比传统的解决方案——回调函数和事件——更合理和更强大，简单地说，Promise好比容器，里面存放着一些未来才会执行完毕（异步）的事件的结果，而这些结果一旦生成是无法改变的

async await也是异步编程的一种解决方案，他遵循的是Generator 函数的语法糖，他拥有内置执行器，不需要额外的调用直接会自动执行并输出结果，它返回的是一个Promise对象。
两者的区别
1. Promise的出现解决了传统callback函数导致的“地域回调”问题，但它的语法导致了它向纵向发展行成了一个回调链，遇到复杂的业务场景，这样的语法显然也是不美观的。而async await代码看起来会简洁些，使得异步代码看起来像同步代码，await的本质是可以提供等同于”同步效果“的等待异步返回能力的语法糖，只有这一句代码执行完，才会执行下一句。
2. async await与Promise一样，是非阻塞的。
3. async await是基于Promise实现的，可以说是改良版的Promise，它不能用于普通的回调函数。

3.2 defer和async区别

参考答案：

区别主要在于一个执行时间,defer会在文档解析完之后执行,并且多个defer会按照顺序执行,而async则是在js加载好之后就会执行,并且多个async,哪个加载好就执行哪个

解析：

在没有defer或者async的情况下：会立即执行脚本,所以通常建议把script放在body最后

1	<script src="script.js"></script>

async：有async的话,加载和渲染后续文档元素的过程将和 script.js 的加载与执行并行进行（异步）。
但是多个js文件的加载顺序不会按照书写顺序进行

1	<script async src="script.js"></script>

derer：有derer的话,加载后续文档元素的过程将和 script.js 的加载并行进行（异步），但是 script.js 的执行要在所有元素解析完成之后，DOMContentLoaded 事件触发之前完成,并且多个defer会按照顺序进行加载。

1	<script defer src="script.js"></script>

3.3. 同步和异步

参考答案：

同步

指在 主线程上排队执行的任务，只有前一个任务执行完毕，才能继续执行下一个任务。
也就是调用一旦开始，必须这个调用 返回结果(划重点——）才能继续往后执行。程序的执行顺序和任务排列顺序是一致的。

异步

异步任务是指不进入主线程，而进入 任务队列的任务，只有任务队列通知主线程，某个异步任务可以执行了，该任务才会进入主线程。
每一个任务有一个或多个 回调函数。前一个任务结束后，不是执行后一个任务,而是执行回调函数，后一个任务则是不等前一个任务结束就执行。
程序的执行顺序和任务的排列顺序是不一致的，异步的。
我们常用的setTimeout和setInterval函数，Ajax都是异步操作。

3.4 实现异步的方法

参考答案：

回调函数（Callback）、事件监听、发布订阅、Promise/A+、生成器Generators/ yield、async/await

JS 异步编程进化史：callback -> promise -> generator -> async + await
async/await 函数的实现，就是将 Generator 函数和自动执行器，包装在一个函数里。
async/await可以说是异步终极解决方案了。

(1) async/await函数相对于Promise，优势体现在：
- 处理 then 的调用链，能够更清晰准确的写出代码
- 并且也能优雅地解决回调地狱问题。
当然async/await函数也存在一些缺点，因为 await 将异步代码改造成了同步代码，如果多个异步代码没有依赖性却使用了 await 会导致性能上的降低，代码没有依赖性的话，完全可以使用 Promise.all 的方式。

(2) async/await函数对 Generator 函数的改进，体现在以下三点：
- 内置执行器。 Generator 函数的执行必须靠执行器，所以才有了 co 函数库，而 async 函数自带执行器。也就是说，async 函数的执行，与普通函数一模一样，只要一行。
- 更广的适用性。 co 函数库约定，yield 命令后面只能是 Thunk 函数或 Promise 对象，而 async 函数的 await 命令后面，可以跟 Promise 对象和原始类型的值（数值、字符串和布尔值，但这时等同于同步操作）。
- 更好的语义。 async 和 await，比起星号和 yield，语义更清楚了。async 表示函数里有异步操作，await 表示紧跟在后面的表达式需要等待结果。

解析：

回调函数（Callback）

回调函数是异步操作最基本的方法。以下代码就是一个回调函数的例子：
1
2
3
ajax(url, () => {
// 处理逻辑
})
但是回调函数有一个致命的弱点，就是容易写出回调地狱（Callback hell）。假设多个请求存在依赖性，你可能就会写出如下代码：
1
2
3
4
5
6
7
8
9
ajax(url, () => {
// 处理逻辑
ajax(url1, () => {
// 处理逻辑
ajax(url2, () => {
// 处理逻辑
})
})
})
回调函数的优点是简单、容易理解和实现，缺点是不利于代码的阅读和维护，各个部分之间高度耦合，使得程序结构混乱、流程难以追踪（尤其是多个回调函数嵌套的情况），而且每个任务只能指定一个回调函数。此外它不能使用 try catch 捕获错误，不能直接 return。
事件监听

这种方式下，异步任务的执行不取决于代码的顺序，而取决于某个事件是否发生。

下面是两个函数f1和f2，编程的意图是f2必须等到f1执行完成，才能执行。首先，为f1绑定一个事件（这里采用的jQuery的写法）
1
f1.on('done', f2);
上面这行代码的意思是，当f1发生done事件，就执行f2。然后，对f1进行改写：
1
2
3
4
5
6
function f1() {
setTimeout(function () {
// ...
f1.trigger('done');
}, 1000);
}
上面代码中，f1.trigger(‘done’)表示，执行完成后，立即触发done事件，从而开始执行f2。

这种方法的优点是比较容易理解，可以绑定多个事件，每个事件可以指定多个回调函数，而且可以”去耦合”，有利于实现模块化。缺点是整个程序都要变成事件驱动型，运行流程会变得很不清晰。阅读代码的时候，很难看出主流程。
发布订阅

我们假定，存在一个”信号中心”，某个任务执行完成，就向信号中心”发布”（publish）一个信号，其他任务可以向信号中心”订阅”（subscribe）这个信号，从而知道什么时候自己可以开始执行。这就叫做”发布/订阅模式”（publish-subscribe pattern），又称”观察者模式”（observer pattern）。

首先，f2向信号中心jQuery订阅done信号。
1
jQuery.subscribe('done', f2);
然后，f1进行如下改写：
1
2
3
4
5
6
function f1() {
setTimeout(function () {
// ...
jQuery.publish('done');
}, 1000);
}
上面代码中，jQuery.publish(‘done’)的意思是，f1执行完成后，向信号中心jQuery发布done信号，从而引发f2的执行。 f2完成执行后，可以取消订阅（unsubscribe）
1
jQuery.unsubscribe('done', f2);
这种方法的性质与“事件监听”类似，但是明显优于后者。因为可以通过查看“消息中心”，了解存在多少信号、每个信号有多少订阅者，从而监控程序的运行。

Promise/A+

Promise本意是承诺，在程序中的意思就是承诺我过一段时间后会给你一个结果。什么时候会用到过一段时间？答案是异步操作，异步是指可能比较长时间才有结果的才做，例如网络请求、读取本地文件等

4.1 Promise的三种状态

Pending—-Promise对象实例创建时候的初始状态
Fulfilled—-可以理解为成功的状态
Rejected—-可以理解为失败的状态

这个承诺一旦从等待状态变成为其他状态就永远不能更改状态了，比如说一旦状态变为 resolved 后，就不能再次改变为Fulfilled

let p = new Promise((resolve, reject) => {
  reject('reject')
  resolve('success')//无效代码不会执行
})
p.then(
  value => {
    console.log(value)
  },
  reason => {
    console.log(reason)//reject
  }
)

当我们在构造 Promise 的时候，构造函数内部的代码是立即执行的

new Promise((resolve, reject) => {
  console.log('new Promise')
  resolve('success')
})
console.log('end')
// new Promise => end

4.2 promise的链式调用

每次调用返回的都是一个新的Promise实例(这就是then可用链式调用的原因)
如果then中返回的是一个结果的话会把这个结果传递下一次then中的成功回调
如果then中出现异常,会走下一个then的失败回调
在 then中使用了return，那么 return 的值会被Promise.resolve() 包装(见例1，2)
then中可以不传递参数，如果不传递会透到下一个then中(见例3)

catch 会捕获到没有捕获的异常

接下来我们看几个例子：

// 例1
Promise.resolve(1)
.then(res => {
  console.log(res)
  return 2 //包装成 Promise.resolve(2)
})
.catch(err => 3)
.then(res => console.log(res))
复制代码
// 例2
Promise.resolve(1)
.then(x => x + 1)
.then(x => {
  throw new Error('My Error')
})
.catch(() => 1)
.then(x => x + 1)
.then(x => console.log(x)) //2
.catch(console.error)
复制代码
// 例3
let fs = require('fs')
function read(url) {
return new Promise((resolve, reject) => {
  fs.readFile(url, 'utf8', (err, data) => {
    if (err) reject(err)
    resolve(data)
  })
})
}
read('./name.txt')
.then(function(data) {
  throw new Error() //then中出现异常,会走下一个then的失败回调
}) //由于下一个then没有失败回调，就会继续往下找，如果都没有，就会被catch捕获到
.then(function(data) {
  console.log('data')
})
.then()
.then(null, function(err) {
  console.log('then', err)// then error
})
.catch(function(err) {
  console.log('error')
})

Promise不仅能够捕获错误，而且也很好地解决了回调地狱的问题，可以把之前的回调地狱例子改写为如下代码：

ajax(url)
.then(res => {
    console.log(res)
    return ajax(url1)
}).then(res => {
    console.log(res)
    return ajax(url2)
}).then(res => console.log(res))

它也是存在一些缺点的，比如无法取消 Promise，错误需要通过回调函数捕获。

生成器Generators/ yield

Generator 函数是 ES6 提供的一种异步编程解决方案，语法行为与传统函数完全不同，Generator 最大的特点就是可以控制函数的执行。

语法上，首先可以把它理解成，Generator 函数是一个状态机，封装了多个内部状态。
Generator 函数除了状态机，还是一个遍历器对象生成函数。
可暂停函数, yield可暂停，next方法可启动，每次返回的是yield后的表达式结果。
yield表达式本身没有返回值，或者说总是返回undefined。next方法可以带一个参数，该参数就会被当作上一个yield表达式的返回值。

我们先来看个例子：

function *foo(x) {
  let y = 2 * (yield (x + 1))
  let z = yield (y / 3)
  return (x + y + z)
}
let it = foo(5)
console.log(it.next())   // => {value: 6, done: false}
console.log(it.next(12)) // => {value: 8, done: false}
console.log(it.next(13)) // => {value: 42, done: true}

可能结果跟你想象不一致，接下来我们逐行代码分析：

首先 Generator 函数调用和普通函数不同，它会返回一个迭代器
当执行第一次 next 时，传参会被忽略，并且函数暂停在 yield (x + 1) 处，所以返回 5 + 1 = 6
当执行第二次 next 时，传入的参数12就会被当作上一个yield表达式的返回值，如果你不传参，yield 永远返回 undefined。此时 let y = 2 * 12，所以第二个 yield 等于 2 * 12 / 3 = 8

当执行第三次 next 时，传入的参数13就会被当作上一个yield表达式的返回值，所以 z = 13, x = 5, y = 24，相加等于 42

我们再来看个例子：有三个本地文件，分别1.txt,2.txt和3.txt，内容都只有一句话，下一个请求依赖上一个请求的结果，想通过Generator函数依次调用三个文件

1 2	1.txt //1.txt文件

1 2	2.txt //2.txt文件

1 2	3.txt //3.txt文件

let fs = require('fs')
function read(file) {
  return new Promise(function(resolve, reject) {
    fs.readFile(file, 'utf8', function(err, data) {
      if (err) reject(err)
      resolve(data)
    })
  })
}
function* r() {
  let r1 = yield read('./1.txt')
  let r2 = yield read(r1)
  let r3 = yield read(r2)
  console.log(r1)
  console.log(r2)
  console.log(r3)
}
let it = r()
let { value, done } = it.next()
value.then(function(data) { // value是个promise
  console.log(data) //data=>2.txt
  let { value, done } = it.next(data)
  value.then(function(data) {
    console.log(data) //data=>3.txt
    let { value, done } = it.next(data)
    value.then(function(data) {
      console.log(data) //data=>结束
    })
  })
})

从上例中我们看出手动迭代Generator函数很麻烦，实现逻辑有点绕，而实际开发一般会配合co库去使用。co是一个为Node.js和浏览器打造的基于生成器的流程控制工具，借助于Promise，你可以使用更加优雅的方式编写非阻塞代码。

安装co库只需：npm install co

上面例子只需两句话就可以轻松实现

function* r() {
  let r1 = yield read('./1.txt')
  let r2 = yield read(r1)
  let r3 = yield read(r2)
  console.log(r1)
  console.log(r2)
  console.log(r3)
}
let co = require('co')
co(r()).then(function(data) {
  console.log(data)
})
// 2.txt=>3.txt=>结束=>undefined

我们可以通过 Generator 函数解决回调地狱的问题，可以把之前的回调地狱例子改写为如下代码：

function *fetch() {
    yield ajax(url, () => {})
    yield ajax(url1, () => {})
    yield ajax(url2, () => {})
}
let it = fetch()
let result1 = it.next()
let result2 = it.next()
let result3 = it.next()

async/await

5.1 Async/Await简介

使用async/await，你可以轻松地达成之前使用生成器和co函数所做到的工作,它有如下特点：

\1. async/await是基于Promise实现的，它不能用于普通的回调函数。

\2. async/await与Promise一样，是非阻塞的。
1
3. async/await使得异步代码看起来像同步代码，这正是它的魔力所在。

一个函数如果加上 async ，那么该函数就会返回一个 Promise

async function async1() {
  return "1"
}
console.log(async1()) // -> Promise {<resolved>: "1"}

Generator函数依次调用三个文件那个例子用async/await写法，只需几句话便可实现

let fs = require('fs')
function read(file) {
  return new Promise(function(resolve, reject) {
    fs.readFile(file, 'utf8', function(err, data) {
      if (err) reject(err)
      resolve(data)
    })
  })
}
async function readResult(params) {
  try {
    let p1 = await read(params, 'utf8')//await后面跟的是一个Promise实例
    let p2 = await read(p1, 'utf8')
    let p3 = await read(p2, 'utf8')
    console.log('p1', p1)
    console.log('p2', p2)
    console.log('p3', p3)
    return p3
  } catch (error) {
    console.log(error)
  }
}
readResult('1.txt').then( // async函数返回的也是个promise
  data => {
    console.log(data)
  },
  err => console.log(err)
)
// p1 2.txt
// p2 3.txt
// p3 结束
// 结束

5.2 Async/Await并发请求

如果请求两个文件，毫无关系，可以通过并发请求

let fs = require('fs')
function read(file) {
  return new Promise(function(resolve, reject) {
    fs.readFile(file, 'utf8', function(err, data) {
      if (err) reject(err)
      resolve(data)
    })
  })
}
function readAll() {
  read1()
  read2()//这个函数同步执行
}
async function read1() {
  let r = await read('1.txt','utf8')
  console.log(r)
}
async function read2() {
  let r = await read('2.txt','utf8')
  console.log(r)
}
readAll() // 2.txt 3.txt

3.5 怎么解决callback多层嵌套

参考答案：

回调地狱有两种解决方案：

Promises
Async/await

3.6 promise的介绍与使用

参考答案：

Promise 介绍：

ES6中的Promise 是异步编程的一种方案。从语法上讲，Promise 是一个对象，它可以获取异步操作的消息。

Promise对象, 可以将异步操作以同步的流程表达出来。使用 Promise 主要有以下好处：

可以很好地解决回调地狱的问题（避免了层层嵌套的回调函数）。
语法非常简洁。Promise 对象提供了简洁的API，使得控制异步操作更加容易。

Promise 使用：

语法

var promise = new Promise((resolve, reject) => {/* executor函数 */
    // ... some code
    if (/* 异步操作成功 */){
        resolve(value);
    } else {
        reject(error);
    }
});
promise.then((value) => {
    //success
}, (error) => {
    //failure
})

参数
executor函数在Promise构造函数执行时同步执行，被传递resolve和reject函数（executor函数在Promise构造函数返回新建对象前被调用）。
executor内部通常会执行一些异步操作，一旦完成，可以调用resolve函数来将promise状态改成fulfilled(完成)，或者将promise的状态改为rejected(失败)。
如果在executor函数中抛出一个错误，那么该promise状态为rejected。executor函数的返回值被忽略。
简单使用

function timeout(ms) {
    return new Promise((resolve, reject) => {
        setTimeout(resolve, ms, 'done');
    });
}

timeout(2000).then((value) => {
    console.log(value); //done
});

原型方法

Promise.prototype.then(onFulfilled, onRejected)

语法
p.then(onFulfilled, onRejected);
p.then((value) => {// fulfillment}, (reason) => {// rejection});
含义
为Promise实例添加状态改变时的回调函数。then方法的第一个参数是resolved状态的回调函数，第二个参数（可选）是rejected状态的回调函数。

链式操作
then方法返回的是一个新的promise，因此可以采用链式写法，即then方法后面再调用另一个then方法。

new Promise(resolve => {
    resolve(1);
})
    .then(result => console.log(result)) //1
    .then(result => {
        console.log(result);              //undefined
        return 2;
    })
    .then(result => {
        console.log(result);             //2
        throw new Error("err");
    })
    .then((result) =>{
        console.log(result);            
    }, (err)=>{
        console.log(err);                //Error: err
        return 3;
    })
    .then((result) => {
        console.log(result);            //3
    })

注意：①不管是then方法的onfulfilled函数参数执行还是onrejected（可选参数）函数参数执行，then方法返回的都是一个新的Promise对象，都可以继续采用链式写法调用另一个then方法。②Promise.prototype.catch()方法返回的也是一个Promise对象。then方法和catch方法可以链式操作。

返回值
then方法返回一个Promise，而它的行为与then中的被调用的回调函数(onfulfilled函数/onrejected函数)的返回值有关。
(1) 如果then中的回调函数返回一个值，那么then返回的Promise将会成为接受状态，并且将返回的值作为接受状态的回调函数的参数值。

new Promise((resolve, reject) => {
    reject();
})
.then( () => 99, () => 42 )
.then( result => console.log(result)); // 42

(2) 如果then中的回调函数抛出一个错误，那么then返回的Promise将会成为拒绝状态，并且将抛出的错误作为拒绝状态的回调函数的参数值。

new Promise((resolve, reject) => {
    resolve();
})
    .then( () => {throw new Error('err')}, () => {})
    .then( () => {}, (err) => {console.log(err)}); //Error: err

(3) 如果then中的回调函数返回一个已经是接受状态的Promise，那么then返回的Promise也会成为接受状态，并且将那个Promise的接受状态的回调函数的参数值作为该被返回的Promise的接受状态回调函数的参数值。

new Promise((resolve, reject) => {
    resolve();
})
    .then( () => {
        return new Promise(resolve => resolve('ok'));
    })
    .then( (result) => {console.log(result)}); //ok

(4) 如果then中的回调函数返回一个已经是拒绝状态的Promise，那么then返回的Promise也会成为拒绝状态，并且将那个Promise的拒绝状态的回调函数的参数值作为该被返回的Promise的拒绝状态回调函数的参数值。

new Promise((resolve, reject) => {
    resolve();
})
    .then( () => {
        return new Promise((resolve, reject) => {
           reject(new Error('err'));
        });
    })
    .then( () => {}, (err) => {console.log(err)}); //Error: err

(5) 如果then中的回调函数返回一个未定状态（pending）的Promise，那么then返回Promise的状态也是未定的，并且它的终态与那个Promise的终态相同；同时，它变为终态时调用的回调函数参数与那个Promise变为终态时的回调函数的参数是相同的。

new Promise((resolve, reject) => {
    resolve();
})
.then(() => {
    return new Promise(resolve => {
        setTimeout(resolve, 2000, 'ok');
    });
})
.then( (result) => {console.log(result)}); //ok

注意：这里是then方法中被调用回调函数的返回值与then方法返回的Promise对象状态之间的关系。

Promise.prototype.catch(onRejected)

语法

p.catch(onRejected);

p.catch(function(reason) {
    // 拒绝
});

含义
Promise.prototype.catch方法是.then(null, rejection)的别名，用于指定发生错误时的回调函数，返回一个新的promise对象。

用法

const p = new Promise((resolve,reject) => {
    return reject(new Error('err')); //reject方法的作用，等同于抛出错误
    //throw new Error('err');
});

p.then(null, (err) => {
    console.log(err);  //Err: err
});

//--------等价写法---------
p.catch(err => {
    console.log(err); //Err: err
})

注意：由于.catch方法是.then(null, rejection)的别名，故.then中的链式操作(3)、返回值(4)等语法在.catch中都适用。

一般总是建议，Promise对象后面要跟catch方法，这样可以处理Promise内部发生的错误。catch方法返回的还是一个Promise对象，因此后面还可以接着调用then方法。

Promise对象的错误具有“冒泡”性质，会一直向后传递，直到被捕获为止。也就是说，错误总是会被下一个catch语句捕获。即：当前catch方法可以捕获上一个catch方法(包括上一个catch)到当前catch(不包括当前catch)方法之间所有的错误，如果没有错误，则当前catch方法不执行。

new Promise(() => {
    throw new Error('err1');
})
    .then(() => {console.log(1);})
    .then(() => {console.log(2);})
    .catch((err) => {
        console.log(err); //Err: err1
        throw  new Error('err2');
    })
    .catch((err) => {console.log(err);})//Err: err2

一般来说，不要在then方法里面定义Reject状态的回调函数（即then的第二个参数），总是使用catch方法。
1
2
3
4
5
6
7
8
// bad
new Promise()
.then((data) => {/* success */ }, (err) => {/* error */ });

// good
new Promise()
.then((data) => { /* success */ })
.catch((err) => {/* error */ });
上面代码中，第二种写法要好于第一种写法，理由是第二种写法可以捕获前面then方法执行中的错误，也更接近同步的写法。

与传统的try/catch代码块不同的是，即使没有使用catch方法指定错误处理的回调函数，Promise对象抛出的错误也不会中止外部脚本运行。

new Promise((resolve) => {
    // 下面一行会报错，因为x没有声明
    resolve(x + 2);
}).then(() => {
    console.log('ok');
});
setTimeout(() => {console.log('over')});
//Uncaught (in promise) ReferenceError: x is not defined
//over

在异步函数中抛出的错误不会被catch捕获到

new Promise((resolve, reject) => {
    setTimeout(() => {
        throw 'Uncaught Exception!';
    }, 1000);
}).catch(() => {
    console.log('err'); //不会执行
});

new Promise((resolve, reject) => {
    setTimeout(() => {
        reject();
    }, 1000);
}).catch(() => {
    console.log('err'); //err
});

在resolve()后面抛出的错误会被忽略

new Promise((resolve, reject) => {
    resolve();
    throw 'Silenced Exception!';
}).catch(function(e) {
    console.log(e); // 不会执行
});

Promise.all(iterable)

语法
var p = Promise.all([p1, p2, p3]);
含义
Promise.all方法接受一个数组作为参数，p1、p2、p3都是Promise实例，如果不是，就会先调用下面讲到的Promise.resolve方法，将参数转为Promise实例，再进一步处理。（Promise.all方法的参数可以不是数组，但必须具有Iterator接口，且返回的每个成员都是Promise实例。）
p的状态由p1、p2、p3决定，分成两种情况。
(1) 只有p1、p2、p3的状态都变成fulfilled，p的状态才会变成fulfilled，此时p1、p2、p3的返回值组成一个数组，传递给p的回调函数。
(2) 只要p1、p2、p3之中有一个被rejected，p的状态就变成rejected，此时第一个被reject的实例的返回值，会传递给p的回调函数。

用法

const p1 = 'p1-ok';
const p2 = Promise.resolve('p2-ok');
const p3 = new Promise((resolve) => setTimeout(resolve, 3000, 'p3-ok'));
const p4 = Promise.reject('p4-err');
Promise.all([p1, p2, p3])
    .then((resolves) => {
      resolves.forEach(resolve => {
          console.log(resolve); //p1-ok   p2-ok  p3-ok
      });
    })
    .catch(() => {
      console.log('err');
    });

Promise.all([p1, p2, p3, p4])
    .then(() => {
      console.log('ok');
    })
    .catch((err) => {
       console.log(err); //p4-err
    })

Promise.race(iterable)

语法
var p = Promise.race([p1, p2, p3]);
含义
Promise.race方法同样是将多个Promise实例，包装成一个新的Promise实例。只要p1、p2、p3之中有一个实例率先改变状态，p的状态就跟着改变。那个率先改变的Promise实例的返回值，就传递给p的回调函数。
Promise.race方法的参数与Promise.all方法一样，如果不是Promise实例，就会先调用下面讲到的Promise.resolve方法，将参数转为Promise实例，再进一步处理。

用法

var p1 = new Promise(resolve => {setTimeout(resolve, 500, "one");});
var p2 = new Promise(resolve => {setTimeout(resolve, 100, "two");});
Promise.race([p1, p2])
    .then(value => {
        console.log(value); // "two"
    });

var p3 = new Promise(resolve => {setTimeout(resolve, 100, "three");});
var p4 = new Promise((resolve, reject) => {setTimeout(reject, 500, "four");});

Promise.race([p3, p4])
    .then((value) => {
        console.log(value); // "three"
    })
    .catch(err => {
        // 未被调用  
    });

var p5 = new Promise(resolve => {setTimeout(resolve, 500, "five");});
var p6 = new Promise((resolve, reject) => {
          setTimeout(reject, 100, "six");
      });

Promise.race([p5, p6])
    .then((value) => {
      // 未被调用             
    }).catch((reason) => {
        console.log(reason); // "six"
    });

Promise.resolve(value)

语法

1
2
3

Promise.resolve(value);
Promise.resolve(promise);
Promise.resolve(thenable);

Promise.resolve等价于下面的写法。

1
2
3

Promise.resolve(value) ;
// 等价于
new Promise(resolve => resolve(value));

含义
返回一个状态由给定value决定的Promise实例。

用法
(1) 如果该值是一个Promise对象，则直接返回该对象；

1
2
3

const p = new Promise((resolve) => {resolve()});
const p2 = Promise.resolve(p);
console.log(p === p2); //true

(2) 如果参数是thenable对象(即带有then方法的对象)，则返回的Promise对象的最终状态由then方法的执行决定；

const thenable = {
    then(resolve, reject) {
        resolve(42);
    }
};
Promise.resolve(thenable)
    .then((value) => {
        console.log(value);  // 42
    });

(3) 如果参数是不具有then方法的对象或基本数据类型，则返回的Promise对象的状态为fulfilled，并且将该参数传递给then方法。

Promise.resolve('Hello')
    .then((s) => {
        console.log(s); //Hello
    });

(4) 如果不带有任何参数，则返回的Promise对象的状态为fulfilled，并且将undefined作为参数传递给then方法。

Promise.resolve()
    .then((s) => {
        console.log(s); //undefined
    });

通常而言，如果你不知道一个值是否是Promise对象，使用Promise.resolve(value)来返回一个Promise对象,这样就能将该value以Promise对象形式使用。

立即resolve的Promise对象，是在本轮“事件循环”（event loop）的结束时，而不是在下一轮“事件循环”的开始时。

setTimeout(function () {
    console.log('three');
}, 0);

Promise.resolve().then( () => {
    console.log('two');
});

console.log('one');
// one 
// two
// three

Promise.reject(reason)

语法

1	Promise.reject(reason);

Promise.reject等价于下面的写法。

1
2
3

var p = Promise.reject(reason);
// 等同于
var p = new Promise((resolve, reject) => reject(reason));

含义
返回一个状态为rejected的Promise对象，并将给定的失败信息传递给对应的处理方法。

注意：Promise.resolve(value)方法返回的Promise实例的状态由value决定，可能是fulfilled，也可能是rejected。Promise.reject(reason)方法返回的Promise实例的状态一定是rejected。

用法

Promise.reject("Testing static reject")
    .then((value) => {
        // 未被调用
    }).catch((reason) => {
        console.log(reason); // Testing static reject
    });

Promise.reject(new Error("fail"))
    .then((value) => {
        // 未被调用
    }).catch((error) => {
        console.log(error); // Error: fail
    });

Promise.reject()方法的参数，会原封不动地作为reject的理由，变成后续方法的参数。这一点与Promise.resolve方法不一致。

const thenable = {
    then(resolve) {
        resolve('ok');
    }
};

Promise.resolve(thenable)
    .then(e => {
        console.log(e === 'ok'); //true
    });

Promise.reject(thenable)
    .catch(e => {
        console.log(e === thenable); // true
    });

3.7 Promise.all

参考答案：

Promise.all(iterable)方法返回一个Promise实例，此实例在iterable参数内所有的promise都“完成（resolved）”或参数中不包含promise时回调完成（resolve）；如果参数中promise有一个失败（rejected），此实例回调失败（reject），失败的原因是第一个失败promise的结果。

解析：

语法

1	Promise.all(iterable);

参数

iterable

一个可迭代对象，如Array或String

返回值

如果传入的参数是一个空的可迭代对象，则返回一个已完成（already resolved）状态的Promise
如果传入的参数不包含任何promise，则返回一个异步完成（asynchronously resolved） Promise。注意：Google Chrome 58 在这种情况下返回一个已完成（already resolved）状态的Promise。
其它情况下返回一个处理中（pending）的Promise。这个返回的promise之后会在所有的promise都完成或有一个promise失败时异步地变为完成或失败。见下方关于“Promise.all 的异步或同步”示例。返回值将会按照参数内的promise顺序排列，而不是由调用promise的完成顺序决定。

3.8 与promise.all相反的是哪一个

参考答案：

Promse.race就是赛跑的意思，意思就是说，Promise.race([p1, p2, p3])里面哪个结果获得的快，就返回那个结果，不管结果本身是成功状态还是失败状态。

扩展：

语法

1	Promise.race(iterable);

参数

iterable

可迭代对象，类似Array

返回值

一个待定的 Promise]只要给定的迭代中的一个promise解决或拒绝，就采用第一个promise的值作为它的值，从而异步地解析或拒绝（一旦堆栈为空）。

3.9 promise实现文件读取

参考答案：

封装异步读取文件操作

fs.readFile()方法用于异步读取文件(node核心模块)
将Promise的实例对象作为函数的返回值返回
这样函数执行完毕后就得到一个Promise对象的实例,可以通过.then方法传入成功的回调和失败的回调

const fs = require('fs');
const path = require('path');

function asyncGetFileByPath(p) {
    return new Promise((resolve, reject) => {
        // Promise对象里面的参数,会立即执行(前面说过)
        fs.readFile(path.join(__dirname, p), 'utf-8', (err, data) => {
            if (err) {
                reject(err);
            } else {
                resolve(data);
            }
        })
    })
}
asyncGetFileByPath('./files/1.txt')
    .then(
        (data) => { // 成功的回调
            console.log(data);
        },
        (err) => { // 失败的回调
            console.error(err);
        }
    )

**
**

解决回调地狱

前面已经成功的封装了一个读取文件的函数
下面用它来体验一下读取多个文件
我们在.then()方法中,第一个参数resolve()方法中,返回一个promise对象B.
那么在执行.then()的resolve()方法完毕后,此时的执行环境是这个Promise的实例b
可以通过b的.then()方法继续传入resolve取消回调地狱,让代码趋于扁平化

const fs = require('fs');
const path = require('path');

function asyncGetFileByPath(p) {
    return new Promise((resolve, reject) => {
        // Promise对象里面的参数,会立即执行(前面说过)
        fs.readFile(path.join(__dirname, p), 'utf-8', (err, data) => {
            if (err) {
                reject(err);
            } else {
                resolve(data);
            }
        })
    })
}
asyncGetFileByPath('./files/1.txt')
    .then(
        (data) => { // 成功的回调    '1.txt'
            console.log(data); // 打印出 1.txt 数据
            return asyncGetFileByPath('./files/2.txt')
        },
        (err) => { // 失败的回调
            console.error(err);
        }
    )
    .then( // 成功的回调  '2.txt'
        (data) => {
            console.log(data); // 打印出 2.txt 中的数据
            return asyncGetFileByPath('./files/3.txt') // 继续返回Promise对象的实例
        },
        (err) => {
            console.error(err);
        }
    )
    .then(
        (data) => { // 成功的回调 '3.txt'
            console.log(data); // 打印出 3.txt 中的数据
        },
        (err) => {
            console.error(err);
        }
    )

3.10 用js实现sleep，用promise

参考答案:

function sleep(time) {
  return new Promise(resolve => setTimeout(resolve, time))
}

const t1 = +new Date()
sleep(3000).then(() => {
  const t2 = +new Date()
  console.log(t2 - t1)
})

优点：这种方式实际上是用了 setTimeout，没有形成进程阻塞，不会造成性能和负载问题。

缺点：虽然不像 callback 套那么多层，但仍不怎么美观，而且当我们需要在某过程中需要停止执行（或者在中途返回了错误的值），还必须得层层判断后跳出，非常麻烦，而且这种异步并不是那么彻底，还是看起来别扭

3.11 实现一个 Scheduler 类，完成对Promise的并发处理，最多同时执行2个任务

参考答案：

class Scheduler {
    constructor() {
        this.tasks = [], // 待运行的任务
        this.usingTask = [] // 正在运行的任务
    }
    // promiseCreator 是一个异步函数，return Promise
    add(promiseCreator) {
        return new Promise((resolve, reject) => {
            promiseCreator.resolve = resolve
            if (this.usingTask.length < 2) {
                this.usingRun(promiseCreator)
            } else {
                this.tasks.push(promiseCreator)
            }
        })
    }

    usingRun(promiseCreator) {
        this.usingTask.push(promiseCreator)
        promiseCreator().then(() => {
            promiseCreator.resolve()
            this.usingMove(promiseCreator)
            if (this.tasks.length > 0) {
                this.usingRun(this.tasks.shift())
            }
        })
    }

    usingMove(promiseCreator) {
        let index = this.usingTask.findIndex(promiseCreator)
        this.usingTask.splice(index, 1)
    }
}

const timeout = (time) => new Promise(resolve => {
    setTimeout(resolve, time)
})

const scheduler = new Scheduler()

const addTask = (time, order) => {
    scheduler.add(() => timeout(time)).then(() => console.log(order))
}

addTask(400, 4) 
addTask(200, 2) 
addTask(300, 3)

3.12 循环i，setTimeout 中输出什么，如何解决（块级作用域，函数作用域）

参考答案：

for循环setTimeout输出1-10解决方式问题来源

for (var i = 0; i< 10; i++){
   setTimeout((i) => {
   console.log(i);
   }, 0)
}

期望：输出1到10

为什么无法输出1到十

在上面的代码中，for循环是同步代码，setTimeout是异步代码。遇到这种既包含同步又包含异步的情况，JavaScript依旧按照从上到下的顺序执行同步代码，并将异步代码插入任务队列。setTimeout的第二个参数则是把执行代码（console.log(i)）添加到任务队列需等待的毫秒数，但等待的时间是相对主程序完毕的时间计算的，也就是说，在执行到setTimeout函数时会等待一段时间，再将当前任务插入任务队列。
最后，当执行完同步代码，js引擎就会去执行任务队列中的异步代码。这时候任务队列中就会有十个console.log(i)。我们知道，在每次循环中将setTimeout里面的代码“console.log(i)”放入任务队列时，i的值都是不一样的。但JavaScript引擎开始执行任务队列中的代码时，会开始在当前的作用域中开始找变量i，但是当前作用域中并没有对变量i进行定义。这个时候就会在创造该函数的作用域中寻找i。创建该函数的作用域就是全局作用域，这个时候就找到了for循环中的变量i，这时的i是全局变量，并且值已经确定：10。十个console.log“共享”i的值。这就是作用域链的问题。

解决方法

方法一

for (var i = 0; i< 10; i++){
   setTimeout((i) => {
      console.log(i)
   }, 1000,i);
}

最精简解决方案

方法二

for (let i = 0; i< 10; i++){
   setTimeout(() => {
      console.log(i) 
   }, 1000);
}

最优解决方案，利用let形成块级作用域

方法三

for (var i = 0; i< 10; i++){
  ((i)=>{
    setTimeout(() => {
      console.log(i)
    },1000);
  })(i)
}

IIFE(立即执行函数)，类似于let生成了块级作用域。

方法四

1
2
3

for (var i = 0; i< 10; i++){
   setTimeout(console.log(i),1000);
}

直接输出，没有延迟

方法五

1
2
3

for (var i = 0; i< 10; i++){
   setTimeout((()=>console.log(i))(),1000);
}

同上

方法六

for (var i = 0; i< 10; i++){
      try{
        throw i
      }catch(i){
        setTimeout(() => {
          console.log(i)
        }, 1000)
      }
}
console.time('start');

setTimeout(function() {
  console.log(2);
}, 10);

setImmediate(function() {
  console.log(1);
});

new Promise(function(resolve) {
  console.log(3);
  resolve();
  console.log(4);
}).then(function() {
  console.log(5);
  console.timeEnd('start')
});

console.log(6);

process.nextTick(function() {
  console.log(7);
});

console.log(8);

3.13 js执行顺序的题目，涉及到settimeout、console、process.nextTick、promise.then

console.time('start');

setTimeout(function() {
  console.log(2);
}, 10);

setImmediate(function() {
  console.log(1);
});

new Promise(function(resolve) {
  console.log(3);
  resolve();
  console.log(4);
}).then(function() {
  console.log(5);
  console.timeEnd('start')
});

console.log(6);

process.nextTick(function() {
  console.log(7);
});

console.log(8);

参考答案：

综合的执行顺序就是：3——>4——>6——>8——>7——>5——>start: 7.009ms——>1——>2

解析：

本题目，考察的就是 node 事件循环 Event Loop 我们可以简单理解Event Loop如下：

所有任务都在主线程上执行，形成一个执行栈(Execution Context Stack)
在主线程之外还存在一个任务队列(Task Queen),系统把异步任务放到任务队列中，然后主线程继续执行后续的任务
一旦执行栈中所有的任务执行完毕，系统就会读取任务队列。如果这时异步任务已结束等待状态，就会从任务队列进入执行栈，恢复执行
主线程不断重复上面的第三步

在上述的例子中，我们明白首先执行主线程中的同步任务，因此依次输出3、4、6、8。当主线程任务执行完毕后，再从Event Loop中读取任务。

Event Loop读取任务的先后顺序，取决于任务队列（Job queue）中对于不同任务读取规则的限定。

在Job queue中的队列分为两种类型：

宏任务 Macrotask宏任务是指Event Loop在每个阶段执行的任务

微任务 Microtask微任务是指Event Loop在每个阶段之间执行的任务

我们举例来看执行顺序的规定，我们假设

宏任务队列包含任务: A1, A2 , A3

微任务队列包含任务: B1, B2 , B3

执行顺序为，首先执行宏任务队列开头的任务，也就是 A1 任务，执行完毕后，在执行微任务队列里的所有任务，也就是依次执行B1, B2 , B3，执行完后清空微任务队中的任务，接着执行宏任务中的第二个任务A2，依次循环。

了解完了宏任务 Macrotask和微任务 Microtask两种队列的执行顺序之后，我们接着来看，真实场景下这两种类型的队列里真正包含的任务（我们以node V8引擎为例），在node V8中，这两种类型的真实任务顺序如下所示：

宏任务 Macrotask队列真实包含任务：

1	script(主程序代码),setTimeout, setInterval, setImmediate, I/O, UI rendering

微任务 Microtask队列真实包含任务：

1	process.nextTick, Promises, Object.observe, MutationObserver

由此我们得到的执行顺序应该为：

1	script(主程序代码)—>process.nextTick—>Promises...——>setTimeout——>setInterval——>setImmediate——> I/O——>UI rendering

在ES6中宏任务 Macrotask队列又称为ScriptJobs，而微任务 Microtask又称PromiseJobs

我们的题目相对复杂，但是要注意，我们在定义promise的时候，promise构造部分是同步执行的

接下来我们分析我们的题目，首先分析Job queue的执行顺序：

1	script(主程序代码)——>process.nextTick——>promise——>setTimeout——>setImmediate

主体部分：定义promise的构造部分是同步的，因此先输出3、4 ，主体部分再输出6、8（同步情况下，就是严格按照定义的先后顺序）
process.nextTick: 输出7
promise：这里的promise部分，严格的说其实是promise.then部分，输出的是5、以及 timeEnd(‘start’)
setImmediate：输出1，依据上面优先级，应该先setTimeout，但是注意，setTimeout 设置 10ms 延时
setTimeout ：输出2

3.1 promise和 async await 区别

两者的区别

3.2 defer和async区别

3.3. 同步和异步

3.4 实现异步的方法

3.5 怎么解决callback多层嵌套

3.6 promise的介绍与使用

3.7 Promise.all

3.8 与promise.all相反的是哪一个

3.9 promise实现文件读取

3.10 用js实现sleep，用promise

3.11 实现一个 Scheduler 类，完成对Promise的并发处理，最多同时执行2个任务

3.12 循环i，setTimeout 中输出什么，如何解决（块级作用域，函数作用域）

3.13 js执行顺序的题目，涉及到settimeout、console、process.nextTick、promise.then

你别睡这么晚