[TOC] >[success] # ES6 Promise解决异步代码 ~~~ 'Promise'是一个'构造函数'，他有一个参数，参数的类型为'Function'类型，这个function有2个参数， 一个是'resolve表示成功'的返回值，另一个是'reject表示失败'的回调函数。 ~~~ <br/> >[success] ## 基础用法 封装时候这么写： ~~~ 变量写法： let promise = new Promise((resolve, reject) =>{ api(parameter).then(res => { // 成功就把res返回出去 resolve(res) }).catch(e =>{ // 失败就返回错误，可以直接这样写，new Error(' 报错了 ') reject(new Error(e)) }) }) 函数写法： function promise (){ return new Promise((resolve, reject) =>{ api(parameter).then(res => { // 成功就把res返回出去 resolve(res) }).catch(e =>{ // 失败就返回错误，可以直接这样写，new Error(' 报错了 ') reject(new Error(e)) }) }) } ~~~ 调用时候这么写： ~~~ // 变量写法这样调用 promise.then(res =>{ // 这里写成功时候要执行的代码 }).catch(e =>{ 这里写失败时候要执行的代码 }) // 函数写法这样调用 promise().then(res =>{ // 这里写成功时候要执行的代码 }).catch(e =>{ 这里写失败时候要执行的代码 }) ~~~ <br/> >[success] ## 用Promise解决异步问题 ~~~ 下面的代码就是一个经典的'异步'问题，我们期望的是先打印出'呵呵哒',后打印'嘎嘎'，实际上相反。 ~~~ ~~~ setTimeout(() => { console.log('呵呵哒') },500) setTimeout(() => { console.log('嘎嘎') },300) 打印结果： // '嘎嘎' // '呵呵哒' ~~~ <br/> >[success] ### 用.then的链式写法解决异步问题 ~~~ 首先封装2个'Promise'方法，'Fun1'和'Fun2' ~~~ ~~~ function Fun1(){ return new Promise((resolve, reject) => { setTimeout(function(){ console.log('呵呵哒') resolve(1) },500) }) } function Fun2(){ return new Promise((resolve, reject) => { setTimeout( function(){ console.log('嘎嘎') resolve(2) },300) }) } ~~~ 调用时这样写: ~~~ function Fun3(){ Fun1().then(res => { return Fun2() }).then(res => { // 执行要执行的代码 }).catch(e => { // 只要Fn1报错了就错误就会直接抛到这里 }) } Fun3() 打印结果： // 呵呵哒 // 嘎嘎 ~~~ <br/> >[success] ### 用ES7 async 和 await来解决异步 es7的写法很简洁，很方便。 ~~~ async function Fun3(){ try{ let res = await Fun1() let res2 = await Fun2() } catch (e) { // 只要Fn1报错了就错误就会直接抛到这里 } } ~~~