單線程

但是我們?cè)陂_(kāi)發(fā)中，遇到請(qǐng)求網(wǎng)絡(luò)，或者定時(shí)任務(wù)的時(shí)候，如果等待網(wǎng)絡(luò)請(qǐng)求結(jié)束或者定時(shí)任務(wù)結(jié)束的時(shí)候再去做其他事情，這樣頁(yè)面就會(huì)卡住，所以js有異步機(jī)制解決這個(gè)問(wèn)題。

異步

異步的特點(diǎn)是不會(huì)阻塞后面的代碼執(zhí)行，當(dāng)同步任務(wù)執(zhí)行完畢之后，再執(zhí)行異步任務(wù)。相對(duì)的，同步會(huì)阻止代碼執(zhí)行。異步任務(wù)的應(yīng)用主要有網(wǎng)絡(luò)請(qǐng)求和定時(shí)任務(wù)。

異步是通過(guò)callback的方式實(shí)現(xiàn)的，在callback里面執(zhí)行異步執(zhí)行的代碼，但是有一些場(chǎng)景比如我們有三個(gè)網(wǎng)絡(luò)請(qǐng)求abc需要依次執(zhí)行，在a的回調(diào)里發(fā)起b請(qǐng)求，在b的回調(diào)里發(fā)起c請(qǐng)求，這樣會(huì)造成一種很混亂的寫法，稱之為回調(diào)地獄，可以試想一下，如果頁(yè)面邏輯過(guò)于復(fù)雜，需要依次調(diào)用10個(gè)接口，那么代碼的可讀性會(huì)非常非常差，我們?nèi)绻吹搅藙e人的這種代碼難免內(nèi)心奔跑一萬(wàn)只神獸。

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

上面是一個(gè)最簡(jiǎn)單的promise函數(shù)，promise函數(shù)返回一個(gè)Promise對(duì)象，參數(shù)是一個(gè)函數(shù)，接收兩個(gè)參數(shù)resolve和reject，這兩個(gè)參數(shù)也是函數(shù)，當(dāng)執(zhí)行resolve()或者reject()的時(shí)候，函數(shù)返回.

如果執(zhí)行了resolve(),就會(huì)在調(diào)用的時(shí)候執(zhí)行then()方法，并接收resove()返回的參數(shù);

如果執(zhí)行了reject(),就會(huì)在調(diào)用的時(shí)候執(zhí)行catch()方法，并接收reject()返回的參數(shù);

用promise重新實(shí)現(xiàn)一下上面三個(gè)網(wǎng)絡(luò)請(qǐng)求的問(wèn)題：

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

用上面的寫法重新實(shí)現(xiàn)之后，寫法上只會(huì)有一層，而不會(huì)陷入層層的回調(diào)之中。

promise.all

promise.all可以將多個(gè)promise包裝成一個(gè)新的實(shí)例，成功的時(shí)候返回一個(gè)數(shù)組，誰(shuí)先失敗返回誰(shuí)的值。

promise.all方法可以幫我們處理日常開(kāi)發(fā)中多接口同時(shí)調(diào)用的處理問(wèn)題。

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

這個(gè)方法的作用是多個(gè)接口賽跑，哪個(gè)跑得快就返回哪個(gè)

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

以上就是淺談JS三座大山之異步和單線程的詳細(xì)內(nèi)容，更多關(guān)于JS三座大山之異步和單線程的資料請(qǐng)關(guān)注腳本之家其它相關(guān)文章！

最新評(píng)論