关于Promise的一段代码的疑问

Question

import { Promise } from 'es6-promise';

function loadScript(url) {

let script = Array.from(document.scripts).find((s) => s.src === url);

  if (script) {

    return Promise.resolve(url);//①

  }

  return new Promise(function(resolve, reject) { //②

        script = document.createElement('script');

        script.addEventListener('load',  function() { resolve(url); }, false);

        script.addEventListener('error', function() { reject(url); }, false);

        script.src = url;

        document.body.appendChild(script);

    });

1、②处是定义了一个Promise对象，和①处的区别是什么？
2、①处Promise.resolve(url) 为什么把这个url放进去？

这段代码的意思不应该是该url加载完之后，执行。 它怎么知道url什么时候加载完？

Answer 1

①这是Promise的简略写法，和②其实是一样的，①这里可以等同于return new Promise(function(resolve){     resolve(url); });这个loadScript这个函数在后面还挂了个then方法的对吧？url在这里可以理解为向后面的then传递参数。至于你的第三个问题，我来稍微梳理下这个函数的流程吧。变量script表示当前页面是否已经加载了指定的脚本。如果已经加载了，那么就会运行：return Promise.resolve(url);//这个在上面已经提过了，它等同于return new Promise(function(resolve){     resolve(url); })事实上，返回的这个Promise就是个空的，它马上执行了resolve函数把值传递了下去。如果指定脚本并没有加载，那么就会执行你的第②部分。这部分将会加载指定的脚本，然后等待脚本加载完成，或者是加载出错。然后就到了你的疑问，如何判断啥时候加载完成，啥时候出错呢？答案是你的这两句话：script.addEventListener('load',  function() { resolve(url); }, false); script.addEventListener('error', function() { reject(url); }, false);这里给脚本绑定了load和error事件，两个事件中的回调函数分别表示了这个脚本在未来的两种可能性。用个不太恰当的比喻，resolve和reject两个函数就好像promise的开关，执行这两个函数就表示当前promise的动作执行完了，马上就会执行then绑定的下一个动作。