「这是我参与2022首次更文挑战的第6天，活动详情查看：2022首次更文挑战」。

首先作为前端开发人员，大家都应该使用过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) => {
 
 })

关键词：前端培训