js中關(guān)于promise怎么使用

這篇文章主要介紹“js中關(guān)于promise怎么使用”，在日常操作中，相信很多人在js中關(guān)于promise怎么使用問題上存在疑惑，小編查閱了各式資料，整理出簡單好用的操作方法，希望對大家解答”js中關(guān)于promise怎么使用”的疑惑有所幫助！接下來，請跟著小編一起來學(xué)習(xí)吧！

一、概述

Promise是異步編程的一種解決方案，可以替代傳統(tǒng)的解決方案--回調(diào)函數(shù)和事件。

ES6統(tǒng)一了用法，并原生提供了Promise對象。

作為對象，Promise有以下兩個特點(diǎn)：

• (1)對象的狀態(tài)不受外界影響。

• (2)一旦狀態(tài)改變了就不會再變，也就是說任何時候Promise都只有一種狀態(tài)。

二、Promise的狀態(tài)

Promise有三種狀態(tài)，分別是 Pending (進(jìn)行中)、Resolved (已完成)、Rejected (已失敗)。

Promise從Pending狀態(tài)開始，如果成功就轉(zhuǎn)到成功態(tài)，并執(zhí)行resolve回調(diào)函數(shù)；如果失敗就轉(zhuǎn)到失敗狀態(tài)并執(zhí)行reject回調(diào)函數(shù)。

三、基本用法

可以通過Promise的構(gòu)造函數(shù)創(chuàng)建Promise對象

var promise = new Promise((resolve,reject) => {
  setTimeout(()=>{
    console.log("hello world")
}, 2000)
})

Promise構(gòu)造函數(shù)接受一個函數(shù)作為參數(shù)，該函數(shù)的兩個參數(shù)是 resolve ，reject，它們由JavaScript引擎提供。

其中 resolve 函數(shù)的作用是當(dāng)Promise對象轉(zhuǎn)移到成功，調(diào)用resolve并將操作結(jié)果作為其參數(shù)傳遞出去；reject 函數(shù)的作用是當(dāng)Promise對象的狀態(tài)變?yōu)槭r，將操作報出的錯誤作為參數(shù)傳遞出去。

如下代碼：

function greet(){
  var promise = new Promise(function(resolve,reject){
    var greet = "hello world"
    resolve(greet)
})
  return promise
}
greet().then(v=>{
  console.log(v)//*
})

上面的 * 行的輸出就是greet的值，也就是 resolve() 傳遞出來的參數(shù)。

注意：創(chuàng)建一個Promise對象會立即執(zhí)行里面的代碼，所以為了更好的控制代碼的運(yùn)行時刻，可以將其包含在一個函數(shù)中，并將這個Promise作為函數(shù)的返回值。

四、Promise的then方法

promise的then方法帶有一下三個參數(shù)：成功的回調(diào)，失敗的回調(diào)，前進(jìn)的回調(diào)。

一般情況下只需要實(shí)現(xiàn)第一個，后面的是可選的。

Promise中最為重要的狀態(tài)，通過then的狀態(tài)傳遞可以實(shí)現(xiàn)的回調(diào)函數(shù)鏈?zhǔn)讲僮鞯膶?shí)現(xiàn)。

先執(zhí)行以下代碼：

function greet () {
  var promise = new Promise (function(resolve, reject){
    var greet = "hello world"
    resolve(greet)
  })
  return promise
}
var p = greet().then(v => {
  console.log(v)  // Promise { <pending> }
})
console.log(p)  // hello world

從中可以看出promise執(zhí)行then還是一個promise，并且Promise的執(zhí)行是異步的。

因?yàn)?hello world 在最后一條輸出語句的前面就打印出來了，且Promise的狀態(tài)為pending(進(jìn)行中)。

因?yàn)镻romise執(zhí)行then后還是Promise，所以就可以根據(jù)這一特性，不斷的鏈?zhǔn)秸{(diào)用回調(diào)函數(shù)。

下面是一個例子：

function greet () {
  var promise = new Promise(function (resolve, reject){
    var greeet = "hello world"
    resolve(greet)
  })
  return promise
}
greet().then(v => {
  console.log(v+1)
  return v
})
.then (v => {
  console.log(v+2)
  return v
})
.then (v => {
  console.log(v+3)
})

五、Promise的其他方法

reject用法

reject的作用就是把Promise的狀態(tài)從pending置為rejected，這樣在then中就能捕捉到reject的回調(diào)函數(shù)

function judgeNumber (num) {
  var promise = new Promise (function(resolve, reject) {
    num = 5
    if(num < 5){
      resolve("num小于5，值為" + num)
    } else {
      reject("num不小于5，值為" + num)
    }
  })
  return promise
}
 
judgeNumber().then(
  function (message) {
    console.log(message)
  },
  funtion (message) {
    console.log(message)
  }
)

.then 后包含有兩個方法，前一個執(zhí)行resolve回調(diào)的參數(shù)，后一個執(zhí)行reject回調(diào)的參數(shù)

catch用法

function judgeNumber(num){
    var promise1 = new Promise(function(resolve,reject){
        num =5;
        if(num<5){
            resolve("num小于5，值為："+num);
        }else{
            reject("num不小于5，值為："+num);
        }
    });
    return promise1;
}
 
judgeNumber().then(
    function(message){
        console.log(message);
    }
)
.catch(function(message){
    console.log(message);
})

這個時候catch執(zhí)行的是和reject一樣的，也就是說如果Promise的狀態(tài)變?yōu)閞eject時，會被catch捕捉到，不過需要特別注意的是如果前面設(shè)置了reject方法的回調(diào)函數(shù)，則catch不會捕捉到狀態(tài)變?yōu)閞eject的情況。

catch還有一點(diǎn)不同的是，如果在resolve或者reject發(fā)生錯誤的時候，會被catch捕捉到，這與java，c++的錯誤處理時一樣的，這樣就能避免程序卡死在回調(diào)函數(shù)中了。

all用法

Promise的all方法提供了并行執(zhí)行異步操作的能力，在all中所有異步操作結(jié)束后才執(zhí)行回調(diào)。

function p1(){
    var promise1 = new Promise(function(resolve,reject){
        console.log("p1的第一條輸出語句");
        console.log("p1的第二條輸出語句");
        resolve("p1完成");
    })
    return promise1;
}
 
function p2(){
    var promise2 = new Promise(function(resolve,reject){
        console.log("p2的第一條輸出語句");
        setTimeout(()=>{console.log("p2的第二條輸出語句");resolve("p2完成")},2000);
 
    })
    return promise2;
}
 
function p3(){
    var promise3 = new Promise(function(resolve,reject){
        console.log("p3的第一條輸出語句");
        console.log("p3的第二條輸出語句");
        resolve("p3完成")
    });
    return  promise3;
}
 
Promise.all([p1(),p2(),p3()]).then(function(data){
    console.log(data);
})

race用法

在all中的回調(diào)函數(shù)中，等到所有的Promise都執(zhí)行完，再來執(zhí)行回調(diào)函數(shù)，race則不同它等到第一個Promise改變狀態(tài)就開始執(zhí)行回調(diào)函數(shù)。

將上面的`all`改為`race`,得到

Promise.race([p1(),p2(),p3()]).then(function(data){
    console.log(data);
})

這里還需要注意一個問題，promise的執(zhí)行時異步的，比如下面這樣：

var i
 
var promise = new Promise(function(resolve,reject){
    resolve("hello");
})
 
promise.then(data=>{
    i = 2;
 
})
console.log(i);

得到的結(jié)果是undefined,這不是因?yàn)閜romise不能改變外部的值，而是因?yàn)楫?dāng)執(zhí)行console.log(i)時，then()方法還沒執(zhí)行完。

如果你將console.log(i)延遲輸出就可以得到正確的結(jié)果：

setTimeout(()=>console.log(i),1000);

所以不要在promise后面執(zhí)行一些依賴promise改變的代碼，因?yàn)榭赡躳romise中的代碼并未執(zhí)行完，或者你可以將其延遲輸出。

到此，關(guān)于“js中關(guān)于promise怎么使用”的學(xué)習(xí)就結(jié)束了，希望能夠解決大家的疑惑。理論與實(shí)踐的搭配能更好的幫助大家學(xué)習(xí)，快去試試吧！若想繼續(xù)學(xué)習(xí)更多相關(guān)知識，請繼續(xù)關(guān)注億速云網(wǎng)站，小編會繼續(xù)努力為大家?guī)砀鄬?shí)用的文章！