使用promise封装ajax请求
前端小技巧：使用promise封装ajax请求
首先作为前端开发人员，大家都应该使用过Ajax发送请求，目前市面上流行的发送Ajax请求的方式为以下三种：
- Jquery的$.ajax()
- 尤雨溪推荐的axios
- es6新出的fetch方法
这三种方法的区别详见文章ajax三种方式的区别，这里不再详细解释。
本篇文章主要讲工作中是如何使用ajax请求，也就是让ajax结合promise使用。
1.为什么要包装ajax？
小明同学说：“直接发送ajax请求不就得了，干嘛那么麻烦。”于是小明很顺畅的写下以下代码：
//以$.ajax发送方式为例
$.ajax({
type:"POST",
url:"http://localhost:5000/login",
data:{
username:"admin",
password:"admin"
},
dataType:"json",
success:function (data) {
console.log(data);
},
error:function (err) {
console.log(err);
}
})
要知道，我们一个完整的项目势必会涉及到大量Ajax请求，如果我们每个请求都直接写Ajax请求，那么即使是请求同一个地址，只要发送的data参数产生了变化，就要重新写一遍ajax请求。很明显，这种写法会有以下几个缺点：
- 代码重复率很高，过于臃肿
- 代码可读性很差，不利于后期的维护
所以这种最"直接"的写法真所谓的费力不讨好，代码量变大，最后的效果反而不好，所以在工作中一定要避免重复劳动。前端培训
2.为什么要选择promise封装ajax？
看到上面的缺点，另外一位同学小刚说：“OK，我封装Ajax，但我直接用函数封装，不用Promise封装，那不是也可以避免重复劳动嘛。”于是小刚写下以下代码：
function ajax(url,data={},type="GET",callback){
$.ajax({
type:type,
url:url,
data:data,
dataType:"json",
success:function (data) {
callback(data);
}
})
}
let url="http://localhost:5000/login";
let data={
username:"admin",
password:"admin"
}
function callback(data){
console.log(data)
}
ajax(url,data,"GET",callback);
ajax(url,data,"POST",callback);
确实，直接用函数封装的写法可以克服重复书写Ajax的缺点，但是还是无法解决“回调地狱”的问题，也就是当如果有多个回调处理函数时，如：f1(f2(f3)),但是采用Promise封装ajax请求就可以完美解决这个问题，最后写出以下代码：
function ajax(url,data={},type="GET"){
return new Promise((resolve, reject) => {
$.ajax({
type:type,
url:url,
data:data,
dataType:"json",
success:function (data) {
resolve(data);
},
error:function (err) {
reject(err);
}
})
})
}
let url="http://localhost:5000/login";
let data={
username:"admin",
password:"admin"
}
let promise=ajax(url,data,"GET");//注意这里返回的是promise对象
promise.then(data=>{ //f1为第一个回调处理函数
f1(data);
}).then(data2=>{ //f2为第二个回调处理函数
f2(data2);
}).catch(err=>{
console.log(err);
})
一下这一行代码很重要，一定要记住：
return new Promise((resolve, reject) => {
})
