JavaScript Promise then方法未执行求助：CDN加载回调异常

学习JavaScript的Promise概念时，编写了loadURL函数，意图通过Promise将CDN链接加载到link标签中，预期函数触发resolve回调后执行then部分打印返回值，但实际then和catch部分均未执行，控制台无任何对应输出，需要解决该问题以正常执行then逻辑。

代码如下：

let loadURL = (href) => {
  return new Promise((resolve, reject) => {
    let newLink = document.createElement('link');
    newLink.href = href;
    document.body.appendChild(newLink);
    newLink.onload = () => {
      resolve(1);
    }
    newLink.onerror = () => {
      reject(0);
    }
  })
}

let p1 = loadURL("https://cdn.jsdelivr.net/npm/bootstrap@5.3.1/dist/css/bootstrap.min.css");
p1.then((value) => {
  console.log(value);
}).catch((error) => {
  console.log("There is an Error " + error);
})

控制台截图：

问题根源 #

创建link元素时未设置rel="stylesheet"属性，浏览器无法识别这是CSS样式表资源，不会发起加载请求，因此onload和onerror事件都不会被触发，Promise始终处于pending状态，导致then/catch回调都无法执行。

修复代码 #

在创建link元素后，添加rel属性声明资源类型：

let loadURL = (href) => {
  return new Promise((resolve, reject) => {
    let newLink = document.createElement('link');
    newLink.href = href;
    // 关键：添加rel属性，告诉浏览器这是样式表
    newLink.rel = 'stylesheet';
    document.body.appendChild(newLink);
    newLink.onload = () => {
      resolve(1);
    }
    newLink.onerror = () => {
      reject(0);
    }
  })
}

let p1 = loadURL("https://cdn.jsdelivr.net/npm/bootstrap@5.3.1/dist/css/bootstrap.min.css");
p1.then((value) => {
  console.log(value);
}).catch((error) => {
  console.log("There is an Error " + error);
})

添加rel="stylesheet"后，浏览器会正确加载CSS资源，资源加载完成时触发onload事件，Promise执行resolve，then回调就会正常打印1。

内容的提问来源于stack exchange，提问作者Aditya Shinde