JS中的异步处理。
在javascript中，语言的执行环境是”单线程”。
所谓“所谓"单线程"，就是指一次只能完成一件任务。如果有多个任务，就必须排队，前面一个任务完成，再执行后面一个任务“。
处理js异步的方法：
async函数。
async函数返回一个Promise对象。
举个例子：
async function getStockPriceByName(name){
var symbol = await getStockSymbol(name);
var stockPrice = await getStockPrice(symbol);
return stockPrice;
}
getStockPriceByName('krislee').then(function(result){
console.log(result);
});
函数前面的async关键字，表明该函数内部有异步操作。调用该函数时，会立即返回一个Promise对象。
再举个例子：指定多少毫秒后输出一个值。
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);
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('/acatars/$(name).jpg');
}
const storage = new Storage();
storage.getAvatar('jake').then(...);
//箭头函数
const foo = async () =>{};
语法
返回Promise对象。
async function f(){
return 'hello world';
}
f().then(v=>console.log(v))
Promise 对象的状态变化
async 函数返回的Promise，必须等到内部所有await命令后面的Promise对象执行完，才会发生状态改变，除非遇到return 语句或者抛出错误，也就是说，只有async函数内部的异步执行玩，才会执行then方法指定的回调函数。
eg：
async function getTitle(url){
let response = await fetch(url);
let html = await response.text();
return html.match(/<title>([\s\S]+)<\/title>/i)[1];
}
getTitle('https://tc39.github.io/ecma262/').then(console.log)
await命令
正常请客下，await命令后面是一个Promise对象。如果不是，会被转成一个立即resolve的Promise对象。
async funtion f(){
return await 123;
}
f().then(v=>console.log(v))
如果是reject状态，则reject的参数会被catch方法的回调函数接收到。
async function f() {
await Promise.reject('出错了');
}
f()
.then(v => console.log(v))
.catch(e => console.log(e))
// 出错了
只要一个await语句后面的Promsie变为reject，那么整个async函数都会中断执行
有时，我们希望即使前一个异步操作失败，也不要中断后面的异步操作。
这时可以将第一个await放在try...catch结构里面，这样不管这个异步操作是否成功，第二个await都会执行。
eg:
async function f(){
try{
awiat Promise.reject('出错了');
}catch(e){
}
return await Promise.resolve('hello world');
}
f().then(v=>console.log(v))
此外还有另一个方法是await 后面的Promise对象再跟一个catch方法，处理前面可能出现的错误。
async function f(){
awiat Promise.reject('chucuole').catch(e => console.log(e));
return await Promise.resolve('hello world');
}
f().then(v=>console.log(v))
//出错了
//hello world
错误处理
async function f(){
await new Promise(function (resolve,reject){
throw new Error('出错了');
})
}
f().then(v=>console.log(v)).catch(e=>console.log(e))
上面代码中，async函数f执行后，await后面的Promise对象会抛出一个错误对象，导致catch方法的回调函数被调用。
如果有多个await命令，可以统一放在try...catch结构中。
async function main() {
try {
var val1 = await firstStep();
var val2 = await secondStep(val1);
var val3 = await thirdStep(val1, val2);
console.log('Final: ', val3);
}
catch (err) {
console.error(err);
}
return await('hello world');
}
使用注意点
-
第一点 await命令后面的Promise对象，运行结构可能是rejected，所以最好把await命令放在try...catch代码块中。
-
多个await命令后面的异步操作，如果不存在继发关系，最好让它们同时触发。
let foo = await getFoo();
let bar = await getBar();上面代码中，getFoo,getBar是两个独立的异步操作（互不依赖），被写成继发关系，这样比较耗时，因为只有getFoo完成后，才会执行getBar，完全可以让它们同时触发。
写法一
Promise.all是放在数组里。
写法二
let fooPromise = getFoo(); let barPromise = getBar(); let foo = await fooPromise; let bar = await barPromise;写法2的阅读性较高。
-
await命令只能用在async函数之中，如果用在普通函数，就会报错。
-
如果确实希望多个请求并发执行，可以使用Promise.all方法。当三个请求都会resolved时候，下面两种写法效果相同。
async function dbFuc(db) {
let docs = [{}, {}, {}];
let promises = docs.map((doc) => db.post(doc));
let results = await Promise.all(promises);
console.log(results);
}
or
async function dbFuc(db) {
let docs = [{}, {}, {}];
let promises = docs.map((doc) => db.post(doc));
let results = [];
for (let promise of promises) {
results.push(await promise);
}
console.log(results);
}
async 函数实现原理。
async函数的实现原理，其实async就是Generator函数的语法糖。就是将Generator函数和自动执行器，包装在一个函数里。（Generator，spawn）
网友评论