Обращение ajax с реактивом

Как мне обрабатывать запросы ajax в довольно традиционном веб-приложении? В частности, с использованием React для представлений, имея бэкэнд, который обрабатывает данные, такие как текст, а что нет, но используя ajax для автоматического сохранения пользовательских взаимодействий, таких как переключение параметров или симпатия к сообщению на сервер.

Должен ли я просто использовать jQuery для этого, или что-то вроде Backbone будет более полезным?

Ответ 1

На всякий случай кто-то наткнулся на это и не знает, что jQuery упрощает отправку вызовов AJAX. Поскольку React - это просто JavaScript, он будет работать так же, как и любой другой вызов JQuery AJAX.

Реагировать на собственную документацию использует jQuery, чтобы сделать вызов AJAX, поэтому я предполагаю, что он достаточно хорош для большинства целей независимо от того, стек или стек.

componentDidMount: function() {
    $.ajax({
      url: this.props.url,
      dataType: 'json',
      cache: false,
      success: function(data) {
        this.setState({data: data});
      }.bind(this),
      error: function(xhr, status, err) {
        console.error(this.props.url, status, err.toString());
      }.bind(this)
    });
  },

Ответ 2

Пожалуйста, ознакомьтесь с официальной документацией Facebook о Complementary Tools на https://github.com/facebook/react/wiki/Complementary-Tools

Они просто рекомендуют несколько API для извлечения данных, таких как

axios : HTTP-клиент на основе Promise для браузера и node.js.
JQuery AJAX : Введение не требуется.
superagent : легкая "изоморфная" библиотека для запросов AJAX.
reqwest : AJAX снова и снова. Включает поддержку обещаний xmlHttpRequest, JSONP, CORS и CommonJS A. Поддержка браузера берет свое начало в IE6.

Мой личный фаворит - это axios из-за обещаний, которые работают как в браузере, так и в nodejs env, и даже на официальном веб-сайте реакцииJS рекомендуют то же самое в AJAX и API

Ответ 3

Вы можете использовать JavaScript Fetch API, он также поддерживает GET и POST, а также имеет встроенные обещания.

fetch('/api/getSomething').then(function() {...})

Ответ 4

Я бы не использовал JQuery, так как AJAX-вызовы на самом деле не такие сложные, и JQuery - довольно большая зависимость. См. Примечание Vanillajs о выполнении вызовов AJAX без библиотек: http://vanilla-js.com/

Ответ 5

Я определенно предлагаю вам использовать Fetch API. Это очень просто понять, поддерживает все методы, и вы можете использовать async/await вместо promise/then и перезванивать ад.

Например:

fetch(`https://httpbin.org/get`,{
    method: `GET`,
    headers: {
        'authorization': 'BaseAuth W1lcmxsa='
    }
}).then((res)=>{
    if(res.ok) {
        return res.json();
    }
}).then((res)=>{
    console.log(res); // It is like final answer of XHR or jQuery Ajax
})

Лучше или async/await способ:

(async function fetchAsync () {
    let data = await (await fetch(`https://httpbin.org/get`,{
                                method: `GET`,
                                headers: {
                                    'authorization': 'BaseAuth W1lcmxsa='
                                }
                            })).json();
                      console.log(data);
})();