场景：选中某一条数据，点击退回按钮，弹出提示是否退回，调用后台接口，弹出提示信息等后续操作
Snipaste_2019-07-24_09-32-38.png
1. 普通写法
//这个方法能获取被选中的数据
function getSelected(){
//省略
}
//删除操作
function removeData(){
var selected=getSelected();
if(selected){//选中了数据
if(selected.zt==0){
//调用接口
$.post("http://localhost:8080/doBack",{id:selected.id},function(response){
alert(response.data)
if(response.code==200){//成功
location.reload();
}
})
}else{
var str=prompt("请输入退回理由!")
if(str!=null){//点击确定
//调用接口
$.post("http://localhost:8080/doBack",{id:selected.id,reason:str},function(response){
alert(response.data)
if(response.code==200){//成功
location.reload();
}
})
}
}
}
}
2. 改写
//这个方法能获取被选中的数据
function getSelected(){
//省略
}
//调用后台接口方法
function doBack(id,reason){
return $.post("http://localhost:8080/doBack",{id,reason})//返回promise对象
}
//删除操作
function removeData(){
//判断
new Promise((resolve,reject)=>{//手动构造promise对象
var selected=getSelected();
if(selected){//如果选中一条数据
if(selected.zt==0){//如果状态为0直接退回
resolve({selected})//往下一个阶段发射数据
}else{//如果状态为1需要输入理由
var str=prompt("请输入退回理由!")
if(str!=null){//点击确定
resolve({selected,str})//往下一个阶段发射数据
}
}
}
})
//调用后台接口
.then(({selected:{id},str:reason})=>{
return doBack(id,reason);
})
//成功后的回调
.then(({code，data})=>{
alert(data)
if(code==200){
location.reload();
}
})
}
通过promise实现链式编程
这种写法将代码分成了3段：
- 前期的判断
- 调用后台接口
- 接口调用成功后的处理逻辑
这样写的好处如下：
- 后期如果要改代码看起来会更有针对性
- 目前的代码除了ajax调用都是同步的。如果输入退回理由那块需要美化，那么可能就会是异步调用。异步调用回调函数的方式层级多了代码可读性会非常差，但是对于第二种写法基本不需要有什么修改。
jquery返回promise
jquery有两种调用方式
- $.post(url,data,successCallBack)
这种就是会造成回调地狱的写法，原谅我之前都是这么用的
- $.post(url,data).then(successCallBack)
这种就是promise的写法
promise对象手动创建
- promise对象手动创建
new Promise((resolve,reject)=>{
})
- 箭头函数
()=>{}这是箭头函数的写法，相当于function(resolve,reject){}。区别在于this引用（具体可以百度）
- resolve函数
resolve是函数引用，如下会输出{a:123,b:234}
new Promise((resolve,reject)=>{
resolve({a:123,b:234});
}).then(x=>{
console.log(x);
})
- reject函数
reject也是函数引用，如下会输出{a:123,b:234}
new Promise((resolve,reject)=>{
reject({a:123,b:234});
}).then(()=>{
},error=>{
console.log(error)
})
- resolve和reject的区别
可以简单理解为resolve是往后发射成功数据，reject是往后发射失败数据
es6字面量增强
{a,b}将变量a和b组织成一个对象，这个对象有两个属性，分别是a和b。等价于{a:a,b:b}
所以案例种resolve({selected,str})等价于resolve({selected:selected,str:str})
es6解构赋值
- 单层解构
var obj={a:123,b:234,c:345}
想取出a和b
var {a,b}=obj
- 多层解构
var obj={a:{a1:123,a2:234},b:234,c:345}
想取出a1,a2和b
var {a:{a1,a2},b}=obj
- 参数解构
ajax后台返回的数据类似{code:200,data:'操作成功'}
我们想去出code和data
$.post(url,data).then(({code,data})=>{})
网友评论