async、await和Promise

学习一下

async、await和Promise

async函数

描述

async关键字用于声明一个异步函数。当一个函数被声明为异步函数时，它会返回一个Promise对象。即使函数内部没有显式地返回一个Promise，它也会返回一个解析为undefined的Promise。

async使用

在方法前添加即可，这表明整个方法是一个异步函数，该函数能够返回一个Promise的结果

async initData() {
  // 其他业务
}

在调用API返回的数据前添加，getInfo方法本身不会返回Promise结果，而是仅仅在.then()内部处理

getInfo() {
    infoApi(this.orgForm.id).then(async (res) => {
     let list = res;
    })
  },

await关键字

描述

它只能在async函数内部使用。使用await关键字可以让异步操作看起来像是同步操作一样。

await关键字用于等待Promise的结果。如果 Promise 被解决（fulfilled），await 表达式的结果就是 Promise 解决的值。如果 Promise 被拒绝（rejected），await 会抛出拒绝的原因，这可以通过在 async 函数中使用 try...catch 结构来捕获。

await使用

前端API自定义及导入

export function getProductFamilyListAPI(params) {
  return request({
    url: 'data/product/family/list',
    method: 'GET',
    params
  })
}


import { getProductFamilyListAPI } from "@/api/dict/data";

async changeRuleFactor(e,index,item){
  // 处理其他业务 todo
  let list = await getProductFamilyListAPI();
}

Promise

描述

Promise 是 JavaScript 中用于异步编程的一个对象，它代表了一个最终可能完成（fulfilled）或失败（rejected）的异步操作及其结果值。使用 Promise，你可以避免复杂的回调地狱（Callback Hell），通过链式调用 .then() 和 .catch() 方法来处理成功和失败的情况。

Promise使用

getSysListMethod() {
  new Promise((resolve, reject) => {
    getSysListApi().then((data) => {
      this.getSysList = data;
      resolve(data);// 成功时调用  
    });
  });
},

getUserList() {
  return new Promise((resolve, reject) => {
    channelUserApi(this.userForm).then((res) => {
        this.tableData = res.list
        resolve();// 成功时调用  
      }).catch(() => {
        reject();// 失败时调用 
      });
  });
},

三者关系

• Promise 是异步操作的基础，它提供了一种处理异步操作的机制。
• async 函数使得编写异步代码变得更加容易，因为它允许你像写同步代码一样写异步代码。
• await 用于在 async 函数内部等待 Promise 的结果，使得代码更加清晰和易于理解。