React Native 无法运行成功的 fetch 来表达 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 调用。如果我在 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. 添加了警报以显示来自fetch 请求的response 和error
2. 使用我电脑的本地IP地址而不是localhost

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

安卓

iOS