Question

我注意到来自公共API的简单GET请求中来自chrome的一些奇怪行为。我在Mozilla上测试了相同的代码并且没有出现任何错误，但Chrome一直在向我提出错误。有人可以帮我说出为什么我的GET电话不能用于Chrome吗？

import React, { Component } from 'react';
import './App.css';
import {getPokemon} from './services';
class App extends Component {

constructor(props) {

    super(props);

    this.state = {


        name : "",

    }
}

  onClick(){ getPokemon().then((response) => { this.setState({ name: response.name })
       })
  }

  render() {
    return (

      <div className="App">
        <button onClick={(e) => this.onClick(e)}> Click me</button>

          <h2> {this.state.name}</h2>
      </div>
    );
  }
}

export default App;

取消电话：

export const getPokemon = () => {
    return fetch(`https://pokeapi.co/api/v2/pokemon/blastoise`).then((response) => {
        if(response.statusText === 'OK') {
            return response.json();
        }
        throw new Error('Network response was not ok.');
    })
}

React＆amp;控制台错误：

React Error

顺便说一句，我已经删除了所有的chrome文件并重新安装了它们。

任何提示？

Answer 1

Response.statusText是实验性的，Chrome中的Response将statusText属性作为空字符串。一个简单的改变是将条件语句更新为：

if(response.status === 200)

Answer 2

这是它返回的内容

{
 body: ReadableStream,
 bodyUsed: false,
 headers: {},
 ok: true,
 status: 200,
 statusText: "",
 type: "cors",
 url: "https://pokeapi.co/api/v2/pokemon/blastoise/"
}

因此，您可能正在寻找ok或status

Answer 3

首先，您正在使用提取方法，并且您可能知道无法检查response.status ，因为仅当遇到网络错误或服务器端错误类型的CORS配置错误时，提取才会失败。对于重定向和所有其他错误，它仍然是成功的

请阅读：https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API/Using_Fetch

获取方法实际成功检查的正确方法如下：检查 response.ok

.then(function(response) {
   if(response.ok) {
      console.log("success");
   }
   throw new Error('Network response was not ok.');
}

普通GET请求无法在Chrome（API）中运行

3 个答案: