JAVASCRIPT promise用法

简单来说，Promise 就是用同步的方式写异步的代码，用来解决回调问题

// promise是一个构造函数 我们可now Promise的实例
// 在promise上有两个函数，分别叫做 resolve成功调用和reject失败调用
// 在promise构造函数的prototype属性上  有一个叫。then()的方法也就是说只要是Promise构造函数创建的实例，都可以访问当.then()方法
// promise表示 一个异步操作 每当我们new一个Promise的实例  这个实例就表示一个具体的异步操作
// 既然Promise创建的实例，是一个异步操作那么  这个异步操作的结果只有两种状态
//    异步执行成功  需要在内部调用成功的回调函数 resolve把结果返回
//    异步执行失败  需要在内部调用失败的回调函数 reject把结果返回给调用者
//    由于promise的实例是一个异步操作  所以内部拿到  操作的结束后 无法使用return操作的结果返回给回调者。这时候只能使用回调函数的形式来吧成功或者失败的结果返回给调用者
// 我们可以在 new Promise  实例上调用。then()方法
// 每当new一个promise实例的时候，都会立即执行promise中的异步操作代码(function),function中的代码会异步执行
//then()中的函数就是就是回调函数resolve   resolve的参数就是传入then中的参数  并且用catch来捕获错误
// 如果将then()的匿名函数替换成普通的带有return的函数，那么只需要写函数名救民
//例1  
function getpath(fpath) {
  return new Promise (function(resolve){
    fs.readFile(fpath,function(err,dataStr){
      if(err) throw err
      console.log(dataStr)
      resolve(dataStr)
    })
  })
}
//一般不这么写  用catch来捕获错误
getpath("./test.txt").then(function(data){ //这是执行成功
  console.log(data)
},function(){//这是执行失败
    
})
//这是正确的
getpath("./test.txt").then(function(data){ //这是执行成功
  console.log(data)
}).catch(function(err){
   console.log("err.message")
})
//另外将then中的回调函数写成一个函数的话 可以直接在then()调用函数的名称而不加小括号如下示例：
//例2    写作业
function buy(){
    console.log("开始买笔");
    var p = new Promise(function(resolve,reject){
        setTimeout(function(){
            console.log("买了笔芯");
            resolve("数学作业");
        },1000);
    });
    return p;
}
function work(data){
    console.log("开始写作业："+data);
    var p = new Promise(function(resolve,reject){
        setTimeout(function(){
            console.log("写完作业");
            resolve("作业本");
        },1000);
    });
    return p;
}

function out(data){
    console.log("开始上交："+data);
    var p = new Promise(function(resolve,reject){
        setTimeout(function(){
            console.log("上交完毕");
            resolve("得分：A");
        },1000);
    });
    return p;
}
/* 不建议使用这种方式
buy().then(function(data){
    return work(data);
}).then(function(data){
    return out(data);
}).then(function(data){
    console.log(data);
});*/

//推荐这种简化的写法 
buy().then(work).then(out).then(function(data){  // 直接写函数的名称
    console.log(data);
});
// 买了笔芯
// 开始写作业：数学作业
// 写完作业
// 开始上交：作业本
// 上交完毕

打印结果=> 111111

接下来来解析一下执行顺序

//例1  
2function getpath(fpath) {
  3var p =new Promise (4function(resolve){
    6fs.readFile(fpath,function(err,dataStr){
      if(err) throw err
      console.log(dataStr)
      resolve(dataStr)
    })
  })
  5return p
}
//这是正确的
1getpath("./test.txt").4then(function(data){ //这是执行成功
  console.log(data)
}).catch(function(err){
   console.log("err.message")
})

//ajax使用promise  示例
var promise = new Promise(function(resolve,reject){
             $.ajax({
                url:'/api/poisearch.json',
                method:'get',
                datatype:'json',
                success:(res) =>{
                    resolve(res)
                },
                error:(err)=>{
                    reject(err)
                }
            });
});

        promise.then(function(res){
            return res.data
        }).then(function(data){
            return data.result;
        }).then(function(result){
            console.log(result)
        });

        //推荐使用箭头函数简写成,极大提升了代码的简洁性和可读性
        promise.then(res => res.data).then(data => data.result).then(result => console.log(result));

JAVASCRIPT promise用法

猜你喜欢