async 与 await 基础详解

骑猪看日落 2022-10-23 12:43 223阅读 0赞

## （一）async，await的作用 ##

**async ， await** 一起使用，实际是为了解决异步操作的新方法  
但是区别于 **promise** ，**promise** 是对异步操作进行封装，解决回调地狱的一种解决方案，本质上是为了让程序员书写异步代码更加方便，阅读起来更加简洁，明朗，可以说**promise**就是异步操作的一个容器

而**async ， await**，则是**promise**的一个容器，他对已经包裹好的异步操作的**promise**进行二次包装，使异步代码看起来像同步一样执行，比**promise**更加形象的把代码呈现出来

**记得引入一下 `axios 的 cdn` 或者自己 `npm install axios`一下**

cdn地址：<script src="https://unpkg.com/axios/dist/axios.min.js"></script>

**传统promise形式**

// 简单封装一下axios函数
    const getAction = (url) => axios({  method: 'get', url });
    const url = "https://api-hmugo-web.itheima.net/api/public/v1/home/catitems"
    function getItems(url) { 
      getAction(url)
        .then((value) => { 
          console.log(value)
        })
    }
    getItems(url)

**async，await形式**

async，await形式的代码看起来会更像同步执行，阅读体验也很不错

// 简单封装一下axios函数
    const getAction = (url) => axios({  method: 'get', url });
    const url = "https://api-hmugo-web.itheima.net/api/public/v1/home/catitems"
    async function getItems(url) { 
      const response = await getAction(url)
      console.log(response)
    }
    getItems(url)

## （二）async，await的基本知识点 ##

**async函数返回一个 Promise 对象，可以使用then方法添加回调函数。**

// 简单封装一下axios函数
    const getAction = (url) => axios({  method: 'get', url });
    const url = "https://api-hmugo-web.itheima.net/api/public/v1/home/catitems"
    async function getItems(url) { 
      return await getAction(url)
    }
    getItems(url).then((value) => { 
      console.log(value)
    })

**正常情况下，await命令后面是一个 Promise 对象，返回该对象的结果。如果不是 Promise 对象，就直接返回对应的值。**

async function f() { 
      // 等同于
      // return 'hello world';
      return await 'hello world';
    }
    f().then(v => console.log(v))
    // "hello world"

**这里面实际上有一个隐式的调用，会隐式调用`Promise.resolve()`**

async function f() { 
      // 等同于
      // return 'hello world';
      // return await 'hello world';
      return await Promise.resolve('hello world');
    }
    f().then(v => console.log(v))

**async函数运行后一旦遇到await就会先返回，等到异步操作完成，再接着执行函数体内后面的语句（简单说就是，async的函数虽然是异步的，但是函数里面的执行顺序却是同步的）**

比如下面这个例子，定义一个异步函数（定时器），5秒后才会执行下一句 await 语句

// 简单封装一下axios函数
    const getAction = (url) => axios({  method: 'get', url });
    const url = "https://api-hmugo-web.itheima.net/api/public/v1/home/catitems"
    // 定时器
    async function timeout(ms) { 
      await new Promise((resolve) => { 
        setTimeout(resolve, ms);
      });
    }
    
    async function getItems(url, ms) { 
      console.log(`${ ms / 1000}秒后输出response...`)
      await timeout(ms)
      const response = await getAction(url)
      console.log(response)
    }
    getItems(url, 5000)

## （三）async 函数有多种使用形式。 ##

**async 不仅可以用在函数声明上，还可以用在函数表达式，箭头函数，对象的方法，Class 的方法上**

// 函数声明
    async function foo() {  }
    
    // 函数表达式
    const foo = async function () {  };
    
    // 箭头函数
    const foo = async () => {  };
    
    // 对象的方法
    let obj = {  
      async foo() {  } 
    };
    obj.foo().then(()=>{ })

**根据这些特性，我们还可以把上面添加.then回调的函数，变得更加扁平化一些**

// 简单封装一下axios函数
    const getAction = (url) => axios({  method: 'get', url });
    const url = "https://api-hmugo-web.itheima.net/api/public/v1/home/catitems"
    function getItems(url) { 
      return getAction(url)
    }
    (async () => { 
      const items = await getItems(url)
      console.log(items)
    })();

## （四）async，await 处理多个请求 ##

前文已经说了，`async`的函数虽然是异步执行，但是函数体里面的内容却是同步的，只有前面的`await`结束，才会执行下一个`await`的异步请求  
所以当多个请求一起处理时，从上往下写的形式，只有前面一个执行完成才能执行下一个，页面加载速度就会很慢

**处理并行的异步请求**  
下面两种方法是相同的，喜欢哪个用哪个

// 简单封装一下axios函数
    const Get = (url) => axios({  method: 'get', url });
    const url = "https://api-hmugo-web.itheima.net/api/public/v1/home/catitems"
    async function getItems(url) { 
      const [response1, response2] = await Promise.all([Get(url), Get(url)])
      console.log(response1)
      console.log(response2)
    }
    getItems(url)

// 简单封装一下axios函数
    const Get = (url) => axios({  method: 'get', url });
    const url = "https://api-hmugo-web.itheima.net/api/public/v1/home/catitems"
    async function getItems(url) { 
      const response1Promise = Get(url)
      const response2Promise = Get(url)
      let foo = await response1Promise;
      let bar = await response2Promise;
      console.log(foo)
      console.log(bar)
    }
    getItems(url)

## （五）async，await 的错误处理 ##

如果 `await` 后面的异步操作出错，那么等同于 `async` 函数返回的 `Promise` 对象被 `reject`

async function f() { 
      await new Promise((resolve, reject) => { 
        throw new Error('出错了');
      });
    }
    f()
      .then(v => console.log(v))
      .catch(e => console.log(e))