文章详情

短信预约-IT技能 免费直播动态提醒

请输入下面的图形验证码

提交验证

短信预约提醒成功

浅谈JS三座大山之异步和单线程

2024-04-02 19:55

关注

单线程

但是我们在开发中,遇到请求网络,或者定时任务的时候,如果等待网络请求结束或者定时任务结束的时候再去做其他事情,这样页面就会卡住,所以js有异步机制解决这个问题。

异步

异步的特点是不会阻塞后面的代码执行,当同步任务执行完毕之后,再执行异步任务。相对的,同步会阻止代码执行。异步任务的应用主要有网络请求和定时任务。

异步是通过callback的方式实现的,在callback里面执行异步执行的代码,但是有一些场景比如我们有三个网络请求abc需要依次执行,在a的回调里发起b请求,在b的回调里发起c请求,这样会造成一种很混乱的写法,称之为回调地狱,可以试想一下,如果页面逻辑过于复杂,需要依次调用10个接口,那么代码的可读性会非常非常差,我们如果看到了别人的这种代码难免内心奔跑一万只神兽。

promise基本用法:


let fun1 = function(flag){
    return new Promise((resolve,reject)=>{
    if(flag){
        setTimeout(() => {
        resolve("success")
        }, 1000);
    }else{
        setTimeout(() => {
        reject("fail")
        }, 1000);
    }
    })
}
  
fun1(true).then((res)=>{
    console.log(res)//success
}).catch((res)=>{
    console.log(res)
})
fun1(false).then((res)=>{
    console.log(res)
}).catch((res)=>{
    console.log(res)//fail
})

上面是一个最简单的promise函数,promise函数返回一个Promise对象,参数是一个函数,接收两个参数resolve和reject,这两个参数也是函数,当执行resolve()或者reject()的时候,函数返回.

如果执行了resolve(),就会在调用的时候执行then()方法,并接收resove()返回的参数;

如果执行了reject(),就会在调用的时候执行catch()方法,并接收reject()返回的参数;

用promise重新实现一下上面三个网络请求的问题:


let callService = function(url){
      return new Promise((resolve,reject)=>{
          axios.get(url).then((res)=>{
            resolve(res)
          }).catch((err)=>{
            reject(err)
          })
      
      })
    }
    const url1 = "/user/url1"
    const url2 = "/user/url2"
    const url3 = "/user/url3"
    callService(url1).then((res)=>{
      // do something
      return callService(url2)
    }).then(()=>{
      // do something
      return callService(url3)
    }).then((res)=>{
      // do something
    }).catch((err)=>{
      console.log(err)
    })

用上面的写法重新实现之后,写法上只会有一层,而不会陷入层层的回调之中。

promise.all

promise.all可以将多个promise包装成一个新的实例,成功的时候返回一个数组,谁先失败返回谁的值。

promise.all方法可以帮我们处理日常开发中多接口同时调用的处理问题。


let p1 = new Promise((resolve, reject) => {
  resolve('成功了')
})

let p2 = new Promise((resolve, reject) => {
  resolve('success')
})

Promise.all([p1, p2]).then((result) => {
  console.log(result)               //['成功了', 'success']
}).catch((error) => {
  console.log(error)
})

promise.race

这个方法的作用是多个接口赛跑,哪个跑得快就返回哪个


Promise.race([p1, p2]).then((result) => {
  console.log(result)
}).catch((error) => {
  console.log(error) 
})

以上就是浅谈JS三座大山之异步和单线程的详细内容,更多关于JS三座大山之异步和单线程的资料请关注编程网其它相关文章!

阅读原文内容投诉

免责声明:

① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的,并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据,供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。

② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

软考中级精品资料免费领

  • 历年真题答案解析
  • 备考技巧名师总结
  • 高频考点精准押题
  • 2024年上半年信息系统项目管理师第二批次真题及答案解析(完整版)

    难度     813人已做
    查看
  • 【考后总结】2024年5月26日信息系统项目管理师第2批次考情分析

    难度     354人已做
    查看
  • 【考后总结】2024年5月25日信息系统项目管理师第1批次考情分析

    难度     318人已做
    查看
  • 2024年上半年软考高项第一、二批次真题考点汇总(完整版)

    难度     435人已做
    查看
  • 2024年上半年系统架构设计师考试综合知识真题

    难度     224人已做
    查看

相关文章

发现更多好内容

猜你喜欢

AI推送时光机
位置:首页-资讯-前端开发
咦!没有更多了?去看看其它编程学习网 内容吧
首页课程
资料下载
问答资讯