Axios和Fetch有什么区别?

2022-08-30 00:04:44

我通过使用Fetch调用Web服务,但是在Axios的帮助下,我可以做同样的事情。所以现在我很困惑。我应该选择Axios还是Fetch?


答案 1

Fetch和Axios在功能上非常相似,但是为了向后兼容,Axios似乎工作得更好(例如,fetch在IE 11中不起作用,请查看这篇文章)

此外,如果您使用 JSON 请求,以下是我偶然发现的一些差异。

获取 JSON 发布请求

let url = 'https://someurl.com';
let options = {
            method: 'POST',
            mode: 'cors',
            headers: {
                'Accept': 'application/json',
                'Content-Type': 'application/json;charset=UTF-8'
            },
            body: JSON.stringify({
                property_one: value_one,
                property_two: value_two
            })
        };
let response = await fetch(url, options);
let responseOK = response && response.ok;
if (responseOK) {
    let data = await response.json();
    // do something with data
}

Axios JSON post request

let url = 'https://someurl.com';
let options = {
            method: 'POST',
            url: url,
            headers: {
                'Accept': 'application/json',
                'Content-Type': 'application/json;charset=UTF-8'
            },
            data: {
                property_one: value_one,
                property_two: value_two
            }
        };
let response = await axios(options);
let responseOK = response && response.status === 200 && response.statusText === 'OK';
if (responseOK) {
    let data = await response.data;
    // do something with data
}

所以:

  • Fetch的主体 = Axios 的数据
  • Fetch的主体必须被字符串化,Axios的数据包含对象
  • Fetch 在请求对象中没有 url,Axios 在请求对象中有 url
  • 获取请求函数包括 url 作为参数,Axios 请求函数不包括 url 作为参数
  • 当响应对象包含 ok 属性时,Fetch 请求正常,当状态为 200 且 statusText 为'OK'时,Axios 请求正常
  • 要获取 json 对象响应:在 fetch 调用响应对象上的 json() 函数,在 Axios 中获取响应对象的数据属性

答案 2

它们是 HTTP 请求库...

我最终遇到了同样的疑问,但这篇文章中的表格让我选择了.这但可以与NodeJS一起使用。isomorphic-fetchfetch

http://andrewhfarmer.com/ajax-libraries/


上面的链接已死 同一个表在这里:https://www.javascriptstuff.com/ajax-libraries/

或这里:enter image description here