1. 程式人生 > 實用技巧 >Promise 物件---非同步呼叫

Promise 物件---非同步呼叫

這裡先主要講解下 promise物件用於圖片載入非同步操作,具體深入 後續還會更新

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    
    <script>
        //
promise是什麼? // 1、主要用於非同步計算 // 2、可以將非同步操作佇列化,按照期望的順序執行,返回符合預期的結果 // 3、可以在物件之間傳遞和操作promise,幫助我們處理佇列 //圖片的預載入就屬於 非同步的回撥 promise就是解決回撥地獄的 //建立promise 物件, //promise物件中傳遞一個回撥函式,其中函式有兩個引數回撥函式,resolve 成功函式,reject 失敗函式 new Promise(function(resolve,reject){
var img=new Image(); img.src="./image/icon/8.gif"; //img物件建立載入函式,如果成功了 執行resolve 函式 並且把this 當前的img物件傳遞進去 //後期then函式需要呼叫 img.onload=function(){ resolve(this); } //此函式表示 img影象載入失敗 會呼叫reject函式 ,並且給reject函式傳遞一個引數 表示出錯了 img.onerror=function
(){ reject("圖片加載出錯了"); } //promise物件不能直接執行,需要使用then函式來執行 //其中then函式中也包含兩個 回撥函式, //第一個成功後 需要呼叫的函式,其中函式的引數為resolve 成功函式 傳入的引數 this //第二個失敗後 需要呼叫的函式,其中函式的引數為reject 失敗函式 出入的引數 “圖片載入失敗” }).then(function(data){ console.log(data); },function(error){ console.log(error); }); </script> </body> </html>