在项目开发中,静态资源的获取都可以通过请求获取,想要获取文件内容,只需要将文件地址作为请求发送即可
读取文件源内容
const path = '资源文件地址(必须是绝对路径)'
fetch(path)
.then((response) => {
if (!response.ok) {
throw new Error('Network response was not ok')
}
return response.text()
})
.then((data) => {
console.log('data===', data)
})
.catch((error) => {
console.error(
'There has been a problem with your fetch operation: ',
error,
)
})
问题
请求发送成功,但是获取的内容并不是我想要的,而是项目的index.html
思考
1. 为什么返回的不是请求的文件?
请求文件资源不存在,服务器未找到匹配的文件,只能返回该项目的默认index.html
2. 找不到文件的原因?路径错误?文件名有误?
必须是绝对路径
我们一般项目里都会通过webpack或vite设置路径别名@,便捷开发。所以平时获取图片,导入文件都会使用别名@。此时你也是否在发送请求时使用别名@呢,问题的根据原就在此
使用别名开发时是webpack和vite等工具提供的,在dom和import导入时会自动解析
但此时我们想要将路径作为地址发送网络请求,fetch API 是不知道如何处理这个别名的,它只能发送 HTTP 请求到服务器。
解决
当使用别名时,请求地址中@别名未被解析,所以服务器找不到@目录下的文件,返回默认的index.html
使用绝对路径之后再次请求
得到正确的文件内容