如何使用 React Native 调用 API 接口？-JavaScript中文网-JavaScript教程资源分享门户

React Native 是一种使用 JavaScript 语言编写原生移动应用的框架。它允许开发者使用类似 React 的组件模型来构建 UI，然后调用原生 API 来处理应用的各种功能，例如文件系统、访问相机、地理位置信息和网络请求等。在本文中，我们将学习如何使用 React Native 调用 API 接口。

1. 引入 API

React Native 提供了一个叫做 Axios 的库，用于在 JavaScript 中进行 HTTP 请求。我们可以使用 npm 来安装它。

npm install axios

axios 支持各种 HTTP 请求方法，例如 GET、POST 和 DELETE，还支持 Promise API。这就使得我们可以使用异步请求来避免 UI 阻塞。

2. 发送 HTTP 请求

在实际应用中，我们常常需要从服务器获取数据。我们可以使用 axios 来发送 GET 请求，并且让服务器返回 JSON 格式的数据。

-- -------------------- ---- -------
------ ----- ---- --------

------ ------- ----- --- ------- --------- -
  ------------------ -
    -------------
    ---------- - - --------- -- --
  -

  ------------------- -
    ----------------------------------------
      --------- -- -
        ----- -------- - ---------
        --------------- -------- ---
      ---
  -

  -------- -
    ------ -
      ------
        -------------------------------- -- -
          ----------------------------
        ---
      -------
    --
  -
-

上面的代码展示了如何在 React Native 中使用 axios 发送 GET 请求来获取文章数据。我们将数据存储在组件的 state 中，并在渲染时使用 map 方法来渲染每篇文章的标题。

3. 处理 HTTP 错误

当服务器返回错误状态代码时，axios 会抛出一个错误，我们可以使用 catch 方法来捕获这个错误并对其进行处理。

componentDidMount() {
  axios.get('http://example.com/articles')
    .then(res => {
      const articles = res.data;
      this.setState({ articles });
    })
    .catch(err => console.log(err));
}

上面的代码中，我们在 catch 方法中记录了错误到控制台。在实际应用中，我们可以使用一些友好的方式向用户展示错误信息。

4. 发送 POST 请求

除了获取数据，我们可以使用 axios 来向服务器发送数据。例如，我们可以使用 POST 请求来创建一篇新文章。

axios.post('http://example.com/articles', {
  title: 'My new article',
  content: 'Lorem ipsum dolor sit amet.'
})
  .then(res => console.log(res))
  .catch(err => console.log(err));

上面的代码展示了如何使用 axios 发送 POST 请求来创建一篇新文章。我们将文章的内容作为一个 JSON 对象发送到服务器。

5. 发送 DELETE 请求

最后，我们可以使用 axios 发送 DELETE 请求来删除一篇文章。

axios.delete('http://example.com/articles/1')
  .then(res => console.log(res))
  .catch(err => console.log(err));

上面的代码展示了如何使用 axios 发送 DELETE 请求来删除 ID 为 1 的文章。

结论

在本文中，我们学习了如何使用 React Native 和 axios 库来调用后端 API。我们了解了如何发送 HTTP 请求，处理 HTTP 错误以及发送 POST 和 DELETE 请求。这将大大提升我们的应用程序的交互性和用户体验。为了更好地了解如何使用 React Native 和 axios 来构建移动应用程序，我们可以参考 React Native 官方文档并查看更多示例代码。

来源：JavaScript中文网，转载请注明来源 https://www.javascriptcn.com/post/6704a087d91dce0dc84f8fc8