didMount里如何动态加载多个外部脚本

宜搭Echarts案例中，加载一个外部脚本使用的是： his.utils.loadScript("https://g.alicdn.com/code/lib/echarts/5.4.0/echarts.min.js").then(() => {

} 但是如果需要加载多个外部脚本，应该怎样在多个外部脚本加载完再进行下一步呢？如果使用promise,请教一下应该怎样写法？或者采用别的方法比如有两个外部资源： https://cdn.bootcdn.net/ajax/libs/echarts/5.1.1/echarts.min.js https://cdn.bootcdn.net/ajax/libs/echarts/5.1.1/theme/macarons.min.js 请教一下怎么加载这两个资源再进行下一步函数？谢谢！

展开

收起

游客as6kdbzxuw7hy 2023-06-09 19:50:48 228 1

来自：钉钉宜搭

5 条回答

写回答

取消提交回答

vohelon
可以使用Promise.all来实现多个外部脚本加载完毕后再进行下一步操作。具体实现如下：
```
componentDidMount() {
  Promise.all([
    his.utils.loadScript("https://cdn.bootcdn.net/ajax/libs/echarts/5.1.1/echarts.min.js"),
    his.utils.loadScript("https://cdn.bootcdn.net/ajax/libs/echarts/5.1.1/theme/macarons.min.js")
  ]).then(() => {
    // 两个外部脚本加载完毕后执行的操作
  });
}
```
这里使用了Promise.all来同时加载两个外部脚本，当两个外部脚本都加载完毕后，then方法中的回调函数就会被执行，可以在该回调函数中进行下一步操作。
2023-06-10 14:18:14

赞同 3 展开评论打赏
祁符建

热爱开发

如果需要在加载多个外部脚本后执行下一步操作，可以使用Promise.all()方法。该方法接收一个promise数组作为参数，并返回一个新的promise对象，只有当所有的promise都被解析(resolve)后才会被解析(resolve)。

下面是加载两个资源并按顺序执行下一步函数的示例代码：

function loadScripts(scripts) { const promises = scripts.map(src => { return new Promise((resolve, reject) => { const script = document.createElement('script'); script.src = src; script.onload = resolve; script.onerror = reject; document.head.appendChild(script); }); }); return Promise.all(promises); }

const scripts = [ 'https://cdn.bootcdn.net/ajax/libs/echarts/5.1.1/echarts.min.js', 'https://cdn.bootcdn.net/ajax/libs/echarts/5.1.1/theme/macarons.min.js' ];

loadScripts(scripts) .then(() => { // 所有脚本都已加载完成 console.log('All scripts have been loaded!'); // 在这里执行下一步操作 }) .catch(() => { console.error('Failed to load scripts!'); }); 以上代码中，loadScripts()方法接收一个脚本数组作为参数，并返回一个promise对象。对于每个脚本，我们创建一个新的promise对象，并将其添加到一个promise数组中。然后，我们通过循环遍历数组来加载所有的脚本，并在所有脚本加载完成后解析(resolve)promise数组。最后，在.then()方法中执行下一步操作。

希望这能够帮到您！

2023-06-10 09:02:42

赞同 3 展开评论打赏
算精通

北京阿里云ACE会长

如果需要动态加载多个外部脚本，可以使用Promise.all来实现并行加载多个脚本，并在所有脚本都加载完成后执行后续逻辑。

以下是一个示例代码，可以加载两个外部脚本echarts.min.js和macarons.min.js，并在两个脚本都加载完成后执行next函数：

javascript Copy function loadScripts(scripts) { const promises = scripts.map(script => { return new Promise((resolve, reject) => { const el = document.createElement('script'); el.src = script; el.onload = resolve; el.onerror = reject; document.head.appendChild(el); }); }); return Promise.all(promises); }

loadScripts([ 'https://cdn.bootcdn.net/ajax/libs/echarts/5.1.1/echarts.min.js', 'https://cdn.bootcdn.net/ajax/libs/echarts/5.1.1/theme/macarons.min.js' ]).then(() => { // 执行加载完成后的逻辑 next(); }).catch(err => { console.error(err); }); 在上面的代码中，我们定义了一个名为loadScripts的函数，它接受一个包含多个脚本地址的数组参数scripts，并返回一个Promise对象，用于表示所有脚本加载完成的状态。

在loadScripts函数内部，我们使用了Promise.all来并行加载所有脚本，每个脚本都是一个Promise对象，当它被加载完成后，我们使用onload事件回调函数来解决Promise。如果在加载过程中发生错误，我们使用onerror事件回调函数来拒绝Promise。

在所有脚本都加载完成后，我们使用Promise.all返回的Promise对象的then方法来执行后续逻辑。在这个例子中，我们执行了一个名为next的函数来表示加载完成后的逻辑。如果在加载过程中发生了错误，则使用catch方法来捕获错误并进行处理。

2023-06-10 07:59:25

赞同 2 展开评论打赏
三掌柜666

十分耕耘，一定会有一分收获！

楼主你好，如果您需要加载多个外部脚本，并在它们全部加载完成后执行下一步操作，可以使用Promise.all()方法来实现。Promise.all()方法接受一个包含多个Promise对象的数组，并返回一个Promise对象，该对象在所有Promise对象都完成后解析。

以下是一个示例代码，演示如何使用Promise.all()方法加载两个外部资源，并在它们全部加载完成后执行下一步函数：

javascript Copy // 定义要加载的外部脚本列表 const scriptList = [ "https://cdn.bootcdn.net/ajax/libs/echarts/5.1.1/echarts.min.js", "https://cdn.bootcdn.net/ajax/libs/echarts/5.1.1/theme/macarons.min.js" ];

// 使用Promise.all()方法加载多个外部脚本 Promise.all(scriptList.map(src => his.utils.loadScript(src))) .then(() => { // 所有外部脚本都加载完成后执行下一步函数 console.log("All scripts loaded"); // 在这里执行下一步操作 }) .catch(err => { // 如果加载过程中出现错误，可以在这里处理错误 console.error("Error loading scripts:", err); }); 在这个示例代码中，我们首先定义了要加载的外部脚本列表，然后使用Promise.all()方法加载这些外部脚本。在Promise.all()方法返回的Promise对象解析后，我们可以在then()方法中执行下一步函数。

请注意，在加载多个外部脚本时，它们的加载顺序可能是随机的，因此您需要确认它们是否独立于彼此，或者需要按照某种特定顺序加载。

2023-06-10 07:53:44

赞同 2 展开评论打赏
Star时光
在 React 组件中，可以在 componentDidMount 方法中动态加载多个外部脚本。以下是一种实现方式：
```
import React from 'react';

class MyComponent extends React.Component {
  componentDidMount() {
    const scripts = [
      'https://example.com/script1.js',
      'https://example.com/script2.js',
      'https://example.com/script3.js'
    ];

    // 动态加载多个外部脚本
    for (let i = 0; i < scripts.length; i++) {
      const script = document.createElement('script');
      script.src = scripts[i];
      script.async = true;
      document.body.appendChild(script);
    }
  }

  render() {
    return (
      <div>
        {/* 组件内容 */}
      </div>
    );
  }
}

export default MyComponent;
```
在上面的代码示例中，我们定义了一个数组 scripts，包含了多个需要动态加载的外部脚本的 URL。然后，我们使用一个循环语句，遍历这个数组，并逐个创建 <script> 标签，并设置 src 属性为对应的脚本 URL，以及 async 属性为 true，表示异步加载脚本。最后，将这个 <script> 标签添加到 <body> 元素下。

请注意，由于我们是动态加载外部脚本，因此在组件卸载时需要手动删除这些脚本标签，以避免内存泄漏等问题。可以在 componentWillUnmount 生命周期方法中进行清理操作，例如：
```
componentWillUnmount() {
  const scripts = document.getElementsByTagName('script');
  for (let i = scripts.length - 1; i >= 0; i--) {
    const script = scripts[i];
    if (script && script.parentNode) {
      script.parentNode.removeChild(script);
    }
  }
}
```
上述代码会遍历当前页面上所有的 <script> 标签，并将它们从 <body> 元素下删除。这样可以确保在组件卸载时，清理掉之前动态添加的脚本标签。
2023-06-09 22:06:41

赞同 2 展开评论打赏