Javascript本地承諾？ TypeError undefined

Question

所以我想調用一個又一個函數的字符串，所以我在構建一個快速應用程序之前使用過promise，但從來沒有使用native javascript。在我的一飲而盡任務我有通天編譯我的js下降到ES5（我使用一些ES6功能）：

gulp.task("babel", function() { 
    return gulp.src("./main.js") 
    .pipe(sourcemaps.init()) 
    .pipe(babel()) 
    .pipe(concat("main.js")) 
    .pipe(sourcemaps.write(".")) 
    .pipe(gulp.dest("./bundle/")); 
}); 

所以我使用的承諾將是很容易簡單地，.then()想通..錯了，我是。我還沒有完全理解，和我讀過給我矛盾的做這件事的方式..所以，

var mainFunction = function drawMain() { 
        imageObj.onload = function() { 
         ctx.drawImage(imageObj, 0, 0, canvas.width, canvas.height); 
        }; 
        imageObj.src = 'http://i.ytimg.com/vi/ReF6iQ7M5_A/maxresdefault.jpg'; 
        }; 
mainFunction().then(function() { 
    alert('Hello!'); 
}); 

我有我上面的函數（忽略它，它只是寫入圖像在畫布）然後在那個功能完成之後我又想運行另一個，我在我的控制檯中得到了Uncaught TypeError: Cannot read property 'then' of undefined。任何想法我做錯了什麼？我需要聲明什麼是承諾嗎？

謝謝！

Answer 1

你mainFunction函數不是一個承諾，所以，它不會有定義的then方法。

你必須做一些事情，如：

var mainFunction = new Promise(function(resolve, reject) { 
    imageObj.onload = function() { 
    ctx.drawImage(imageObj, 0, 0, canvas.width, canvas.height); 
    resolve(); 
    }; 
    imageObj.src = 'http://i.ytimg.com/vi/ReF6iQ7M5_A/maxresdefault.jpg'; 
}); 

mainFunction.then(function() { 
    alert('Hello!'); 
}); 

注：看看the DevDocs documentation，你就會明白它是如何工作的更好。