Как подключить веб-API к реактивному проекту через AJAX?

Question

У меня есть два проекта в файле решения, один из которых является реагирующим проектом, а другой - проектом webAPI. Я проверил, что webAPI работает, получив доступ к контроллеру через URL. Моя единственная проблема сейчас заключается в доступе к проекту webAPI из проекта React. Я знаю, что для того, чтобы это работало, оба должны работать в разных экземплярах, я просто не уверен, что добавить в свой код AJAX для вызова webAPI.

Answer 1

Эта статья действительно поможет вам https://reactjs.org/docs/faq-ajax.html реализовать ajax в реакции.

Вы можете использовать браузер Fetch API, который поможет получить доступ к ресурсам из других сетей в вашем случае из веб-API. см. https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API

В своем приложении реакции вы можете написать что-то вроде -

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

Answer 2

Я бы предложил вам использовать библиотеку 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 и другие запросы и использовать конфигурации, если вам нужно.