C语言学习网

JS中异步和单线程的示例分析

发表于:2022-11-28 作者:安全数据网编辑
编辑最后更新 2022年11月28日,这篇文章主要介绍了JS中异步和单线程的示例分析,具有一定借鉴价值,感兴趣的朋友可以参考下,希望大家阅读完这篇文章之后大有收获,下面让小编带着大家一起了解一下。单线程但是我们在开发中,遇到请求网络,或者

这篇文章主要介绍了JS中异步和单线程的示例分析,具有一定借鉴价值,感兴趣的朋友可以参考下,希望大家阅读完这篇文章之后大有收获,下面让小编带着大家一起了解一下。

单线程

但是我们在开发中,遇到请求网络,或者定时任务的时候,如果等待网络请求结束或者定时任务结束的时候再去做其他事情,这样页面就会卡住,所以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中异步和单线程的示例分析"这篇文章对大家有帮助,同时也希望大家多多支持,关注行业资讯频道,更多相关知识等着你来学习!

0