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}`))

и компонент представления с вызовом:

Приложение.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 и вижу журнал: «Iмогу услышать ваши мысли "... Однако вызов извлечения никогда не производится .Если я предоставляю другой полностью определенный URL-адрес в вызове fetch, он возвращает данные, как и ожидалось, однако я не могу получить доступ к быстрому api из компонента.

• Если я помещу http://localhost:8080/api в браузерЯ получаю ответ.
• Если я помещаю http://localhost:8080/api в вызов извлечения, он никогда не вызывается (или, по крайней мере, не кажется).

КакМогу ли я правильно настроить этот параметр для вызова экспресс-API при локальном запуске?

Как всегда, приветствуется любое направление, поэтому заранее спасибо!

Answer 1

Я считаю, что проблема в этом заключается в два раза.

---

Сначала вы запускаете сервер и упаковщик в одном окне терминала.Я считаю, что это приводит их в замешательство.

Запустите их в отдельных окнах.Да, это означает, что вам нужно выполнить дополнительную команду, но это будет означать, что вы сможете четко видеть журналы для каждого из них.

Также вам может потребоваться перезапустить ваш упаковщик, особенно когда вы добавляете новые пакеты, что будет означать перезапуск вашего сервера.

Точно так же, когда вы обновляете свой сервер, вам придется его перезагружать, что также вызывает перезапуск вашего упаковщика.Не кажется хорошей идеей запускать их в одном окне.

---

Во-вторых, вы используете localhost для API.Это хорошо работает на вашем компьютере, потому что API работает на компьютере localhost, поэтому он может его найти.Однако, когда вы запускаете его на устройстве и используете localhost, он ищет API на локальном хосте вашего устройства и не может найти его там, поэтому он не возвращает результат.

---

ВашРешение вполне понятно.Во-первых, запустите ваш упаковщик и ваш сервер в разных терминальных окнах.А во-вторых, используйте IP-адрес вашего компьютера, чтобы эмулятор / симулятор мог легко найти, где находится API.

Я скопировал ваш код и внес только два изменения в код react-native.

1. Добавлены оповещения для отображения response и error из fetch запроса
2. Использовал мой локальный IP-адрес моего компьютера вместо localhost

Вот несколько изображений, на которых я запускаю его на Android и iOS, используя ваш код и изменения, которые я подробно описал выше.

Android

iOS