ES6 Promise 参考和总结

JS promise 简介 https://developers.google.com/web/fundamentals/primers/promises?hl=zh-cn

Promise 对象 http://es6.ruanyifeng.com/#docs/promise

MDN Promise https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Promise

谈谈 ES6 的 Promise 对象 https://segmentfault.com/a/1190000002928371

https://www.liaoxuefeng.com/wiki/001434446689867b27157e896e74d51a89c25cc8b43bdb3000/0014345008539155e93fc16046d4bb7854943814c4f9dc2000 JavaScript：彻底理解同步、异步和事件循环(Event Loop)

https://segmentfault.com/a/1190000004322358

JavaScript 运行机制详解(理解同步、异步和事件循环) https://juejin.im/entry/59716961f265da6c2328af95

视频：

JavaScript Promises In 10 Minutes

https://youtu.be/DHvZLI7Db8E Promise最基础示例

let p = new Promise((resolve,reject)=>{ let a = 2; if(Math.random()>0.5){ resolve('Success');//如果条件如此我按resovle这么做 }else{ reject('Failure');//如果条件如此我按reject这么做 } }); p.then((message)=>{//message即为resole('balabal')定义的时候，要传的参数 console.log('This is in then '+message);//This is in then Success }).catch((message)=>{ console.log('This is in catch '+message);//This is in catch Failure })

Promise.all()的应用

const recordViewOne = new Promise((resolve,reject)=>{ resolve('Video1 Recorded') }) const recordViewTwo = new Promise((resolve,reject)=>{ resolve('Video2 Recorded') }) const recordViewThree = new Promise((resolve,reject)=>{ setTimeout(()=>resolve('Video3 Recorded'),3000); }) Promise.all([ recordViewThree, recordViewOne, recordViewTwo,//这里的顺序3，1，2和打印的顺序一样。即全都执行完了，再按顺序打印。 ]).then((msg)=>{ console.log(msg); //Array(3) ["Video3 Recorded", "Video1 Recorded", "Video2 Recorded"]//3，1，2 }) Promise.race([ //只返回最早完成的一个 recordViewThree, recordViewOne, recordViewTwo,//这里的顺序3，1，2和打印的顺序一样。即全都执行完了，再按顺序打印。 ]).then((msg)=>{ console.log(msg); //Video1 Recorded }) //无论是all还是race都是同时执行的

JavaScript Async Await

https://youtu.be/V_Kr9OSfDeU async和await是Promise操作的语法糖。

//Part 3 async await function makeRequest(location) { console.log(`Makeing request to ${location}`) return new Promise((resolve, reject) => { if (location == 'Google') { resolve('Google says hi') } else { reject('We can only talk to Google') } }) } function processRequest(response) { return new Promise((resolve, reject) => { console.log(`Processing response`) resolve(`Extra Infomation +${response}`); }) } // 简单测试makeRequest() // makeRequest('Youtube') // .then(msg=>{console.log(msg)}) // .catch(msg=>{console.log(msg)}); // 组合 makeRequest()和processRequest() makeRequest('Google').then(response=>{ console.log('Resonse Recived') return processRequest(response) }).then(processedResponse=>{ console.log(processedResponse) }) //处理了又return一个Promise，于是可以链式调用 //使用async 和 await 简化代码 async function doWork(){ const response = await makeRequest('Google'); console.log('Resonse Recived') const processedResponse = await processRequest(response); console.log(processedResponse) } doWork();

使用了await之后，发现reject 无法正确的处理了。 解决办法：try-catch

async function doWork(){ try { const response = await makeRequest('Fackbook'); console.log('Resonse Recived') const processedResponse = await processRequest(response); console.log(processedResponse) } catch (err) { console.log(err) } } doWork();

如此便解决了。

利用Promise 和Async Await 的实例 Vuex 组合复杂的 Action https://vuex.vuejs.org/zh/guide/actions.html#组合-action

练习环境 VScode + Chrome http://shooterblog.site/2018/05/19/手把手教你用Vscode Debugger调试代码/