javascript - Jquery ajax 请求完成但 Axios 失败

Question

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

Answer 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 分别具有属性。

考虑到这一点，要将 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 library .

另请记住 Object.entries()在任何版本的 Internet Explorer 中都不可用。