JS中异步和单线程是什么？一文带你迅速看懂

发布时间：2022-01-14 14:12 所属栏目：13 来源：互联网

导读：JS中异步和单线程是什么？对于新手来说，可能不是很了解异步和单线程，因此下文小编就给大家来简单的介绍一下什么是异步和单线程，对帮大家学习和理解JavaScript的异步和单线程一定的帮助，感兴趣的朋友就继续往下看吧。单线程但是我们在开发中，遇到请求

JS中异步和单线程是什么？对于新手来说，可能不是很了解异步和单线程，因此下文小编就给大家来简单的介绍一下什么是异步和单线程，对帮大家学习和理解JavaScript的异步和单线程一定的帮助，感兴趣的朋友就继续往下看吧。

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

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



    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)
})

（编辑：ASP站长网）