JQuery AJAX-запрос выполнен и терпит неудачу с Axios - PullRequest
Новая
       14

JQuery AJAX-запрос выполнен и терпит неудачу с Axios

0 голосов
/ 15 января 2019

У меня есть пользовательская настройка API как: 

export default class API {

  static send(verb, resource, raw_params, callback, errcallback) {

    let org_id = window.localStorage._organization_id,
      params = Object.keys(raw_params).reduce(function(o, k) {
      o[k] = raw_params[k];
      return o;
    }, {});

    errcallback = typeof errcallback === 'function' ? errcallback : function() {};

    if (!!org_id && !params.hasOwnProperty('organization_id')) {
      params.organization_id = org_id;
    }

    $.ajax({
      url: URL + '/' + resource,
      type: verb,
      data: params
      xhrFields: { withCredentials: true }
    })
    .done(callback)
    .fail(errcallback);
  }

  static get(resource, params, callback, errcallback) {
    API.send('GET', resource, params, callback, errcallback);
  }

  static post(resource, params, callback, errcallback) {
    API.send('POST', resource, params, callback, errcallback);
  }

  static put(resource, params, callback, errcallback) {
    API.send('PUT', resource, params, callback, errcallback);
  }

  static del(resource, params, callback, errcallback) {
    API.send('DELETE', resource, params, callback, errcallback);
  }
}

Затем я могу сделать запрос API из любого файла в моем приложении как: 

API.post('x/y', {params}, res => {
  this.setState(res);
}, (xhr) => {
  const errorMessage = JSON.parse(xhr.responseText).message;
  alert('error', 5000, errorMessage);
}

Я пытаюсь заменить это на axios, и я заменил запрос $.ajax следующим: 

axios({
  method: verb,
  url: `${URL}/${resource}`,
  data: params,
  xhrFields: { withCredentials: true }
})
 .then(callback)
 .catch(errcallback)

Но он не вызывает ответный или ошибочный обратный вызов. Есть ли способ, которым я могу обновить этот класс, чтобы обработать это, или я должен вместо этого заменять каждый запрос на запрос axios и использовать определенные Axios res и xhr?

1 Ответ

0 голосов
/ 15 января 2019

Axios по умолчанию отправляет данные как application/json, тогда как jQuery по умолчанию равен application/x-www-form-urlencoded. Смотри https://github.com/axios/axios#using-applicationx-www-form-urlencoded-format.

Кроме того, хотя jQuery использует data в качестве параметров запроса для запросов GET, Axios разделяет полезные нагрузки тела запроса и параметры запроса на свойства data и params соответственно.

Имея это в виду, что для замены jQuery на Axios вам потребуется выполнить следующее ... 

const request = {
  method: verb,
  url: `${URL}/${resource}`,
  withCredentials: true      // ? are you sure you need this?
}
if (verb === 'GET' || verb === 'DELETE') {
  request.params = params // query params, no request body
} else {
  /// set appropriate request content-type
  request.headers = { 'content-type': 'application/x-www-form-urlencoded' }

  // convert "params" object into request body string
  request.data = Object.entries(params).reduce((data, [key, value]) => {
    data.append(key, value)
    return data
  }, new URLSearchParams())
}
axios(request).then(callback).catch(errcallback)

Object.entries(params).reduce(...) - это просто упрощенный пример создания строки application/x-www-form-urlencoded из плоского объекта. Сам Axios рекомендует библиотеку qs .

Также следует помнить, что Object.entries() недоступен ни в одной версии Internet Explorer.

...