javascript - 关于Promise的一段代码的疑问

问题描述

问 题

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什么时候加载完？

解决方案

1. ①这是Promise的简略写法，和②其实是一样的，①这里可以等同于

   return new Promise(function(resolve){
       resolve(url);
   });

2. 这个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绑定的下一个动作。

这篇关于javascript - 关于Promise的一段代码的疑问的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！