es6 async函数的基本用法

async函数的基本用法

async函数返回一个 Promise 对象，可以使用then方法添加回调函数。当函数执行的时候，一旦遇到await就会先返回，等到异步操作完成，再接着执行函数体内后面的语句。

下面是一个例子。

async function getStockPriceByName(name) {
const symbol = await getStockSymbol(name);
const stockPrice = await getStockPrice(symbol);
return stockPrice;
}
getStockPriceByName('goog').then(function (result) {
console.log(result);
});

上面代码是一个获取股票报价的函数，函数前面的async关键字，表明该函数内部有异步操作。调用该函数时，会立即返回一个Promise对象。

下面是另一个例子，指定多少毫秒后输出一个值。

function timeout(ms) {
return new Promise((resolve) => {
setTimeout(resolve, ms);
});
}
async function asyncPrint(value, ms) {
await timeout(ms);
console.log(value);
}
asyncPrint('hello world', 50);

上面代码指定 50 毫秒以后，输出hello world。

由于async函数返回的是 Promise 对象，可以作为await命令的参数。所以，上面的例子也可以写成下面的形式。

async function timeout(ms) {
await new Promise((resolve) => {
setTimeout(resolve, ms);
});
}
async function asyncPrint(value, ms) {
await timeout(ms);
console.log(value);
}
asyncPrint('hello world', 50);

ES6 async函数有多种使用形式。

// 函数声明
async function foo() {}
// 函数表达式
const foo = async function () {};
// 对象的方法
let obj = { async foo() {} };
obj.foo().then(...)
// Class 的方法
class Storage {
constructor() {
this.cachePromise = caches.open('avatars');
}
async getAvatar(name) {
const cache = await this.cachePromise;
return cache.match(`/avatars/${name}.jpg`);
}
}
const storage = new Storage();
storage.getAvatar('jake').then(…);
// 箭头函数
const foo = async () => {};

es6 async函数的基本用法相关推荐

es6 async函数的实现原理
async函数的实现原理 async函数的实现原理,就是将 Generator函数和自动执行器,包装在一个函数里. async function fn(args) { // ... } // 等同于 ...
es6 async函数的语法
async函数的语法 async函数的语法规则总体上比较简单,难点是错误处理机制. 返回 Promise 对象 async函数返回一个 Promise 对象. async函数内部return语句返回的 ...
ES6 async函数（超级详细、易懂）
下面是对 ES6 async函数的整理,希望可以帮助到有需要的小伙伴~ 文章目录 async函数是什么异步函数声明式异步函数表达式返回Promise对象 await表达式 await处理错误 a ...
es6 async函数的异步迭代器
async函数的异步迭代器 <迭代器>一章说过,Iterator 接口是一种数据遍历的协议,只要调用迭代器对象的next方法,就会得到一个对象,表示当前遍历指针所在的那个位置的信息.nex ...
es6 async函数实例：按顺序完成异步操作
async函数实例:按顺序完成异步操作实际开发中,经常遇到一组异步操作,需要按照顺序完成.比如,依次远程读取一组 URL,然后按照读取的顺序输出结果. ES6 Promise 的写法如下. func ...
es6 async函数与其他异步处理方法的比较
async函数与其他异步处理方法的比较我们通过一个例子,来看 async函数与 Promise.Generator函数的比较. 假定某个 DOM 元素上面,部署了一系列的动画,前一个动画结束,才能开 ...
【ES6】异步操作和async函数
[ES6]异步操作和async函数一.基本概念二.回调函数三.Promise 四.async函数查看更多ES6教学文章: 参考文献引言:ES6新增的Generato.Promise.asyn ...
async 函数的含义和用法
一.终极解决异步操作是 JavaScript 编程的麻烦事,麻烦到一直有人提出各种各样的方案,试图解决这个问题. 从最早的回调函数,到 Promise 对象,再到 Generator 函数,每次都有 ...
浅谈async函数await用法
async和await相信大家应该不陌生,让异步处理变得更友好. 其实这玩意儿就是个Generator的语法糖,想深入学习得去看看Generator,不然你可能只停留在会用的阶段. 用法很简单,看代码 ...

es6 async函数的基本用法

async函数的基本用法

es6 async函数的基本用法相关推荐

最新文章

热门文章