”工欲善其事,必先利其器。“—孔子《论语.录灵公》
首页 > 编程 > JavaScript 中 Axios 和 Fetch 的区别

JavaScript 中 Axios 和 Fetch 的区别

发布于2024-11-01
浏览:130

Difference Between Axios & Fetch in Javascript

在 JavaScript 中,Axios 和原生的 Fetch API 都用于发出 HTTP 请求,但它们在特性、易用性和功能方面存在一些差异。细分如下:

1. 易用性:

  • axios:

    Axios 简化了发出请求和处理响应。它自动解析 JSON 响应,使其更易于使用。

     axios.get('/api/user')
       .then(response => console.log(response.data))
       .catch(error => console.error(error));
    
  • 拿来:

    使用 fetch 时,需要显式处理 JSON 解析,这增加了一个额外的步骤。

     fetch('/api/user')
       .then(response => response.json())
       .then(data => console.log(data))
       .catch(error => console.error(error));
    

2. 响应处理:

  • axios: axios 会自动解析响应,如果响应状态超出 2xx 范围则抛出错误,因此可以直接在 .catch() 块中处理错误。
  • 拿来:

    对于 fetch,非 2xx 状态代码(如 404 或 500)不会被视为错误。您必须手动检查响应状态并在需要时抛出错误。

     fetch('/api/user')
       .then(response => {
         if (!response.ok) throw new Error('Network response was not ok');
         return response.json();
       })
       .then(data => console.log(data))
       .catch(error => console.error(error));
    

3. 请求和响应拦截:

  • axios:

    Axios 提供内置拦截器,允许您全局修改请求或处理响应,这对于添加身份验证令牌、日志记录等非常有用。

     axios.interceptors.request.use(config => {
       config.headers['Authorization'] = 'Bearer token';
       return config;
     });
    
  • 拿来:

    Fetch 没有内置拦截器,因此如果需要此行为,您需要手动将 fetch 调用包装在自定义函数中。

4. 浏览器兼容性:

  • axios: Axios 适用于较旧的浏览器(IE 11 及更早版本)并在内部处理 polyfill。
  • 拿来: Internet Explorer 不支持 Fetch API。您可能需要像whatwg-fetch 这样的polyfill 来在旧版浏览器中支持它。

5. 数据处理:

  • axios:

    Axios 在发出 POST 请求时自动对数据进行字符串化,并将 Content-Type 设置为 application/json。它还支持轻松发送 FormData 等其他格式的数据。

     axios.post('/api/user', { name: 'John' });
    
  • 拿来:

    在 fetch 中,您需要手动对数据进行字符串化并设置 POST 请求的标头。

     fetch('/api/user', {
       method: 'POST',
       headers: { 'Content-Type': 'application/json' },
       body: JSON.stringify({ name: 'John' })
     });
    

6. 取消请求:

  • axios:

    Axios 内置支持使用 CancelToken 取消请求。

     const source = axios.CancelToken.source();
     axios.get('/api/user', { cancelToken: source.token });
     source.cancel('Request canceled.');
    
  • 拿来:

    使用 fetch,您需要使用 AbortController 来取消请求,这可能会更复杂一些。

     const controller = new AbortController();
     fetch('/api/user', { signal: controller.signal });
     controller.abort();
    

7. 错误处理:

  • axios: Axios 对于非 2xx 响应自动抛出错误,错误处理更加一致和集中。
  • 拿来: Fetch 需要更多的手动错误处理,因为它只会拒绝网络错误的承诺,而不会拒绝 HTTP 错误状态代码。

结论:

  • Axios功能更加丰富,易于使用,并为处理请求提供了更好的抽象。
  • Fetch 是一种现代的原生 API,需要较少的依​​赖项,但需要更多的手动工作来处理某些功能,如错误、拦截器和数据处理。

如果您希望更好地控制您的请求,您可能会坚持使用 fetch。如果您想要简化 HTTP 请求的东西,axios 将是更好的选择。

版本声明 本文转载于:https://dev.to/pulkitgovrani/difference-between-axios-fetch-in-javascript-25od?1如有侵犯,请联系[email protected]删除
最新教程 更多>
  • Java中如何使用观察者模式实现自定义事件?
    Java中如何使用观察者模式实现自定义事件?
    在Java 中创建自定义事件的自定义事件在许多编程场景中都是无关紧要的,使组件能够基于特定的触发器相互通信。本文旨在解决以下内容:问题语句我们如何在Java中实现自定义事件以促进基于特定事件的对象之间的交互,定义了管理订阅者的类界面。以下代码片段演示了如何使用观察者模式创建自定义事件: args)...
    编程 发布于2025-07-24
  • C++20 Consteval函数中模板参数能否依赖于函数参数?
    C++20 Consteval函数中模板参数能否依赖于函数参数?
    [ consteval函数和模板参数依赖于函数参数在C 17中,模板参数不能依赖一个函数参数,因为编译器仍然需要对非contexexpr futcoriations contim at contexpr function进行评估。 compile time。 C 20引入恒定函数,必须在编译时进行...
    编程 发布于2025-07-24
  • Android如何向PHP服务器发送POST数据?
    Android如何向PHP服务器发送POST数据?
    在android apache httpclient(已弃用) httpclient httpclient = new defaulthttpclient(); httppost httppost = new httppost(“ http://www.yoursite.com/script.p...
    编程 发布于2025-07-24
  • Python环境变量的访问与管理方法
    Python环境变量的访问与管理方法
    Accessing Environment Variables in PythonTo access environment variables in Python, utilize the os.environ object, which represents a mapping of envir...
    编程 发布于2025-07-24
  • 在UTF8 MySQL表中正确将Latin1字符转换为UTF8的方法
    在UTF8 MySQL表中正确将Latin1字符转换为UTF8的方法
    在UTF8表中将latin1字符转换为utf8 ,您遇到了一个问题,其中含义的字符(例如,“jáuòiñe”)在utf8 table tabled tablesset中被extect(例如,“致电。为了解决此问题,您正在尝试使用“ mb_convert_encoding”和“ iconv”转换受...
    编程 发布于2025-07-24
  • 如何使用node-mysql在单个查询中执行多个SQL语句?
    如何使用node-mysql在单个查询中执行多个SQL语句?
    Multi-Statement Query Support in Node-MySQLIn Node.js, the question arises when executing multiple SQL statements in a single query using the node-mys...
    编程 发布于2025-07-24
  • MySQL中如何高效地根据两个条件INSERT或UPDATE行?
    MySQL中如何高效地根据两个条件INSERT或UPDATE行?
    在两个条件下插入或更新或更新 solution:的答案在于mysql的插入中...在重复键更新语法上。如果不存在匹配行或更新现有行,则此功能强大的功能可以通过插入新行来进行有效的数据操作。如果违反了唯一的密钥约束。实现所需的行为,该表必须具有唯一的键定义(在这种情况下为'名称'...
    编程 发布于2025-07-24
  • Python高效去除文本中HTML标签方法
    Python高效去除文本中HTML标签方法
    在Python中剥离HTML标签,以获取原始的文本表示Achieving Text-Only Extraction with Python's MLStripperTo streamline the stripping process, the Python standard librar...
    编程 发布于2025-07-24
  • 如何为PostgreSQL中的每个唯一标识符有效地检索最后一行?
    如何为PostgreSQL中的每个唯一标识符有效地检索最后一行?
    postgresql:为每个唯一标识符在postgresql中提取最后一行,您可能需要遇到与数据集合中每个不同标识的信息相关的信息。考虑以下数据:[ 1 2014-02-01 kjkj 在数据集中的每个唯一ID中检索最后一行的信息,您可以在操作员上使用Postgres的有效效率: id dat...
    编程 发布于2025-07-24
  • 对象拟合:IE和Edge中的封面失败,如何修复?
    对象拟合:IE和Edge中的封面失败,如何修复?
    To resolve this issue, we employ a clever CSS solution that solves the problem:position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%)...
    编程 发布于2025-07-24
  • 如何使用Python有效地以相反顺序读取大型文件?
    如何使用Python有效地以相反顺序读取大型文件?
    在python 反向行读取器生成器 == ord('\ n'): 缓冲区=缓冲区[:-1] 剩余_size- = buf_size lines = buffer.split('\ n'....
    编程 发布于2025-07-24
  • FastAPI自定义404页面创建指南
    FastAPI自定义404页面创建指南
    response = await call_next(request) if response.status_code == 404: return RedirectResponse("https://fastapi.tiangolo.com") else: ...
    编程 发布于2025-07-24
  • Go语言如何动态发现导出包类型?
    Go语言如何动态发现导出包类型?
    与反射软件包中的有限类型的发现能力相反,本文探索了替代方法,探索了在Runruntime。go import( “ FMT” “去/进口商” ) func main(){ pkg,err:= incorter.default()。导入(“ time”) 如果err...
    编程 发布于2025-07-24
  • 哪种方法更有效地用于点 - 填点检测:射线跟踪或matplotlib \的路径contains_points?
    哪种方法更有效地用于点 - 填点检测:射线跟踪或matplotlib \的路径contains_points?
    在Python Matplotlib's path.contains_points FunctionMatplotlib's path.contains_points function employs a path object to represent the polygon.它...
    编程 发布于2025-07-24
  • 编译器报错“usr/bin/ld: cannot find -l”解决方法
    编译器报错“usr/bin/ld: cannot find -l”解决方法
    错误:“ usr/bin/ld:找不到-l “ 此错误表明链接器在链接您的可执行文件时无法找到指定的库。为了解决此问题,我们将深入研究如何指定库路径并将链接引导到正确位置的详细信息。添加库搜索路径的一个可能的原因是,此错误是您的makefile中缺少库搜索路径。要解决它,您可以在链接器命令中添加...
    编程 发布于2025-07-24

免责声明: 提供的所有资源部分来自互联网,如果有侵犯您的版权或其他权益,请说明详细缘由并提供版权或权益证明然后发到邮箱:[email protected] 我们会第一时间内为您处理。

Copyright© 2022 湘ICP备2022001581号-3