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