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) 转化

你可能感兴趣的:(实例,javascript,TypeScript)