js使用异步方法(promise)返回回调参数内的值,

需求分析

        使用回调方式的异步方法时,需要返回异步操作的结果,这个时候就不能直接在回调函数内返回值,因为回调函数需要等待异步操作结束才执行,而同步调用返回值时,异步操作没有结束,回调函数就没有执行完成,就接收不到返回值


// 一个异步回调的方法

const getData = () => {
  let data = null;
  fetch('https://api.github.com/emojis').then(res => {
    if (res.ok) {
      res.json().then(response => {
        console.log(response);
        data = response;
      });
    }
  })
  return data;
}

console.log(getData()); // 输出 null

这个函数的思路是,在异步请求的外层定义一个变量,然后执行异步请求的回调,异步请求成功后执行回调将结果赋值个data,然后将data返回出来

但是显然调用getData时是同步的,而请求回调是异步的,结果是先调用了getData,请求回调的操作才结束,data根本没有得到请求返回的值,

解决方法

一般来说采用回调的方式,回调的结果应该在回调函数内部处理,要返回异步函数的值,就应该等待异步函数执行结束在返回,可以将其封装成promise进行处理,


const getData = async () => {
  const res = await fetch('https://api.github.com/emojis');
  const data = await res.json();
  console.log(data);
  return data;
}

getData().then(data => {
  console.log(data);
})

使用async,await将结果封装成一个promise,在使用promise的异步方法读取结果,

这样就将异步的结果通过getData方法拿出来了,

总结

要拿到一个异步的结果,就需要使用异步的调用,同步的方法是不能获取异步结果的,因为异步方法总是在同步操作之后执行,

完整代码展示


// 一个异步回调的方法

// const getData = () => {
//   let data = null;
//   fetch('https://api.github.com/emojis').then(res => {
//     if (res.ok) {
//       res.json().then(response => {
//         console.log(response);
//         data = response;
//       });
//     }
//   })
//   return data;
// }

// console.log(getData()); // 输出 null


const getData = async () => {
  const res = await fetch('https://api.github.com/emojis');
  const data = await res.json();
  console.log(data);
  return data;
}

getData().then(data => {
  console.log(data);
})

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值