js处理异步问题

最新推荐文章于 2024-10-01 20:12:28 发布

•᷄ࡇ•᷅哼

最新推荐文章于 2024-10-01 20:12:28 发布

阅读量155

点赞数

文章标签： javascript 前端开发语言

本文链接：https://blog.csdn.net/m0_65638748/article/details/126771984

版权

本文介绍了JavaScript中处理异步操作的几种方式：回调函数、Promise、Generator函数以及async/await。回调函数虽易导致回调地狱，但Promise通过链式调用解决了这一问题。Generator允许函数暂停执行，而async/await则是Generator的语法糖，使得异步代码更接近同步风格。通过这些技术，开发者可以更好地组织和管理异步流程。

摘要由CSDN通过智能技术生成

1、回调函数

回调（callback）是一个函数被作为一个参数传递到另一个函数里，在那个函数执行完后再执行。

function f1(callback){
  setTimeout(() => {
    let str = '操作'
    console.log('异步') 
    callback(str)
  }, 100);
}
f1((str)=>{
	console.log(str)
})

// 异步
// 操作

但是容易形成回调地狱

2、promise对象

链式操作有效的解决了回调地狱问题

const person = new Promise((resolve, reject) =>{
  setTimeout(() => {
    let name = '小明'
    resolve(name)
  }, 100);
});
p.then((res) => {
  console.log(res)
})

promise.all ：可以将多个 promise 放在一起处理，能简化回调的处理

3、Generator 函数

函数体内部使用yield表达式，定义不同的内部状态，done:true表示函数内的状态已经执行完毕

    function* helloGenerator() {
      yield 'hello';
      yield 'world';
      return '结束';
    }
    
    helloGenerator().next() // {value:"hello",done:false}
    helloGenerator().next() // {value:"world",done:false}
    helloGenerator().next() // {value:"结束",done:true}
    helloGenerator().next() // {value:undfined,done:true}

4、 async 函数

其实是Generator 函数的语法糖

function get() {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      let name = '小明'
      resolve(name)
    }, 1000);
  });
}

async function getName() {
  let newData = await get()
}
getName() // 小明

async表示函数里有异步操作，await表示紧跟在后面的表达式需要等待结果，async函数的返回值是 Promise 对象，可以用then方法指定下一步的操作