Question

我在解决方案文件中有两个项目，其中一个是react项目，另一个是webAPI项目。我通过通过URL访问控制器来验证webAPI是否可以工作。现在我唯一的问题是从React项目访问webAPI项目。我知道两者都必须在单独的实例中运行才能正常工作，我只是不确定在AJAX代码中放什么来调用webAPI。 / p>

Answer 1

我建议您使用axios库，该库非常适合在ReactJs应用程序上使用。这是npm的官方库，您也可以查看其文档：https://www.npmjs.com/package/axios

您可以这样简单地发出请求：

// Make a request for a user with a given ID
axios.get('/user?ID=12345')
  .then(function (response) {
    console.log(response);
  })
  .catch(function (error) {
    console.log(error);
  });

// Optionally the request above could also be done as
axios.get('/user', {
    params: {
      ID: 12345
    }
  })
  .then(function (response) {
    console.log(response);
  })
  .catch(function (error) {
    console.log(error);
  });

您可以查看其文档，了解如何提出post，delete和其他要求，并根据需要使用配置。

Answer 2

本文确实可以帮助您https://reactjs.org/docs/faq-ajax.html在React中实现Ajax。

您可以使用浏览器的Fetch API，以帮助您从Web API访问其他网络中的资源。推荐-https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API

在您的react应用中，您可以编写类似-

fetch("https://api.example.com/items")
      .then(res => res.json())
      .then(
        (result) => {
          console.log(result)
        },
        // Note: it's important to handle errors here
        // instead of a catch() block so that we don't swallow
        // exceptions from actual bugs in components.
        (error) => {
          console.log(error)
        }
      )

如何通过AJAX将Web API连接到react项目？

2 个答案: