async与await

1. 用 async 和 await 编写现代 JavaScript 异步代码 – JavaScript 完全手册（2018版）

2. 将 async 关键字添加到任何函数，意味着该函数将返回一个 promise 。

即使它没有明确的这么写出来，在内部也会使函数返回一个 promise 。

const aFunction = async () => {
  return 'test'
}
aFunction().then(alert) // This will alert 'test'

嗨哎呀呀，原来这么方便，原来都是手动添加promise的
可是什么时候resolve，什么时候rejected还是要专门写的呀

2. Long Term Support (LTS) 长期支持
3. 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 () => {};

4. async函数的语法规则总体上比较简单，难点是错误处理机制。
5. 阮一峰es6中有提到的 模拟各种错误

await Promise.reject('出错了')


throw new Error('出错了');

6. 下面两种写法，getFoo和getBar都是同时触发，这样就会缩短程序的执行时间。

// 写法一
let [foo, bar] = await Promise.all([getFoo(), getBar()]);

// 写法二
let fooPromise = getFoo();
let barPromise = getBar();
let foo = await fooPromise;
let bar = await barPromise;

7. 正确的写法是采用for循环；为啥不能用forEach

async function dbFuc(db) {
  let docs = [{}, {}, {}];

  for (let doc of docs) {
    await db.post(doc);
  }
}

自己的例子
async function foo(){
    let arr = [1,2,3]
  for(let i of arr){
    await bar(i)
  }
}

let bar = (i)=>{
    return new Promise((resolve)=>{
        setTimeout(()=>{
            console.log(i)
            resolve()
        },1000)
    })
}
foo()

8. 阮一峰的网站，文章偏向左边，右边空很多，我猜是为了方便打开console调试
9. 错误处理

一是用try...catch
二是await Promise.reject('出错了')
    .catch(e => console.log(e));
    
    
     https://github.com/lulusir/my-blog/issues/16
 // 因为async 返回的promise对象，所以可以使用catch
  const user4 = await fetchUser(true).catch(err => {
    console.error('user4 error:', err)
  })
 
  那不还是要判断user4来做后面的处理？

10. async标注后的函数 return的是promise，要用.then接

11. async里面用throw new Error('错误信息')，然后可以用try{}catch(err){} 来接收,也可以接在后面写.catch

    
    download.png

12. 代码的串行和并行；用几个方法分别去接受返回promise的方法，然后再await，让多个请求同时开始；或者使用Promise.all

13. 同步改异步；以及 自己写的sleep，以及console.time的用法获取代码运行的时间

    
    download.png

使用Promise.all来做异步

使用Promise.all来做异步

13. 代码执行的时间 console.time('aa') 和 console.timeEnd('aa') aa()
14. await 如果后面不是promise，则会隐式添加Promise

(async()=>{
    const number = await 800
    <!--上面等于-->
    <!--const number = await Promise.resolve(800)-->
    console.log(number)
})()

16. 循环中的异步，以及提到了bluebird这个库

    
    循环中的异步

17. await 在reject时就没有往下执行了

18. await 不做异步处理的话 就会阻塞，后面的不执行了；

如下捕捉的话就会执行  
    let res
res = await this.$api.test().catch(err=>{
        console.log('err',err)
        return
    })

console.log('res',res)

用try catch 也是会往下执行
let res
    try {
        res = await this.$api.test()
    } catch (e) {
        this.$api.msg('wocuo le ')
        console.log(e)
    }

console.log('res',res)