VUE中async/await的使用！

简介

• async/await是ES7引入的新语法，可以更加方便的进行异步操作
• async关键词用于函数上（async函数的返回值是Promise实例对象）
• await关键子用于async函数当中（await可以得到异步的结果）

简单示例

async function getData(id) {
    const ret = await axios.get('/mydata');
    return ret;
}
getData.then(ret=>{
    console.log(ret)
})

async 函数

async 关键字用于声明一个异步函数。这意味着这个函数总是返回一个Promise，无论函数体内是否使用了 return 语句。如果 return 了一个值，这个值会被自动包装成一个解决（resolved）的Promise。如果函数抛出一个错误，则返回一个拒绝（rejected）的Promise。

async function fetchData() {
  // ...
  return data; // 返回的数据会被包装成一个Promise
}

await 表达式

await 关键字用于等待一个Promise完成。它只能在 async 函数内部使用。当 await 用于一个Promise时，它会暂停当前 async 函数的执行，直到Promise解决（或者拒绝），然后返回解决的结果（或者抛出错误）。

async function fetchData() {
  const response = await fetch(url); // 等待fetch请求完成
  const data = await response.json(); // 等待JSON解析完成
  return data;
}

生命周期钩子中的使用

export default {
  async created() {
    try {
      const data = await this.fetchData();
      this.someData = data;
    } catch (error) {
      console.error("Error fetching data:", error);
    }
  },
  methods: {
    async fetchData() {
      const response = await fetch('some-api-url');
      return await response.json();
    }
  }
}

方法中的使用

export default {
  methods: {
    async fetchData() {
      try {
        const response = await fetch('some-api-url');
        const data = await response.json();
        this.someData = data;
      } catch (error) {
        console.error("Error fetching data:", error);
      }
    }
  }
}

注意事项

使用 async 和 await 可以让异步代码的写法更接近同步代码，使得代码更加清晰和易于理解。但是，请记住以下几点：

• await 只能在 async 函数中使用。
• 当 await 用于一个非Promise值时，它会简单地返回该值。
• 如果 await 后面的Promise被拒绝，它将抛出一个错误，通常需要用 try...catch 语句来捕获和处理这个错误。