fetch与axios的定位认识。fetch是浏览器提供的api, axios是社区封装的一个组件。fetch是一个低层次的API,你可以把它考虑成原生的XHR, 所以使用起来并不是那么舒 服,需要进行封装。 多年来,当我们谈及 Ajax技术...
fetch与axios的定位认识。
fetch是浏览器提供的api, axios是社区封装的一个组件。
fetch是一个低层次的API,你可以把它考虑成原生的XHR, 所以使用起来并不是那么舒
服,需要进行封装。 多年来,当我们谈及 Ajax技术的时候,通常意思就是基于XMLHttpRequest的Ajax,它是一种能够有效改进页面通信的技术。Ajax的兴起是 由于Google的Gmail所带动的,,可以认为,开发者已经默认将XMLHttpRequest作为了当前Web应用与远程资源进行通信的基础。XMLHttpRequest的最新替代技术一Fetch API,
fetch优势:
1.语法简洁,更加语义化
2.基于标准Promise实现,支持async/await
3.更加底层,提供的API丰富(request, response)
4.脱离了XHR,是ES规范里新的实现方式
fetch存在问题
fetch是一个低层次的APl,你可以把它考虑成原生的XHR,所以使用起来并不是那么舒服,
需要进行封装。
- fetch只对网络请求报错,对400, 500都当做成功的请求,服务器返回400, 500错误
码时并不会reject,只有网络错误这些导致请求不能完成时,fetch 才会被reject。 - fetch默认不会带cookie,需要添加配置项: fetch(url, {credentials: ‘include’)
- fetch不支持abort,不支持超时控制,使用setTimeout及Promise.reject的实现的超时
控制并不能阻止请求过程继续在后台运行,造成了流量的浪费 - fetch没有办法原生监测请求的进度,而XHR可以
fetch(' http://example. com/movies.json') //第二个参数 指定post get
. then( functi on(response) {
return response. json() ;
}) I
. then( function(myJson) {
console.1og(myJson) ;
});
axios
axios是一个基于Promise 用于浏览器和nodejs的HTTP客户端 ,本质上也是对原生XHR的封装,只不过它是Promise的实现版本,符合最新的ES规范,它本身具有以下特征:
- 从浏览器中创建XMLHttpRequest
- 支持Promise API
- 客户端支持防止CSRF
- 提供了一-些并发请求的接口(重要,方便了很多的操作)
- 从node.js创建http请求
- 拦截请求和响应
- 转换请求和响应数据
- 取消请求
- 自动转换JSON数据
// axios举例
axios.get(' /user',{
params: {
ID: 12345
}
})
then(function (response) {
console.1og(response);
})
. catch(function (error) {
console.1og(error);
});
本文标题为:fetch与axios
基础教程推荐
- IOS 播放系统提示音使用总结(AudioToolbox) 2023-03-01
- IOS应用内跳转系统设置相关界面的方法 2022-11-20
- android studio按钮监听的5种方法实例详解 2023-01-12
- Android中的webview监听每次URL变化实例 2023-01-23
- iOS开发教程之XLForm的基本使用方法 2023-05-01
- 解决Android Studio突然不显示logcat日志的问题 2023-02-04
- Android多返回栈技术 2023-04-15
- Flutter手势密码的实现示例(附demo) 2023-04-11
- Flutter绘图组件之CustomPaint使用详解 2023-05-12
- Android开发使用RecyclerView添加点击事件实例详解 2023-06-15