promise-async-await

　　异步就是比较耗时的操作，CPU缓存的速度是最快的，然后是内存，然后是硬盘，所以从硬盘上读取文件是非常慢的，js认为从硬盘上读取文件是一个异步操作；另外一种是网络请求，这种也是异步的；操作dom节点也是非常耗时的，但却是同步操作，因为作为异步来处理比较麻烦。

　　promise就是一个承诺，在js中就是承诺过段时间会返回一个结果，而这个过段时间就指的是异步操作。

　　promise本质上是一个有限状态机，状态机指的是根据特定的条件按照一定的顺序进行转换，而且过程不可逆。每个promise实例都有三种状态：pending、resolve、reject。在状态机中，需要某些条件才能将自己的状态触发。

　　状态只有两种：从初始状态到成功：pending->resolve;从初始状态到失败：pending->reject。promise实例状态机状态的变化会触发promise原型上的then或catch方法的执行

　　DOM规范是运行在浏览器上的规范，比如navigator,只在dom上有，在node上没有；而ECMAScript规范，不仅在浏览器中可以使用，也可以在node.js中使用。

如何构建一个promise

　　构建一个promise实例需要给promise构造函数传入一个有两个形参的函数，第一个形参运行后会让promise实例处于resolve状态，所以一般用resove表示成功状态；第二个形参运行后会让promise实例处于reject状态，所以一般用reject表示失败状态。new出来的promise实例，有两个方法（then,catch，then捕获成功的操作，catch捕获失败的操作。），并且可以链式调用。在使用的时候，要将then放在catch的上面，这是因为then里的错误也可以在catch中捕获到，如代码所示：

let promiseInstance = new Promise((resolve,reject) =>{
   setTimeOut(() => {
         resolve('this is resolve.')
   })
})
promiseInstance
.then((value)=>{console.log(value)}).catch((err)=>{console.error(err)})

　　　　promise是处理异步的，而网络请求是异步最常见的场景，所以可以用promise封装一个网络请求的方法，所以很多时候promise的实例是作为函数的返回值是，调用函数后可以对返回值的Promise对象进行相应的操作

function ajaxPromise(){
　　return new Promise((resolve,reject) => {
　　　　let xhr = new XMLHttpRequest();
　　　　xhr.open('get',queryUrl,true);
　　　　xhr.send(null);
　　　　xhr.onReadyStatechange = () => {
　　　　　　if(xhr.readyState === 4){
　　　　　　　　if(xhr.status === 200){
　　　　　　　　　　resolve(xhr.responseText);
　　　　　　　　}else{
　　　　　　　　　　reject(xhr.responseText)
　　　　　　　　}
　　　　　　}
　　　　}
　　})
}

ajaxPromise('http://api.github.com/')
.then((value) => {
　　console.log(value);
})
.catch((err) => {
　　console.error(err)
})

then与catch的使用

　　状态机的状态是不可逆的，所以执行了resolve方法，就算再执行reject方法，也不会有效果了。

promise的api

　　promise实例上的方法

　　　　promise.prototype.then()

　　　　promise.prototype.catch()

　　promise构造函数上的方法

　　　　promise.all(Array) 返回一个promise，等待参数中所有的promise都处于resolve状态后会触发返回的promise实例的resolve状态

　　　　promise.race(Array) 返回一个promise，参数中第一个执行完成的状态决定出发哪个函数

　　　　promise.resolve() 立刻返回一个resolve状态的实例

　　　　promise.reject() 立刻返回一个reject状态的实例

let promise1 = new Promise((resolve,reject)=>{
    setTimeout(resolve,1000,'success1')
})
let promise2 = new Promise((resolve,reject)=>{
    setTimeout(resolve,1000,'success12')
})
let promise3 = new Promise((resolve,reject)=>{
    setTimeout(resolve,1000,'success3')
})
Promise.all([promise1, promise2, promise3]).then((value)=>{
    console.log(value)
}).catch((err)=>{
    console.error(err)
})

tips:setTimeOut的第三个参数，是第一个函数参数执行的时候，要传入的参数

promise.then的执行时机

　　promise.resolve是处理异步问题的，所以会先把同步的代码执行完，再执行promise.resolve返回实例的then或catch的代码

　　而Promise构造函数是同步的，then方法是异步的。setTimeOut的执行时机是最晚的

promise并不是处理异步最好的方法，比如回调金字塔的问题并没有解决，只是看起来更清晰了。解决异步最好的方法是async

generator

　　有点像一个函数内部有多个函数，是一个状态机，yield生成

function* genFunc(){
　　yield 'hello';
　　yield 'generator';
　　yield '!'
　　return 'end'//generator不建议使用return

}

　generator返回的不是返回值，也不是一个生成的内容，而是一个迭代器，迭代器是一个可遍历的对象，迭代器有个next方法。通过for-of循环遍历迭代器

连续运行的generator

function* genFunc(initValue){
　　let first = yield new Promise((resolve,reject)=>{
　　　　setTimeOut(resolve,1000,'1'+initValue)
　　})
　　let second = yield new Promise((resolve,reject)=>{
　　　　setTimeOut(resolve,1000,'2-'+first)
　　})
　　let third = yield new Promise((resolve,reject)=>{
　　　　setTimeOut(resolve,1000,'3-'+second)
　　})
　　let genHandler = genFunc(1)
　　genHandler.next().value.
　　then((value) => {
　　　　genHandler.next(value).value.
　　　　then((value) => {
　　　　　　then((value) => {
　　　　　　　　console.log(value);
　　　　　　})
　　　　})
　　})
} 

co库与async函数

　　import co from 'co'

　　上述代码中依然有回调金字塔，可以用co库解决

co(genFunc(1)).then((value) => {console.log(value)})//2-11

　　async相当于是generator+promise+co，是es7的新语法，目前没有浏览器实现，所以需要用webpack+babel编译一下才可以运行。

如何同步异步请求，即两次请求，异步执行，如何在两次请求都执行完成的情况下执行后续程序

function request(content){
  setTimeout(()=>{
     document.body.append(content)
  },Math.floor(Math.random()*1000)) //时间控制为不确定
}
request('hello')
request('world')
//如何在两次request完成后执行代码。可以使用promise.all,只要两个异步有一个完成就可以，可以使用promise.race
docuement.body.append('finished')

如何处理回调嵌套回调

//珠峰课堂是先去服务端拿取token,然后再去拿课程
fetch('https://ketang.zhufengpeixun.cn/token')
.then(response => {
    response.json().then(tokenJson =>{
         const token = tokenJson
         fetch('https:ketang.zhufengpeixun.cn/course')
         .then( response =>{
            response.json().then(tokenJson =>{

            }
         })
    })
})

promise定义:用于异步计算，代表一个当前、未来或永远不可用的值　　

//promise中的代码段被直接执行了
const promise = new Promise((resolve,reject){
    document.body.append('hello')
})
const a = () =>{
    document.body.append('world')
}
a();

//执行结果是hello world

//用promise表示一个未来的值
function resolve_example(){
  const promise = new Promise((resolve,reject)=>{
     document.body.append('start.....');
     setTimeout(()=>{／/promise代表了一个未来值
        resolve('done')
     },2000)
  })
  return promise;
}
const promise = resolve_example();
//得到一个未来完成的值,此处data是异步返回的部分
promise.then(data => {
   document.body.append(data)
})

 

promise有三种状态，当被new出来的时候属于pending状态，使用resolve则是fulfill状态，使用reject则是fail状态

Executor是构造Promise的唯一参数，在promise构造的时候会被马上执行