我怎样才能正确地做出响应中的 fetch api 调用？答案

【问题标题】：How can I correctly make the fetch api call in react?我怎样才能正确地做出响应中的 fetch api 调用？
【发布时间】：2019-10-29 15:48:47
【问题描述】：

我想使用 fetch 从带有 react js 的虚拟 API 中获取结果。但我从 console.log()

收到“SyntaxError: Unexpected token

handleSubmit(event) {

fetch({
  url:'http://dummy.restapiexample.com/api/v1/employees',
  mode: 'cors',
  method: 'GET',
  dataType: 'json',
  headers: {
    'Access-Control-Allow-Origin':'*',
    'Content-Type': 'multipart/form-data'
  }
})
.then(response => response.json())
.then(data => {
    console.log(data);

})
.catch(error => {
    console.error(error);
});

event.preventDefault();
}

【问题讨论】：

看起来不错！你能提供更多关于错误日志的描述吗？

标签： node.js reactjs api

【解决方案1】：

似乎您收到 404 响应，在转换为 json 时出错。在下面的代码中转换为 json 之前，我已经打印了响应。运行代码后检查您的控制台。

fetch({
  url:'http://dummy.restapiexample.com/api/v1/employees',
  mode: 'cors',
  method: 'GET',
  dataType: 'json',
  headers: {
    'Access-Control-Allow-Origin':'*',
    'Content-Type': 'multipart/form-data'
  }
})
.then(response => {
    console.log(response);
  response.json()})
.then(data => {
    console.log(data);

})
.catch(error => {
    console.error(error);
});

【讨论】：

【解决方案2】：

当我在后端遇到问题时，我通常会收到此错误。检查后端您的 API 是否以 json 格式返回数据。

【讨论】：

【解决方案3】：

Fetch 的第一个参数是 'url'，第二个参数是 'options'。试试这个：

handleSubmit(event) {
    fetch('http://dummy.restapiexample.com/api/v1/employees', {
      mode: 'cors',
      method: 'GET',
      dataType: 'json',
      headers: {
        'Access-Control-Allow-Origin':'*',
        'Content-Type': 'multipart/form-data'
      }
    })
    .then(response => response.json())
    .then(data => {
        console.log(data);

    })
    .catch(error => {
        console.error(error);
    });
    event.preventDefault();
 }

【讨论】：

【解决方案4】：

这是更新的

fetch('http://dummy.restapiexample.com/api/v1/employees')
  .then(function(response) {
    return response.json();
  })
  .then(function(data) {
    console.log("result",data);
  });

从 fetch() 返回的 Promise 不会拒绝 HTTP 错误状态，即使响应是 HTTP 404 或 500。相反，它将正常解析（将 ok 状态设置为 false），并且只会在网络故障或任何阻止请求完成的情况下拒绝。

我更喜欢与 Axios 一起使用，因为它最适合用于 React 应用程序。

axios.get( 'http://dummy.restapiexample.com/api/v1/employees')
            .then( response => {
              console.log("result",response.data)
            } )
            .catch( error => {
                 console.log("error",error)
            } );

【讨论】：

【解决方案5】：

当您向服务器发出请求并将响应解析为 JSON 时会发生这种情况，但它不是 JSON。

fetch('http://dummy.restapiexample.com/api/v1/employees').then(res => res.json())

实际请求运行良好。它得到了回应。但是 res.json() 失败了。

Read this for more suggestion

【讨论】：