vue3项目使用async/await搭配promise使用过程

vue3使用async/await搭配promise使用

项目中通过

Async

[async_function声明用于定义一个返回AsyncFunction对象的异步函数。

异步函数是指通过事件循环异步执行的函数，它会通过一个隐式的Promise返回其结果。

async/await

async/await是基于Promise的，是进一步的一种优化。不过再写代码的时候，Promise本身的API出现得很少，很接近同步代码的写法。

async只是表明里面可能有异步过程，里面可以有await关键字,如果没有async函数本身会马上返回，不会阻塞当前线程。它的函数的返回值是一个Promise对象。

• 当return new Promise();则直接处理promise对象
• 当return data;则相当于Promise.resolve(data);还是一个Promise对象

两者都需要用用.then(data => { })函数处理。

await的是resolve(data)消息，并把数据data返回。比如，下面代码中，当Promise对象由Pending变为Resolved的时候，变量a就等于data；

然后再顺序执行下面的语句`console.log(a);

const a = await new Promise((resolve, reject) => {
    // async process ...
    return resolve(data);
});
console.log(a);

async/await

async作为一个关键字放在函数的前面，表示该函数是一个异步函数，意味着该函数的执行不会阻塞后面代码的执行。

async函数返回一个Promise对象（如果在函数中 return 一个直接量，async 会把这个直接量通过 Promise.resolve() 封装成Promise对象），所以在没有await的情况下执行async函数，它会立即执行，并且绝不会阻塞后面的语句，这和普通返回Promise对象的函数并无二致。

vue3在实际项目中使用案例如下:

//引入api
import { commonMethods } from "@/api/customer/new";

//_f封装方法 调用api接口
const   _f=()=>{
      return new Promise(resolve=>{
        commonMethods().then(res=>{
         const code = res.code
         const data = res.lists
          if(code === 200){
              resolve(data)
            }
        })
     })
 }; 
const actionPage = async () => {
     let data=await _f();
     console.log(data,'拿到同步的数据做操作')
};
actionPage();//初始加载

记录一下!!!

总结

以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。