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