React Native无法运行成功的提取来表达API

Question

鉴于以下设置：

server.js

const express = require('express')
const path = require('path')
const app = express()
const cors = require('cors')
const port = process.env.PORT || 8080

app.use(cors())

app.get('/api', (req, res) => {
  res.send({code: 200, message: 'I have arrived!'})
})

app.listen(port, () => console.log(`I can hear your thoughts on ${port}`))

以及带有调用的表示组件：

App.js

componentDidMount() {
  fetch(`/api`, {
    method: 'GET',
    headers: {
      'Content-Type': 'application/json',
      'Accept': 'application/json'
    }
  }).then(res => {
    console.log(res)
    return res.json()
  }).then(response => {
    console.log(response)
    this.data = response
  }).catch(error => {
    this.error = error.message || error.error
  })
}

的package.json：

"scripts": {
  "start": "npm-run-all --parallel start:client start:server",
  "start:client": "node node_modules/react-native/local-cli/cli.js start",
  "start:server": "node server.js",
  "test": "jest"
},

我通过yarn start运行应用程序，我看到日志：“我能听到你的想法”......然而，取消电话从未发出过。如果我在fetch调用中提供另一个完全限定的url，它会按预期返回数据，但是我无法从组件内点击express api。

• 如果我将http://localhost:8080/api放在浏览器中，我会收到回复。
• 如果我将http://localhost:8080/api放在fetch调用中，它永远不会被调用（或者至少看起来不是）。

如何正确配置它以在本地运行时调用express api？

一如既往地感谢任何方向，所以提前感谢！

Answer 1

我认为这个问题有两个方面。

---

首先，您在同一个终端窗口中运行服务器和捆绑器。我相信这会让他们感到困惑。

在单独的窗口中运行它们。是的，这意味着你必须运行一个额外的命令，但这意味着你将能够清楚地看到每个命令的日志。

此外，您可能必须重新启动捆绑程序，尤其是当您添加新程序包时，这意味着重新启动服务器。

同样，当您更新服务器时，您必须重新启动它，这也会导致您重新启动捆绑程序。在同一个窗口中运行它们似乎不是一个好主意。

---

其次你使用localhost作为api。这在您的计算机上运行良好，因为api正在您的计算机的localhost上运行，因此它可以找到它。但是，当您在设备上运行它并使用localhost时，它会在您设备的localhost上查找api并且无法在那里找到它，因此它不会带回结果。

---

你的解决方案很清楚。首先，在不同的终端窗口中运行您的捆绑器和服务器。其次使用计算机的IP地址，以便模拟器/模拟器可以轻松找到api所在的位置。

我复制了你的代码，只对react-native代码做了两处修改。

1. 添加警报以显示来自response请求的error和fetch
2. 使用我的计算机的本地IP地址而不是localhost

以下是我在Android和iOS上运行它的一些图片，使用您的代码和我在上面详述的更改。

Android

iOS