async/await与promise 异步解决方案

参考： https://www.cnblogs.com/CandyManPing/p/9384104.html

async await demo

在api中，把结果return 出去

export async function getRetailUnitPrice () {
		const reqBody = await get('/race/spot/racespot/enter/dayahead')
 		return reqBody}

vuex 中把结果commit：

async getRealTimeRetailUnitPrice ({commit}) {
	const {output} = await getRetailUnitPrice()
	commit(types.PLANT_REALTIME_DAYAHEAD, {output})}

在vue中代码

try {this.$store.dispatch('getRealTimeRetailUnitPrice')
	} catch (e) {
		this.$Message.error(e)
}

返回promise 对象

如果使用Promise 就是把回调放在then()中。

promise 状态

• pending：初始状态，既不是成功，也不是失败状态
• fulfilled：操作成功
• rejected：操作失败

function say() {
        return new Promise(function(resolve, reject) {
            setTimeout(function() {
                let age = 26
                reject(`hello, joel，发生了异常。今年我 ${age} 岁`);
            }, 1000);
        });
    }
    async function demo() {
        try {
            const v = await say(); // 输出：hello, joel，发生了异常。今年我 26 岁  等待这个say 的异步，如果成功把回调 resole 函数的参数作为结果
            console.log(v);     // 成功状态
        } catch (e) {
            console.log(e)      // 失败状态
        }
    }
    demo();

async/await

async/await 相比原来的Promise的优势在于处理 then 链，不必把回调嵌套在then中，只要await 即可

function sing() {
        return new Promise(function(resolve, reject) {
            setTimeout(function() {
                resolve(`来一首好听的歌吧~~~`);
            }, 1000);
        });
    }
    async function demo() {
        try {
            const v = await say(); 
            const s = await sing(); 
            console.log(v); // 输出：hello, joel。今年我 26 岁
            console.log(s) // 来一首好听的歌吧~~~
        } catch (e) {
            console.log(e)
        }
    }
    demo();

1. async 告诉程序这是一个异步，awiat 会暂停执行async中的代码，等待await 表达式后面的结果，跳过async 函数，继续执行后面代码
2. async 函数会返回一个Promise 对象，那么当 async 函数返回一个值时，Promise 的 resolve 方法会负责传递这个值；当 async 函数抛出异常时，Promise 的 reject 方法也会传递这个异常值
3. await 操作符用于等待一个Promise 对象，并且返回 Promise 对象的处理结果（成功把resolve 函数参数作为await 表达式的值），如果等待的不是 Promise 对象，则用 Promise.resolve(xx) 转化