fetch or axios?

最新推荐文章于 2025-08-17 17:24:42 发布

转载最新推荐文章于 2025-08-17 17:24:42 发布 · 146 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：https://juejin.im/post/5d09ddb2f265da1baf7cf007

文章标签：

#json

本文对比了Fetch和Axios的功能。Axios兼容性更好，如Fetch在IE 11中无法使用。还介绍了二者在请求体、请求对象、请求函数参数、请求成功判断及获取JSON对象响应等方面的差异。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

Fetch and Axios are very similar in functionality, but for more backwards compatibility Axios seems to work better (fetch doesn't work in IE 11 for example, check this post)

Fetch JSON post request

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's body = Axios' data -Fetch's body has to be stringified, Axios' data contains the object -Fetch has no url in request object, Axios has url in request object -Fetch request function includes the url as parameter, Axios request function does not include the url as parameter. -Fetch request is ok when response object contains the ok property, Axios request is ok when status is 200 and statusText is 'OK' -To get the json object response: in fetch call the json() function on the response object, in Axios get data property of the response object.

转载于:https://juejin.im/post/5d09ddb2f265da1baf7cf007