场景: 选中某一条数据, 点击退回按钮, 弹出提示是否退回, 调用后台接口, 弹出提示信息等后续操作
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})=>{})
来源: http://www.jianshu.com/p/b9ba7c6e7400