promise异步转化为同步，用async/await结合

在开发过程中，经常需要会遇到在服务器异步获取数据，然后再操作这些数据的情况

如下所示的情景，如果只是顺序地书写代码，因为JS执行机制的原因，会导致数组添加数据的操作在获取到数据之前执行，导致数组中添加的不是我们想要的数据

 let name = "";
 let arr = [];
 getName();
 addData();
 
 function addData() {
   arr.push(name);
   console.log(arr); // ['']
 }
 
 // 模拟服务器异步获取数据
 function getName() {
  setTimeout(function () {
    name = "李四";
   }, 500);
 }
通常，这一问题可以通过把同步操作写在异步任务的回调中来进行解决

 let name = "";
 let arr = [];
 getName();
 
 
 function addData() {
   arr.push(name);
   console.log(arr); // ['李四']
 }
 
 // 模拟服务器异步获取数据
 function getName() {
  setTimeout(function () {
    name = "李四";
    addData();
   }, 500);
 }
为了防止回调函数嵌套太深造成回调地狱，可以使用Promise来解决

let name = "";
let arr = [];
getName().then(() => {
  addData();
});
 
 
// 添加数据操作
function addData() {
  arr.push(name);
  console.log(arr); // ["李四"]
}
 
// 模拟服务器异步获取数据
function getName() {
 return new Promise((resolve, reject) => {
   setTimeout(function () {
      name = "李四";
      resolve();
    }, 500);
 });
}
Promise虽然也能很好地解决异步的问题，但Promise的书写方式是通过then来进行链式调用，为了更好地满足人编写代码的习惯，使用async/await可以让异步函数像同步函数一样调用

let name = "";
let arr = [];
addData();
 
// 添加数据操作
async function addData() {
  await getName();
  arr.push(name);
  console.log(arr); // ["李四"]
}
 
// 模拟服务器异步获取数据
function getName() {
 return new Promise((resolve, reject) => {
   setTimeout(function () {
      name = "李四";
      resolve();
    }, 500);
 });
}
 注意： await关键字只能在async函数内部使用！
————————————————
版权声明：本文为CSDN博主「安智煐的猫」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/weixin_43974234/article/details/121561108