ES6异步解决方案Promise

JS经常会遇到一些异步任务：
（1）ajax请求服务器（2）监听按钮是否被点击（3）setTimeout等待一段时间后做某些事情。

ES6的异步处理模型

分为两个阶段和三个状态。
两个阶段：unsettled（未决），settled（已决）
三种状态：pending（挂起），resolved（完成），rejected（失败）

Promise

通过new promise（）创建一个任务对象。

function matchingPlayer(callback){
    return new Promise((resolve,reject) => {
        // 书写该任务一开始要执行的东西
        // 描述这个任务的过程
        setTimeout(()=>{
            resolve({
                player1:{
                    name:'x',
                },
                player2:{
                    name:'n',
                }
            })
        })
    })
}


var pro = new Promise((resolve,reject) => {
    console.log('start');
    setTimeout(() => {
        if(Math.random() < 0.5){
            resolve(1)
        }else{
            reject(2)
        }
    },1000)
})

△注意：
1.任务一旦进入已决状态之后，所有企图改变任务状态的代码都将要失效。
2.以下代码可以让任务到达rejected状态
（1）调用reject（2）代码执行报错（3）抛出错误

抛出错误后？怎么处理 用then方法；

pro.then(
    (data) => {
        console.log('start',data)
    },
    (err) => {
        console.log('shibai',err)
    }
    );

pro.then((data) => {
    console.log('start',data)
})
.catch((err) => {
    console.log()
})

pro.then((data) => {
    return data*2;
}).then((data) => {
    console.log()
})

Promise解决回调地狱，使回调变得可控

  match().then(palyer => {
            console.log('start',palyer1.name,palyer2.name);
            return pick(palyers)
        }).then((palyers) => {
            console.log(
                '完成',
                palyers.palyer1.name
            );
            return battle(palyers);
        })
        .then((palyers) => {
            if(palyers.palyer1.isWin){
                console.log(palyer1.name,'shengchu')
            }else{
                console.log()
            }
        })

注意：后续处理函数一定放在微队列中。

ES7

  async function text(){
            var players = await match();
            console.log('start',players.player1.name);
            players = await pick(players);
            console.log(
                'wancheng',
                players.player1.name,
            );
            players = await battle(players);
            if(players.player1.isWin){
                console.log()
            }else{
                console.log()
            }
        }
        text();

面试题：

了解promise吗

1.promise是一种异步编程的解决方案，有三种状态：pending（进行中），resolved(已完成),rejected(已失败)，当promise由pending转换成resolved或者rejected的时候就会执行相应的方法。

2.他的特点是只有异步操作的结果，可以决定当前是哪一种状态，任务的其他操作都无法改变这个状态。而且状态一旦改变就没有办法再次改变状态。

Promise可以解决什么？

1.回调地狱，可以使回调变得可控。
2.可以支持多个并发请求，获取并发请求中的数据。
3.代码可读性好。

Promise如何使用？

1.创建一个promise实例
2.创建完成之后用then方法分别指定resolved和rejected状态的回调函数。
3.用try catch预防异常

Promise常用的方法有哪些？作用？

1.promise.resolve(value)
该方法返回一个以 value 值解析后的 Promise 对象

2.Promise.reject
返回的 promise 对象的状态为 rejected

3.Promise.race
类方法，多个 Promise 任务同时执行，返回最先执行结束的 Promise 任务的结果，不管这个 Promise 结果是成功还是失败

4.Promise.all
类方法，多个 Promise 任务同时执行
如果全部成功执行，则以数组的方式返回所有 Promise 任务的执行结果。 如果有一个 Promise 任务 rejected，则只返回 rejected 任务的结果

Promise 在事件循环中的执行过程是怎样的？

Promise在初始化时，传入的函数是同步执行的，然后注册 then 回调。注册完之后，继续往下执行同步代码，在这之前，then 中回调不会执行。同步代码块执行完毕后，才会在事件循环中检测是否有可用的 promise 回调，如果有，那么执行，如果没有，继续下一个事件循环

手写Promise与ajax的结合？

function promiseGet (url) {
  return new Promise((resolve, reject) => {
    let xhr = new XMLHttpRequest()
    xhr.open('GET', url, true)
    xhr.onreadystatechange = function () {
      if (this.readyState === 4) {
        if (this.status === 200) {
          resolve(this.responseText,this)
        } else {
          let resJson = {
            code: this.status,
            response: this.response
          }
          reject(resJson, this)
        }
      }
    }
  })