JS异步获取数据的几个方法

何为异步编程

说到异步，不得不提到同步执行，所谓的同步可以理解为顺序执行，就是同一时间有两个任务的话，前一个任务执行完才能执行下一个任务，如下：

function fun1() {
console.log('我是第1个执行')
}
function fun2() {
console.log('我是第2个执行')
}
fun1()
fun2()

执行结果即以函数的调用顺序为准，即先执行fun1()，再执行fun2()。
异步的话就正好相反，只要符合某个条件，就可以先执行，最常见的就是前后端的数据交互，下面以js的定时函数为例：

function fun1() {
setTimeout(()=>{
   console.log('我是第1个执行')
 },1000)
}
function fun2() {
setTimeout(()=>{
   console.log('我是第2个执行')
 },500)
}
fun1()
fun2()

由于定时函数的时间限制，所以最后的结果是先打印fun2()，后打印fun1(）

如何通过异步方式获取数据

1、 回调函数

let target = 'Hello World'
// 方案1、回调函数
function getData(fn){
  setTimeout(() =>{
    fn(target)
  },1000)
}
// getData 的参数为一个回调函数，d是一个形参，在定时器中执行时会被赋予target 这个实参
getData((d)=>{
   console.log(d)
})

2、 promise

let target = 'Hello World'
// 方案2、用promise对象获取数据
function getData(){
   return new Promise((resolve) =>{
     setTimeout(() => {
        resolve(target)
     }, 500);
    })
}
//getData 的返回值是一个new proMise对象,即p是一个promise 对象
let p = getData();//将getData函数的返回值赋给p
p.then(data => console.log(data))

3、async 函数

function getData(){
   return new Promise((resolve) =>{
     setTimeout(() => {
        resolve(target)
     }, 500);
    })
}

async function fun(){
  let data1 = await getData();
  console.log(data1);
  let data2 = await getData();
  console.log(data2);
  let data3 = await getData();
  console.log(data3);
}
fun();