Jquery ajax 请求完成并使用 Axios 失败答案

【问题标题】：Jquery ajax request done and fail with AxiosJquery ajax 请求完成并使用 Axios 失败
【发布时间】：2019-06-08 23:58:29
【问题描述】：

我有一个自定义 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？

【问题讨论】：

我假设动词是你传递给 axios 函数的字符串？例如'GET'，如果不是，它应该是你想要的方法。
Yes 动词是 GET、POST、PUT、DELETE 字符串。请求确实通过了，我可以在日志中看到它，后端 rails api 也确实发送了响应
你能清理一下你的API类代码吗？例如，send 方法在哪里？为什么在类定义中而不是在方法中存在程序 jQuery.ajax() 代码？
@Phil 我更新了 API 类并添加了所有缺失的代码

标签： javascript jquery ajax request axios

【解决方案1】：

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 属性中。

考虑到这一点，要用 Axios 直接替换 jQuery，您需要执行以下操作...

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 library。

另请注意，Object.entries() 在任何版本的 Internet Explorer 中均不可用。

【讨论】：