JavaScript中的承諾有什麼意義？

Question

一諾是這可能是可用

（...）值，現在，還是將來，或從不（來源：MDN）

所以可以說我有一個應用程序，它想與照片一起工作。照片被加載，例如算法在後臺運行後（或其他某種延遲）。現在我想檢查一下，如果圖片在未來可用，通過使用承諾，而不是回調。

要檢查，如果圖像是可用的，我可以用下面的代碼：

function loadImage(url) { 
    return new Promise((resolve, reject) => { 
    let image = new Image() 

    image.onload = function() { 
     resolve(image) 
    } 

    image.onerror = function() { 
     let message = 
     'Could not load image at ' + url 
     reject(new Error(msg)) 
    } 

    image.src = url 
    }) 
} 

的承諾，屬於這將是這個樣子：

Promise.all([ 
    loadImage('images/pic1.jpg'), 
    loadImage('images/pic2.jpg') 
]).then((images) => { 
    images.forEach(img => addImg(img.src)) 
}).catch((error) => { 
    // handle error 
}) 

這不會因爲如果圖片在目前，而不是在未來可用，承諾將查找。圖片將在一秒鐘內出現，但承諾將返回一個錯誤。

我在這裏沒有得到有關承諾的信息？對我而言，看起來就像是檢查的整個未來方面，如果圖片可用取決於loadImage(url)而不是實際承諾本身。

PS：實例啓發funfunfunction

---

的承諾怎麼會知道什麼時候解決？

據我瞭解，它不會「聽」周圍的其他代碼，更不用說可能在後臺運行的框架。我會假設在這個例子中它會是這樣的：諾言檢查是否有圖片 - >它們仍然在後臺工作 - >承諾解決並拋出錯誤 - >算法完成與圖片 - >圖片可用？

Answer 1

JavaScript中的承諾有什麼意義？

參見：You're Missing the Point of Promises。

---

不能考慮所有相關的單獨使用Promise的細微差別。瀏覽promise標籤，閱讀經常以promise標籤發佈的用戶發佈的其他用戶的問題和答案。在這些問題和答案的評論中提出關於具體案例的問題，供您自己的啓發。

---

你，不會通過檢查Promise鏈可變之外的價值得到使用.then()或.catch()一個Promise的價值。

無視「現在」和「未來」。專注於在.then()和.catch()之內執行代碼。引用由標識符引用的異步值的所有其他代碼都不可靠。

let id = void 0; 
 

 
let promise = new Promise(resolve => 
 
       setTimeout(() => {id = 123; resolve(id) }, Math.random() * 2000) 
 
      ); 
 

 
// this is not accurate 
 
console.log(`id: ${id}`); // what is `id` here? 
 

 
promise.then(res => console.log(`id: ${res}`));

還要注意，函數傳遞給Promise構造函數執行從.then()立即

let id = void 0; 
 

 
let promise = new Promise(resolve => 
 
       setTimeout(resolve, Math.random() * 2000, id = 123) 
 
      ); 
 

 
// is this accurate? 
 
console.log(`id: ${id}`); // what is `id` here? 
 

 
promise.then(res => console.log(`id: ${res}`));

return值調用。

return從.then()得到的值。使用.map()代替.forEach()

Promise.resolve(123) 
 
.then(data => console.log(data)) 
 
.then(res => console.log(res)) // `undefined` 
 

 
Promise.resolve(123) 
 
.then(data => { console.log(data); return data}) 
 
.then(res => console.log(res)) // `123`

使用.map()代替.forEach()

let fn = (id) => new Promise(resolve => 
 
        setTimeout(resolve, Math.random() * 2000, id) 
 
       ); 
 
        
 
Promise.all([1,2,3].map(fn)) 
 
.then(data => Promise.all(data.forEach(id => fn(id * 10)))) 
 
.then(data => console.log(`data: ${data}`)); // where is `data` 
 

 
        
 
Promise.all([1,2,3].map(fn)) 
 
.then(data => Promise.all(data.map(id => fn(id * 10)))) 
 
.then(data => console.log(`data: ${data}`)); // `[10, 20, 30]`

甲處理排斥或誤差被轉換爲解決Promise不是throw n或拒絕返回

let fn =() => new Promise((resolve, reject) => 
 
       setTimeout((id) => {reject(new Error(id)) }, Math.random() * 2000, 123) 
 
      ) 
 

 
fn().then(res => console.log(`id: ${res}`)) 
 
.catch(err => console.log(`err: ${err}`)) 
 
.then(res => console.log(`res: ${res}`)) // `undefined` 
 

 
fn().then(res => console.log(`res: ${res}`)) 
 
.catch(err => { console.log(`err: ${err}`); return err }) 
 
// `.then()` is not called, function passed to `.catch()` is called 
 
.then(res => console.log(`res: ${res}`)) 
 
.catch(err => console.log(`err: ${err}`)) // `123`