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调试代码/