使用 React Native 在 iOS 中发出 HTTP 请求

如果您一直关注我的博客，您就会知道我写了一篇关于 使用 Ionic Framework 执行 HTTP 请求的 文章。因为我最近一直在玩 React Native ，所以我想尽早弄清楚如何执行 RESTful HTTP 请求可能是个好主意，因为现在一切都有 API 后端。

React Native 的 Facebook 文档有（或在撰写本文时有）关于 从远程 API 获取电影数据的 教程。但是，它几乎没有解释如何自定义 HTTP 请求。事实上，我发现很多互联网都缺少使用 React 的 RESTful 请求的清晰文档。

这篇文章应该把事情搞清楚！

展望未来，我将假设您已设置可用作 API 端点的 Web 应用程序。只要有一个 GET 端点和一个 POST 端点，您如何设置它并不重要。我的端点将返回以下数据：

获取/测试

 {
    status: "success",
    message: "a sample GET request",
    search: {{QUERY.search}}
}

在上面的响应中， QUERY.search 是要传递到请求中的参数。响应只是返回传递的查询参数。

发布/测试

 {
    status: "success",
    message: "a sample GET request",
    search: {{QUERY.search}}
}

在上面的响应中， BODY.username 是在请求​​中传递的 JSON 正文中的一个属性。 BODY.firstname 和 BODY.lastname 属性也是如此。

好吧，既然 API 的东西已经被排除在外，让我们看看如何使用 React Native 访问这些端点。

我们将使用 fetch 函数。可以更好地理解如下：

 {
    status: "success",
    message: "a sample GET request",
    search: {{QUERY.search}}
}

请注意，对于 GET 请求， body 选项将不存在。

所以让我们用我们的 API 端点试试看：

 {
    status: "success",
    message: "a sample GET request",
    search: {{QUERY.search}}
}

上面的代码将命中我们的 POST 端点。它将在请求正文中传递 username 、 firstname 和 lastname 。当收到响应时，它将显示一个警报，吐出返回的内容，这只是回收回我们的三个属性。

这给我们留下了 GET 端点，如下所示：

 {
    status: "success",
    message: "a sample GET request",
    search: {{QUERY.search}}
}

在上面的代码中有一个 search 查询参数。端点只会将该值吐回给我们，我们会将其显示为警报。在这个例子中没有什么特别的。

如果你想看到这个项目的运行情况，请执行以下操作，假设你已经安装了 React Native 并且使用的是 Mac。使用您的终端，执行：

 {
    status: "success",
    message: "a sample GET request",
    search: {{QUERY.search}}
}

在您新创建的项目中，打开 index.ios.js 文件并将所有代码替换为以下内容：

 {
    status: "success",
    message: "a sample GET request",
    search: {{QUERY.search}}
}

还不错吧？

结论

尽管通过在线出现的少量文档不容易理解，但在 React Native 中在 RESTful HTTP 端点进行 fetch 调用并不困难。

可以在下面看到本文的视频版本。