ES6使用promise，解构赋值和字面量增强的小案例

场景：选中某一条数据，点击退回按钮，弹出提示是否退回，调用后台接口，弹出提示信息等后续操作

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段：

1. 前期的判断
2. 调用后台接口
3. 接口调用成功后的处理逻辑

这样写的好处如下：

1. 后期如果要改代码看起来会更有针对性
2. 目前的代码除了ajax调用都是同步的。如果输入退回理由那块需要美化，那么可能就会是异步调用。异步调用回调函数的方式层级多了代码可读性会非常差，但是对于第二种写法基本不需要有什么修改。

jquery返回promise

jquery有两种调用方式

1. $.post(url,data,successCallBack)

这种就是会造成回调地狱的写法，原谅我之前都是这么用的

2. $.post(url,data).then(successCallBack)

这种就是promise的写法

promise对象手动创建

1. promise对象手动创建

new Promise((resolve,reject)=>{

})

2. 箭头函数

()=>{}这是箭头函数的写法，相当于function(resolve,reject){}。区别在于this引用（具体可以百度）

3. resolve函数

resolve是函数引用，如下会输出{a:123,b:234}

new Promise((resolve,reject)=>{

​ resolve({a:123,b:234});

}).then(x=>{

​ console.log(x);

})

4. reject函数

reject也是函数引用，如下会输出{a:123,b:234}

new Promise((resolve,reject)=>{

​ reject({a:123,b:234});

}).then(()=>{

},error=>{

​ console.log(error)

})

5. resolve和reject的区别

可以简单理解为resolve是往后发射成功数据，reject是往后发射失败数据

es6字面量增强

{a,b}将变量a和b组织成一个对象，这个对象有两个属性，分别是a和b。等价于{a:a,b:b}

所以案例种resolve({selected,str})等价于resolve({selected:selected,str:str})

es6解构赋值

1. 单层解构

var obj={a:123,b:234,c:345}

想取出a和b

var {a,b}=obj

2. 多层解构

var obj={a:{a1:123,a2:234},b:234,c:345}

想取出a1,a2和b

var {a:{a1,a2},b}=obj

3. 参数解构

ajax后台返回的数据类似{code:200,data:'操作成功'}

我们想去出code和data

$.post(url,data).then(({code,data})=>{})