React 项目 使用fetch请求mock接口 报错 Uncaught (in promise) SyntaxError: Unexpected token ‘＜‘, “＜!DOCTYPE “...

问题描述#

在使用 React 框架编写前端时，这边我是用的mock来模拟数据，使用fetch来请求

原来使用原生 HTML 的时候，曾经使用 fetch 来读取本地文件，优点是不需要引用第三方包：

//请求页面

useEffect(() => {
    fetch("/userLogin")
      .then((res) => res.json())
      .then((data) => console.log(data));
  }, []);

fetch 中的 url 属性是 mock模拟接口的url。然而这次既然报错了：

Uncaught (in promise) SyntaxError: Unexpected token '<', "<!DOCTYPE "... is not valid JSON

反复检查并没有发现任何不对，尝试改了一下路径中的文件名，发现如果写一个不存在的文件名，报的错是完全一致的；后来发现，fetch 是网页向前端服务器发起的请求，访问到的是项目根目录下的 public 文件夹

解决方案#

1，不使用mock，将想要获取的文件移动到正确位置即可。例如上文中提到的 url 对应的目录就是/public/userLogin.json。

2， 使用fetch-mock

安装 npm install fetch-mock

导入 import fetchMock from ‘fetch-mock’

请求即可

 3，直接使用 axios 来进行请求

注意事项

一定要在请求页面来引入你的mock模拟接口文件