前后端数据交互(六)——ajax 、fetch 和 axios 优缺点及比较

obj.success(xhr.responseText); //返回值传callback

} else {

//failcallback

obj.error(‘There was a problem with the request.’);

}

} else {

console.log(‘still not ready…’);

}

};

xhr.open(obj.method, obj.url, true);

// 设置 Content-Type 为 application/x-www-form-urlencoded

// 以表单的形式传递数据

xhr.setRequestHeader(‘Content-Type’, ‘application/x-www-form-urlencoded’);

xhr.send(util(obj.data));//处理body数据

}

//处理数据

const util = (obj)=>{

var str = ‘’

for (key in obj){

str += key +‘=’+obj[key]+‘&’

}

return str.substring(0,str.length-1)

}

}

封装完成，开始使用的时候你会发现，body和header处理得有些乱，还有回调地狱的问题，所以我们出现了新的 fetch 请求技术。

1.2、fetch

fetch 首先解决了回调地狱的问题，他返回的结果是一个 Promise 对象，对 Promise 不熟的可点击《Promise详解》。

fetch 使用如下：

fetch(url,options).then(response=>{

// handle HTTP response

},error=>{

// handle network error

})

fetch 发送网络请求时，可以传输任意数据格式，非常简便。但是 fetch 的超时、终止取消并不方便，只能通过取消 Promise 来完成，如果有多个 fetch 请求时，更难处理。除此之外，fetch 是比较新的技术，低版本浏览器和IE浏览器支持性不好。

1.3、axios

axios 功能非常强大，包括 取消请求，超时处理，进度处理等等。但它的本质还是 ajax，基于 Promise 进行封装，既解决回调地狱问题，又能很好地支持各个浏览器。

axios使用代码如下：

axios.post(‘/user’, {

firstName: ‘Fred’,

lastName: ‘Flintstone’

})

.then(function (response) {

console.log(response);

})

.catch(function (error) {

console.log(error);

});

二、ajax、fetch、axios的优缺点

---

2.1、ajax 的优缺点：

• 属 js 原生，基于XHR进行开发，XHR 结构不清晰。

• 针对 mvc 编程，由于近来vue和React的兴起，不符合mvvm前端开发流程。

JavaScript

• js的基本类型有哪些？引用类型有哪些？null和undefined的区别。

• 如何判断一个变量是Array类型？如何判断一个变量是Number类型？（都不止一种）

• Object是引用类型嘛？引用类型和基本类型有什么区别？哪个是存在堆哪一个是存在栈上面的？

• JS常见的dom操作api

• 解释一下事件冒泡和事件捕获

• 事件委托（手写例子），事件冒泡和捕获，如何阻止冒泡？如何组织默认事件？

• 对闭包的理解？什么时候构成闭包？闭包的实现方法？闭包的优缺点？

• this有哪些使用场景？跟C,Java

真题解析、进阶学习笔记、最新讲解视频、实战项目源码、学习路线大纲
详情关注公中号【编程进阶路】

中的this有什么区别？如何改变this的值？

• call，apply，bind

• 显示原型和隐式原型，手绘原型链，原型链是什么？为什么要有原型链

• 创建对象的多种方式

• 实现继承的多种方式和优缺点

• new 一个对象具体做了什么

• 手写Ajax，XMLHttpRequest

• 变量提升

• 举例说明一个匿名函数的典型用例

• 指出JS的宿主对象和原生对象的区别，为什么扩展JS内置对象不是好的做法？有哪些内置对象和内置函数？

• attribute和property的区别

• document load和document DOMContentLoaded两个事件的区别

• JS代码调试