如何基于JavaScript文件的相对路径发起fetch请求？

浏览器中fetch的请求路径是相对于当前页面（即index.html所在的根目录），而非脚本文件自身的位置，所以你直接写"data.json"会去根目录查找，自然找不到js文件夹里的目标文件。这里提供两种可行的解决方法：

• 方法一：直接使用相对于页面的路径
  因为data.json和script.js都在js文件夹下，从根目录出发的完整相对路径是"js/data.json"，修改代码如下：

  (async function() {
    var req = await fetch("js/data.json");
    var json = await req.json();
    // ... 后续逻辑
  })();
  

• 方法二：动态获取脚本自身路径（更灵活）
  通过document.currentScript获取当前脚本的URL，再拼接同目录下的data.json路径，这种方式不受脚本引入位置的影响，适配性更强：

  (async function() {
    // 获取当前脚本的完整URL
    const scriptUrl = new URL(document.currentScript.src);
    // 拼接同目录下的data.json的绝对URL
    const dataUrl = new URL('data.json', scriptUrl).href;
    
    var req = await fetch(dataUrl);
    var json = await req.json();
    // ... 后续逻辑
  })();
  

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