项目中通过
Async:
[async_function声明用于定义一个返回AsyncFunction对象的异步函数。异步函数是指通过事件循环异步执行的函数,它会通过一个隐式的Promise返回其结果。
![](https://img.laitimes.com/img/9ZDMuAjOiMmIsIjOiQnIsIyZuBnLjJDNzcTNxUWOxEjNxYzN4EmN0QTM3UDZkNDZhNWM4kzLc52YucWbp5GZzNmLn9Gbi1yZtl2Lc9CX6MHc0RHaiojIsJye.png)
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();//初始加载
记录一下!!!