昨天被头条的面试官面完之后虐了一地, 倒是不难, 问一堆这个和那个有啥不同, 我心里想着难道有可比性么, 这种问题怎么感觉就像有时候问你人都有什么人? 有啥不同一样... 只能吐槽但是也无能为力, 就怪自己学艺不精吧.
当时可能是面试官太帅了, 所以太紧张了, 我竟然脑子里面想不起来原生是怎么写的了, 直接说把原生的忘了, xmlhttpRequest 在我的脑海里竟然一点映象也没了, 面之前还手写的代码...
请求接口除了原生 Ajax,$.Ajax,fetch,axios,vue 框架的话自己也封装了一个 vuereaouce 方法. 先看看这几个请求接口的写法:
原生的请求方法:
- var xhr = new xmlHttpRequest();
- var httprequest
- xhr.onreadystatechange = function(){
- if(httpRequest.readyState === XMLHttpRequest.DONE){
- if (httpRequest.status === 200) {
- alert(httpRequest.responseText);
- } else {
- alert('There was a problem with the request.');
- }
- }
- httpRequest.open('GET',url);
- // 发送请求
- httpRequest.send();
- }
原生的 Ajax 请求经历了这四部:
1. 创建一个 xmlhttpRequest 请求
2. 指定响应函数
3. 发送请求
基于原生的 Ajax, 大神们进行封装净化到了 jQuery 的 $.Ajax,$.Ajax 如果用到现在的 mvvm 框架里面就有点不搭了, 显得项目有点大占内存, 配置和调用不友好
- $.Ajax({
- type: 'POST',
- url: url,
- data: data,
- dataType: dataType,
- success: function () {},
- error: function () {}
- });
自从 2016 年开始流行 es6 之后, fetxh 和 axios 开始盛行了
axios:
1. 从浏览器中创建 XMLHttpRequest
2. 支持 Promise API
3. 客户端支持防止 CSRF
4. 提供了一些并发请求的接口 (重要, 方便了很多的操作)
5. 从 node.JS 创建 http 请求
6. 拦截请求和响应
7. 转换请求和响应数据
8. 取消请求
9. 自动转换 JSON 数据
- axios({
- method: 'post',
- url: '/axios/ajax',
- data: {
- }
- })
- .then(function (response) {
- console.log(response);
- })
- .
- catch(function (error) {
- console.log(error);
- });
axios 相对于别的请求接口方法里面是相对于处理的比较好的, 也比较常用
fetch 的写法
fetch(url,parame,callback).then(respose.JSON()).then(data=>console.log(data)).catch(err =>console.log(err))
下面这部分是博主的一些内容:
Ajax:
Ajax, 最早出现的发送后端请求技术, 隶属于原始 JS 中, 核心使用 XMLHttpRequest 对象, 多个请求之间如果有先后关系的话, 就会出现回调地狱.
jQuery Ajax:
是 jQuery 框架中的发送后端请求技术, 由于 jQuery 是基于原始的基础上做的封装, 所以, jQuery Ajax 自然也是对原始 Ajax 的封装
Fetch:
fetch 号称是 Ajax 的替代品, 是在 ES6 出现的, 使用了 ES6 中的 promise 对象. Fetch 是基于 promise 设计的. Fetch 的代码结构比起 Ajax 简单多了, 参数有点像 jQuery Ajax. 但是, 一定记住 fetch 不是 Ajax 的进一步封装, 而是原生 JS.Fetch 函数就是原生 JS, 没有使用 XMLHttpRequest 对象.
axios:
axios 不是原生 JS 的, 需要进行安装, 它不但可以在客户端使用, 而且可以在 Node.JS 端使用. Axios 也可以在请求和响应阶段进行拦截. 同样也是基于 promise 对象的.
来源: http://www.bubuko.com/infodetail-2901449.html