Javascript中具有fetch的相对路径_Javascript_Path_Relative Path_Fetch Api

Javascript中具有fetch的相对路径

javascript path

Javascript中具有fetch的相对路径,javascript,path,relative-path,fetch-api,Javascript,Path,Relative Path,Fetch Api,我今天对Javascript中的相对路径感到惊讶。我把情况归结为以下几点：假设您有如下目录结构： app/ | +--app.html +--js/ | +--app.js +--data.json 我所有的app.html都是运行js/app.js <!DOCTYPE html> <title>app.html</title> <body> <script src=js

我今天对Javascript中的相对路径感到惊讶。我把情况归结为以下几点：

假设您有如下目录结构：

app/
   | 
   +--app.html
   +--js/
        |
        +--app.js
        +--data.json

我所有的

app.html

都是运行

js/app.js

<!DOCTYPE html>
<title>app.html</title>
<body>
<script src=js/app.js></script>
</body>

数据是有效的JSON，只是一个字符串：

"Hello World"

这是

fetch

的一个非常小的用法，但是我很惊讶我传递给

fetch

的URL必须是相对于

app.html

的，而不是相对于

app.js

。我希望这个路径能够工作，因为

data.json

和

app.js

在同一个目录中（

js/

）：

为什么会出现这种情况，有什么解释吗？

当你说

fetch（'data.json'）

你实际上是在请求

http://yourdomain.com/data.json

因为它与您提出请求的页面相关。您应该以正斜杠开头，这将指示路径相对于域根：

fetch（'/js/data.json'）

。或完全符合您的域

fetch（'http://yourdomain.com/js/data.json“）

这不完全是一个建议，因为它依赖于许多东西，这些东西不能保证在任何地方都能工作，也不能保证在未来继续工作，但是它在我需要的地方对我有效，它可能会帮助你

const getRunningScript=（）=>{
返回decodeURI（新错误（）.stack.match（/（[^\n\（@]）*（[a-z]*：\/\/\/？）*？[a-z0-9\/\]*\.js/ig）[0]）
}
获取（getRunningScript（）+“/../config.json”）
.then（req=>req.json（））
。然后（配置=>{
//代码
} /代码> 一个简单的方法来理解为什么它必须是这样的：如果我们在“代码> APP/JS/Help/LogFix.js<代码>：中编写帮助函数，应该考虑应该发生什么。
//app/js/helper/logfetch.js
函数logFetch（资源）{
log（'Fetching'，resource）；
返回获取（资源）；
}

现在，考虑一下，如果使用了从<代码> APP/JS/APP.JS
//app/js/app.js
fetch（'data.json'）；//如果这是相对于js/，那么。。。
logFetch（'data.json'）；//这应该是相对于js/还是相对于js/helper/？

我们可能希望这两个调用返回相同的内容-但是如果fetch是相对于包含的文件的，那么logFetch将请求js/helper/data.json
，而不是与fetch一致的内容
如果fetch能够感知调用它的位置，那么要实现logFetch之类的助手库，JavaScript将需要一整套新的调用方位置感知功能
相比之下，执行相对于HTML文件的获取提供了更多的一致性
CSS的工作原理不同，因为它没有方法调用的复杂性：您无法创建转换其他CSS模块的“辅助CSS模块”，因此相对路径的概念更清晰。Update 2021

ES6
类路径{
构造函数（路径）{
this.arr=path.split（'/'）；
}
url（）{
返回此.arr.join（'/'）；
}
concat（）{
返回新路径（this.arr.join（'/'）；
}
向后（n）{
对于（设ii=0；ii{
这个。arr.push（st）；
});
}否则{
//串
这个.arr.push（arr_或_str）；
}
归还这个；
}
}
/*例如。
localhost/8888/test/index.js反向localhost/8888/test/
localhost/8888/test/forward（'index.js'）localhost/8888/test/index.js
localhost/8888/forward（['db'，'course.json']）localhost/8888/db/course.json
*/
//例如，我想在当前目录中获取'db/course.json'
获取（新路径（window.location.href）.backward（1）.forward（[“db”，“calendar.json”]）.url（））
。然后（res=>{
log（res.json（）.result）；
});

如果字符串与预期模式不匹配出现，请参阅JS可能来自由于SOP而无法指向其文件夹的位置，因此它总是与页面相关的。请注意，这与JavaScript没有太大关系；这是web浏览器解释HTTP请求中路径的方式。主页定义了URL c所有内容的上文本：脚本引用、图像、样式表和XHR。嗨，值得一提的是，CSS路径不是以这种方式工作的，它们是相对于样式表的源目录的，比如说，如果您有body{background image:url（pic.gif）}在css/styles.css中，浏览器将在css/中查找pic.gif，而不是/。这是我对JS的预期行为，但显然不是这样。这只是域还是真正的来源，即FQDN以及正在使用的HTTP端口，例如？似乎Chrome不再在没有服务器的情况下获取相同的目录Chrome中的行为是始终被认为是相对于根部的，即使是在根部未受激励的情况下。
"Hello World"

fetch('data.json') // nope