js处理异步的几种方式

1、回调函数

封装了异步操作的函数接受一个匿名函数作为参数，当异步操作执行完后调用这个传递进来的匿名函数；

function getData(callback){
  setTimeout(() => {
    let name = 'xxx'
    callback(name)
  }, 1000);
}
getData((d)=>{
  console.log(d)
})

缺点：容易出现多层的嵌套，例如ajax请求来的数据作为下一个ajax请求的参数，一个异步完成的结果作为另一个异步操作函数的参数

getData('XXX1', () => {
  // callback 函数体
  getData('XXX2', () => {
    // callback 函数体
    getData('XXX3', () => {
      // callback 函数体
      getData('XXX4', () => {
        // callback 函数体
        getData('XXX5', () => {
          // callback 函数体
        })
      })
    })
  })
})

2、promise

const p = new Promise(function (resolve, reject) {
  setTimeout(() => {
    let name = 'xxx'
    resolve(name)
  }, 1000);
});
p.then((d) => {
  console.log(d)
})

3、async await

function getData() {
  new Promise(function (resolve, reject) {
    setTimeout(() => {
      let name = 'xxx'
      resolve(name)
    }, 1000);
  });
}

async function test() {
  let d = await getData()
  console.log(d)
}

test()