ES6--promise

時間 2019-11-16

標籤 es6 promise 欄目 JavaScript 简体版

原文原文鏈接

Promise 僅僅只是個對象，主要用它來處理異步的數據html

在Promise中，有三種狀態node

pending（等待，處理中）--》resolve（完成）ajax

或promise

pending（等待，處理中）--》rejected（失敗）異步

即一旦狀態改變，就不會再變，任什麼時候候均可以獲得這個結果。函數

若是不設置回調函數，Promise 內部拋出的錯誤，不會反應到外部測試

參數：ui

resolve：成功時觸發的回調函數

reject：失敗時觸發的回調函數

建立Promise對象url

const pro = new Promise(function(resolve,reject){
     if(/*成功*/){
         resolve(value);  //value爲成功時，傳出的值
     }else{
         reject(err);    //err爲失敗時，傳出的值
     }
 })

Promise建立的實例，能夠調用then來接收pro的值，並執行對應的回調函數spa

寫法

then（）方法接收兩個參數，第一個參數是一個爲成功時執行的回調函數，第二個參數爲可選參數，失敗時執行的回調函數。須要注意的地方是then方法是異步執行的。

//調用then方法

pro.then(function(val){ //成功時，調用成功的回調函數
console.log("成功時，接收數據爲"+val) //成功時，接收數據爲123
},function(err){ //失敗時，調用失敗的回調函數
console.log("失敗時，接收數據爲"+err)
})

調用then方法後返回的仍是Promise對象，而後又能夠調用then方法

const pro = new Promise(function(resolve,reject){
if(123){
resolve(123);
}else{
reject(456);
}
})
pro.then(function(val){ //成功時，調用成功的回調函數
console.log("成功時，接收數據爲"+val)
return val //鏈式調用then時須要return val，將值傳遞到下一層回調函數
},function(err){ //失敗時，調用失敗的回調函數
console.log("失敗時，接收數據爲"+err)
}).then(function(val){
console.log("又是成功時調用了then"+val) //成功時，接收數據爲123
},function(err){
console.log("又是失敗時調用了then"+err) //又是成功時調用了then123
})

catch（）

catch（）在鏈式寫法中能夠捕獲前面then中發送的異常。

寫法

const pro = new Promise(function(resolve,reject){
     reject("錯誤")
 })
 pro.then(function(){}).catch(function(err){
     console.log(err)  //錯誤
 })

或

pro.catch(function(err){
     console.log(err)  //錯誤
 })

resolve（），reject（）

resolve（）返回一個成功時的Promise對象

reject（）返回一個失敗時的Promise對象

寫法

all

做爲參數的幾個promise對象一旦有一個的狀態爲rejected，則all的返回值就是rejected。

寫法：

例子1

const pro = Promise.reject("錯誤");
 const pro2 = Promise.resolve("成功")
 const pro3 = Promise.resolve("成功")
 Promise.all([pro,pro2,pro3]).then(function(val){
    console.log(val)
 },function(err){
     console.log(err)  //錯誤
 })

例子2

const pro = Promise.resolve("成功");
 const pro2 = Promise.resolve("成功")
 const pro3 = Promise.resolve("成功")
 Promise.all([pro,pro2,pro3]).then(function(val){
    console.log(val)   // ["成功", "成功", "成功"]
 },function(err){
     console.log(err)
 })

race

哪一個Promise對象傳值較快就接收哪一個

例子

const p1 = new Promise(function(resolve,reject){
     setTimeout(resolve,100,"100")
 })
 const p2 = new Promise(function (resolve,reject){
     setTimeout(resolve,500,"500")
 })
 Promise.race([p1,p2]).then(function(val){
     console.log(val)
 })

Promise對象在node中的玩法之一

let fs = require('fs')
fs.readFile('./01.html','utf8',(err,data) => {
  var por = new Promise((resolve,reject) =>{
      if(err){
          reject(err)
      }else{
          resolve(data)
      }
  })   
   por.then(function(val){
       console.log(val)
   },function(err){
       console.log(err)
   })
})

成功時

let fs = require('fs')
fs.readFile('./01dff.html','utf8',(err,data) => {
  var por = new Promise((resolve,reject) =>{
      if(err){
          reject(err)
      }else{
          resolve(data)
      }
  })   
   por.then(function(val){
       console.log(val)
   },function(err){
       console.log(err)
   })
})

失敗時


Promise與ajax組合運用

<body>
<button id="btn">測試</button>
<div id="box"></div>
<script>
var btn = document.getElementById('btn')
var box = document.getElementById('box')
 function ajax(url,res,rej) {
     var xhr;
    if (window.XMLHttpRequest){
      
        xhr=new XMLHttpRequest();
    }
    else{
    
        xhr=new ActiveXObject("Microsoft.XMLHTTP");
    }
    xhr.open('GET',url,true)
    xhr.send()
    xhr.onload = function () {
        if (xhr.status == 200 && xhr.readyState == 4) {
            res(xhr.responseText);
        } else {
            rej(xhr.status)
        }
    }
 }

btn.onclick = function(){
     var pro = new Promise((resolve,reject) => {
        ajax("01.txt",function(data){
            resolve(data)
        },function(err){
            reject(err)
        })

     })

      pro.then(function(data){
          box.innerHTML = data;
      },function(err){
          box.innerHTML = err;
      })
}
</script>    
</body>

ajax發送請求成功時：

ajax失敗時

<body>
<button id="btn">測試</button>
<div id="box"></div>
<script>
var btn = document.getElementById('btn')
var box = document.getElementById('box')
 function ajax(url,res,rej) {
     var xhr;
    if (window.XMLHttpRequest){
      
        xhr=new XMLHttpRequest();
    }
    else{
    
        xhr=new ActiveXObject("Microsoft.XMLHTTP");
    }
    xhr.open('GET',url,true)
    xhr.send()
    xhr.onload = function () {
        if (xhr.status == 200 && xhr.readyState == 4) {
            res(xhr.responseText);
        } else {
            rej(xhr.status)
        }
    }
 }

btn.onclick = function(){
     var pro = new Promise((resolve,reject) => {
        ajax("01.fsdft",function(data){
            resolve(data)
        },function(err){
            reject(err)
        })

     })

      pro.then(function(data){
          box.innerHTML = data;
      },function(err){
          box.innerHTML = err;
      })
}
</script>    
</body>

相關標籤/搜索

es6promise

JavaScript

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。