记录promise 和 async那些事

Promise是一个对象，可以获取异步操作的消息。
一、Promise特点
对象的状态不受外界影响，一旦状态改变，就不会再变）（1）异步操作有三个状态（pending（进行中）、resolved（已成功）和rejected（已失败））：只有异步操作的结果可以决定当前是哪一种状态。任何其他操作都无法改变这个状态。
（2）只有两种状态切换：进行中=> 已成功，进行中=> 已失败。状态切换就会凝固，不会再改变。也就是说切换状态只会发生其中一种，不会同时存在两种都有的场景，再对Promise对象添加回调函数也会立即得到这个结果。所以：Promise就可以将异步操作以同步操作的流程表达出来。
Promise缺点
（1）一旦新建Promise就会立即执行，无法中途取消。
（2）如果不设置回调函数，Promise内部跑出的错误或者数据无法反应到外部。二、Promise基本用法
ES6规定，Promise对象是一个构造函数，用来生成Promise实例。
Promise实例生成后，可以用then方法分别指定resolve状态和rejected状态的回调函数resolve函数的作用是：（即从pending变为resolved）reject函数的作用是：（即从pending变为rejected）

function timeout(ms) {
    return new Promise((resolve, reject) => {
        console.log('promise创建立即执行')
        setTimeout(reject, ms, 'do somthing')//setTimeout 传参
        //setTimeout(resolve, ms, 'do somthing')    })
}
timeout(100).then((value) => {
    console.log('1',value)//do somthing
}).catch((Error) => {
	console.log('2',Error)
})
console.log('同步')
输出顺序：
promise创建立即执行
同步
do somthing

timeout函数触发生成返回Promise实例，此时是新建Promise就会立即执行，然后点then来指定状态的回调函数，将在当前脚本所有同步任务执行完成后才会执行，所以resolve方法最后执行。
Promise.prototype.then方法指定状态的回调函数,返回是一个新的Promise实例（注意，不是原来那个Promise实例），因此可以采用链式写法，即then方法后面再调用另一个then方法。
Promise实例具有then方法，也就是说then方法时定义在原型对象上的。Promise.prototype.catch方法是.then(null, rejection)的别名，用于指定发生错误时的回调函数。错误回调具有冒泡性质，会一直向后传递，直到被捕获为止。永久保持该状态，不会再变了(也就是说错误回调只会执行一次，后续不再触发)。同时错误能恢复(promise 会认为你已经恢复了该错误，promise 的状态会转变为 resolved)

timeout(100).then((value) => {
    console.log('1',value)//do somthing
}).catch((Error) => {
    console.log('2',Error)
})
等价于
timeout(100).then((value) => {
    console.log('1',value)//do somthing
}).then(null,Error =>{
	console.log('2', Error)
})

Promise.all(iterable) 方法返回一个 Promise 实例，返回顺序和数组顺序一致，不存在时间快慢之分，存在状态之分。无论怎么样输出都是p1优先p2。但是只要有一个promise 返回rejected，那么此实例回调失败（reject)。处理多个异步处理时非常有用。

Promise.all([p1, p2]).then((result) => {
    console.log(result)  
  }).catch((error) => {
    console.log(error)
  })

Promise.race(iterable) 方法返回一个 promise。赛跑，也就是谁快就执行谁，有时间快慢之分，没有状态之分。返回的 promise就会解决或拒绝。

Promise.race([p1, p2, p3]).then((result) => {
    console.log(result)  
  }).catch((error) => {
    console.log(error)
  })

Promise.race()实现接口超时限制

 Promise.race([
    axios.get(url),  //调用后端接口
    new Promise(function(resolve,reject){  //5秒后执行，如果后端接口没有返回，则直接返回error
        setTimeout(()=>{reject(new Error('request timeout')),5000})
    })
    .then((response)=>{
        //成功返回后处理的逻辑
    })
])

Promise resolve()用法Promise.resolve(‘foo’)
// 等价于
new Promise(resolve => resolve(‘foo’))
Promise reject()用法。Promise.reject(‘foo’)
// 等价于
new Promise(reject => reject(‘foo’))

几个注意点
（1）then() 返回一个 forked Promise(分叉的 Promise) // 第一种：如果 func1 抛出一个异常，func2 依然能执行

var p = new Promise(/*...*/);
p.then(func1);
p.then(func2);

// 第二种：如果 func1 中抛出异常，这个 promise 被 rejected了，结果 func2 被跳过不执行了

var p = new Promise(/*...*/);
p.then(func1)
 .then(func2);

（2）只能捕获来自上一级的异常 同级中的错误回调只有在 promise 被 rejected 或者 promise 自身抛出一个异常时才会被执行（throw new Error(“uhoh”)）。resolved状态A1抛出异常B2能捕获到。如果是promise 被 rejected。那么A2能触发。同时错误能被恢复 B1也会触发只是返回undefined。

function timeout(ms) {
    return new Promise((resolve, reject) => {
        setTimeout(resolve, ms, 'do somthing')
        //setTimeout(reject, ms, 'do somthing')
    })
}
timeout(100).then((value) => { 
	throw new Error("uhoh"); // A1
},(error) =>{
	console.log('2', error) // 同级A2
}).then((value)=>{
	console.log('3', value) // B1
},(Error) => {
	console.log('4',Error) // 捕获来自上一级异常B2
})

（3）错误能被恢复 没有重新抛出错误，promise 会认为你已经恢复了该错误，promise 的状态会转变为 resolvedPromise 可被视为洋葱的皮层，每一次调用 then 都会被添加一层皮层，每一个皮层表示一个能被处理的状态，在皮层被处理之后，promise 会认为已经修复了错误，并准备进入下一个皮层。

function timeout(ms) {
    return new Promise((resolve, reject) => {
       setTimeout(reject, ms, '1错误回调')
    })
}
timeout(100).then((value) => {
    console.log('1',value)
},(error) =>{
	console.log('2', error) // 抛出错误
}).then((value)=>{
	console.log('3', value)
	return new Promise((resolve, reject) => {
        setTimeout(reject, 100, 'd')
    })
},(Error) => {
	console.log('4',Error)
}).then((value)=>{
	console.log('5', value)
}).catch(error =>{
	console.log('最后', error)
})

（4）resolved 状态的 Promise 不会立即执行、Promise 能被暂停
新建Promise会立即执行，无法中途取消。
resolved 状态的 Promise是: Promise实例生成后.then指定状态的异步回调。Promise 能被暂停同样指的是在.then之后的异步回调中仅仅因为你已经在一个 then() 函数中执行过代码，并不意味着你不能够暂停 promise 去做其他事情。为了暂停当前的 Promise，或者要它等待另一个 Promise完成，只需要简单地在 then() 函数中返回另一个 Promise。
promise参考链接

async是Promise的加强版实际应用
（1）条件语句:async

const makeRequest = async () => {
  const data = await getJSON()
  if (data.needsAnotherRequest) {
    const moreData = await makeAnotherRequest(data);
    console.log(moreData)
    return moreData
  } else {
    console.log(data)
    return data    
  }
}

（2）中间值：调用promise1，使用promise1返回的结果去调用promise2，然后使用两者的结果去调用promise3。

const makeRequest = () => {
  return promise1()
    .then(value1 => {
      return Promise.all([value1, promise2(value1)])
    })
    .then(([value1, value2]) => {      
      return promise3(value1, value2)
    })
}

async中间值

const makeRequest = async () => {
  const value1 = await promise1()
  const value2 = await promise2(value1)
  return promise3(value1, value2)
}

（3）错误处理Async/await使得处理同步＋异步错误成为了现实。
我们同样使用try/catch结构，但是在promises的情况下，try/catch难以处理在JSON.parse过程中的问题，原因是这个错误发生在Promise内部。想要处理这种情况下的错误，我们只能再嵌套一层try/catch 。

function getJSON() {
	return new Promise((resolve,reject)=>{
		resolve()
	})
}
const mm = () => {
    try {
    	 getJSON()
        .then(result => {
            const data = JSON.parse(result)
            console.log(data)
        }).catch((err) => {
          console.log('inner',err)
       })
     }
    catch (err) {
        console.log('err', err)
    }
}
mm()

Async/await使得处理同步＋异步错误成为了现实

 function getJSON() {
    	return new Promise((resolve,reject)=>{
    		resolve()
    	})
    }
    const mm = async () => {
        try {
        	 const data = JSON.parse(await getJSON())
             console.log('data', data)
         }
        catch (err) {
            console.log('err', err)
        }
    }
    mm()

总之：async/await使得异步代码看起来像同步代码，代码会变得异常简单和直观。
async/await参考链接
督促自我，成长每一步。。。