未处理的拒绝（TypeError）：无法获取

Question

我开始从事网络开发。我使用 create-react-app 来创建我的项目。我现在可以渲染不同的页面并在页面之间建立路由，这是完美的。

现在，我正在尝试添加项目的后端部分。我正在使用express，并且可能会使用MongoDB，但我无法确切地弄清楚如何管理从客户端对服务器的调用。这是我的示例： 1. 在 App.js 中，我有以下内容，只是一个简单的登录页面：

import React, { Component } from 'react';
import MuiThemeProvider from 'material-ui/styles/MuiThemeProvider';
import logo from './logo.svg';
import RaisedButton from 'material-ui/RaisedButton';
import TextField from 'material-ui/TextField';
import './App.css';
import api from './api'
import { browserHistory } from 'react-router'

class App extends Component {

  goToUsers () {
    api.login()
  }

  render() {
    return (
      <MuiThemeProvider>
        <div className="App">
          <div className="App-header">
            <img src={logo} className="App-logo" alt="logo" />
            <h2>Welcome to React</h2>
          </div>
          <p className="App-intro">
            To get started, edit <code>src/App.js</code> and save to reload.
          </p>
          <br />
          <br />
          <TextField hintText="Login" />
          <br />
          <TextField hintText="Password" type="password" />
          <br />
          <br />
          <RaisedButton label="Login" onTouchTap={this.goToUsers}/>
        </div>
      </MuiThemeProvider>
    );
  }
}

export default App;

显然，登录函数应该从客户端获取数据，但现在我在 api.js 中有一个简单的函数，我想在其中集中我的 api 函数：

class Api {
  login () {
    fetch('localhost:3000/users')
    .then(response => {
      if (!response.ok) {
        throw new Error(response.statusText)
      }
      return response.json()
    })
  }
}

export default new Api()

最后是index.js

import React from 'react';
import ReactDOM from 'react-dom';
import injectTapEventPlugin from 'react-tap-event-plugin';
import { Router, Route, IndexRoute, IndexRedirect, browserHistory, Link } from 'react-router'

import App from './App';
import Users from './users';

injectTapEventPlugin();


ReactDOM.render(
  <Router history={browserHistory}>
    <Route path="/" component={App} />
    <Route path="/Users" component={Users} />
  </Router>
  , document.getElementById('root'))

为了简单起见，我没有复制 users.js 和其他对象，但所有类在访问http://localhost:3000/或http://localhost:3000/users时都可以正常工作

但是，当我单击该按钮时，出现错误 Unhandled Rejection (TypeError): Failed to fetch。

知道我缺少什么吗？

Answer 1

首先，确保 API 的端点正确并且服务器成功运行且没有任何问题。您可以使用 Postman 来测试您的 API。一旦您的 API 成功运行，您就可以从前端（react.js）发出请求。

fetch('localhost:3000/users')
    .then(response => {
      if (!response.ok) {
        throw new Error(response.statusText)
      }
      return response.json()
    }).catch(err=>{
    console.log(err)
})

使用 catch 来处理所有错误。

了解更多

谢谢。

Answer 2

class App extends Component {
  constructor(props) {
    super(props);
    state = { users: null }
  }
  goToUsers() {
    //just put your request directly in the method
    fetch('http://localhost:300/users')
      .then(response => {
        //do something with response
        const users = response.json();
        this.setState({ users })
      })
      .catch(err => {
        throw new Error(err)
      })
  }

  render() {
    return (
      <MuiThemeProvider>
        <div className="App">
          <div className="App-header">
            <img src={logo} className="App-logo" alt="logo" />
            <h2>Welcome to React</h2>
          </div>
          <p className="App-intro">
            To get started, edit <code>src/App.js</code> and save to reload.
          </p>
          <br />
          <br />
          <TextField hintText="Login" />
          <br />
          <TextField hintText="Password" type="password" />
          <br />
          <br />
          <RaisedButton label="Login" onTouchTap={this.goToUsers}/>
        </div>
      </MuiThemeProvider>
    );
  }
}