fetch与axios

·  阅读 455

这是我参与8月更文挑战的第11天,活动详情查看:8月更文挑战

1,fetch 优缺点

1,fetch 是低层次的api,可以考虑成原生的 XHR,所以用起来并不是很舒服,需要进行封装

2,优点:

  • 语法简洁,更加语义化
  • 基于标准 Promise 实现,支持 async/await
  • 更加底层,提供丰富的API
  • 脱离了 XHR,是ES规范里新的实现方法

3,缺点:

**

* fetch 只对网络请求报错,对于400,500都当做成功的请求,服务请返回400,500错误码时,并不会reject,只有网络错误这些导致请求不能完成时,fetch 才会被 reject
* fetch 默认不会带 cookie,需要添加配置项:fetch(url,{credentials:'include'})
* fetch 不支持 abort,不支持超时控制,使用 setTimeout 及promise.reject的实现的超时控制并不能阻止请求过程继续在后台运行,造成了流量的浪费
* fetch 没有办法原生监听请求的进度,而XHR可以
* fetch 上传文件时,不支持进度检测
复制代码
2,axios 优缺点

1,定义:axios基于promise用于浏览器和nodejs的http客户端,本质上也是对原生XHR的封装,只不过他是promise的实现版本,符合最新ES规范

2,axios 特征:

**

* 从浏览器中创建 XMLHttpRequest
* 支持 Promise API
* 客户端支持防止 CSRF
* 提供一些并发请求的接口(重要,方便了很多的操作)
* 从 nodejs 创建 http 请求
* 拦截请求和响应
* 转换请求合响应数据
* 取消请求
* 自动转换JSON数据
复制代码

注:axios 底层是 XMLhttpRequest
fetch 与 axios 某种程度上讲,不是一个层面比较

3,axios 与 fetch 比较

前端的标准: w3c,
whatwg 与 w3c
fetch api 就是whatwg制定的

  • fetch:是底层次的api,浏览器原生支持的
  • axios:是一个封装好的框架

axios:

**

1,支持浏览器与nodejs前后端发请求
2,支持promise语法,
3,支持自动解析json
4,支持中断请求
5,支持拦截请求
6,支持进度条检测
7,支持客户端防止CSRF
总结:封装比较好
复制代码

fetch:

  • 优点:

**

1,浏览器级别原生支持的api
2,原生支持promise api
3,语法简洁,符合 es 标准规范
4,由whatwg组织提出的,现在已经是w3c规范
复制代码
  • 缺点:

**

1,不支持文件上传进度监测
2,默认不带cookie
3,不支持请求终止
4,使用不完美,需要封装
复制代码

总结:最大缺点:需要封装,最大优点:支持底层原生

分类:
前端
标签:
收藏成功!
已添加到「」, 点击更改