promise相关基础之状态，resolve ,then

最新推荐文章于 2024-03-10 16:02:00 发布

奋斗的菜鸟.com

最新推荐文章于 2024-03-10 16:02:00 发布

阅读量876

点赞数 1

分类专栏： es6 文章标签： javascript 前端 es6

本文链接：https://blog.csdn.net/CodePrincess/article/details/129466128

版权

es6 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

promise相关基础知识点状态，resolve ,then

promise
语法上：它本质上是一个对象，用于获取异步的一些消息。
语义上：承诺它过一段时间会给你一个结果
promise异步编程的一种解决方案

异步编程

异步编程，通俗的解释就是，我们封装一个网络请求的函数，因为不能立刻返回结果，所以我们可以将其(异步请求的结果)传入另外一个函数，在数据请求成功时，将数据通过传入的函数回调回去。

异步解决方法

setTimeout 是异步 ajax也能异步请求

现在解决异步主要方案：回调函数

 $.ajax({
            url: '/api/...,
            type: 'GET',
            dataType: 'json'
        })
            .done(function(data) {
                children_tableInstance.emptyTable();
                children_tableInstance.data = data;
                children_tableInstance._fillTableData();
                children_tableInstance.addEmptyRow();
            })
            .fail(function() {

            })
            .always(function() {

            });

理解回调函数

被作为实参传给另外一个函数，并在该外部函数内部被调用的函数

function greeting(name){
 alert("hello"+name)
}
function Userinput(callback){//作为实参
  let name="Lily";
  callback(name);//在函数内部被调用
}
Userinput(greeting);

理解promise

Promise 可以理解是一个容器，里面保存着某个将来才会结束的事件（异步操作）的结果；从语法上说，Promise 是一个对象通过它可以获取异步操作的消息；Promise 提供了统一的 API ，各种异步操作都可以用同样的方法进行处理。

promise 的三种状态

Promise对象有三种状态，他们分别是：

1.pending: 等待中，或者进行中，表示还没有得到结果：异步请求还没返回结果
2.resolved(Fulfilled): 已经完成，表示得到了我们想要的结果，可以继续往下执行
3.rejected: 也表示得到结果，但是由于结果并非我们所愿，因此拒绝执行

Promise对象的状态改变，只有两种可能：从pending变为 fulfilled 和从pending变为rejected，一旦确定就不会再改变，这句话反复出现最终无非两个结果成功或失败，所以不可能同时执行resolve() 和reject()

<script>
    function f(){
    return new Promise((resolve,reject)=>{
        setTimeout(function(){
            debugger
            resolve("我是resolve");//此处只会执行resolve
            reject("我是请求错误reject");
        },1000);
    })
}

f().then(function(res){ 
    debugger
    console.log(res);
  }).catch(function(rej){
    console.log(rej);
  })
</script>

创建 Promise

promise 回调函数里的两个参数：resolve reject

Promise构造函数接受一个函数作为参数，该函数的两个参数分别是resolve和reject。它们是两个函数，由 JavaScript 引擎提供，不用自己部署

const promise = new Promise((resolve, reject) => {
  if (/* 异步操作成功 */) {
    //如果 true ，把容器的状态改为 resolve
    resolve(value)
  } else {
    //如果 false ，把容器的状态改为 reject
    reject(error)
  }
})

var p = new Promise(function(resolve, reject){
    //做一些异步操作
    setTimeout(function(){
        console.log('执行完成');
        resolve('随便什么数据');
    }, 2000);
});    //这样写立即执行了Promise 里的匿名回调函数，这是为啥？

new promise时回调函数为什么立即执行了

什么时候执行resolve,reject方法？

resolve函数的作用：一个异步操作成功之后，才会去调用这个函数，用resolve方法时，Promise的状态就变成fulfilled，即操作成功状态 ,(并把这个异步操作的结果，作为参数传递出去。通过then回调函数）

reject函数：只有在异步操作失败的时候进行调用，就是调用reject方法后，Promise状态变为rejected，即操作失败状态

状态是从pending→fulfilled或

pending→rejected

执行resolve的意义

答：resolve方法会将promise对象的状态从pending（待定）变为fulfilled

// 写法三，帮助理解pending  fulfilled  与resolve函数的关系
const p_resolve = new Promise((resolve, reject) => {
    setTimeout(function(){
        console.log('p_resolve')
        resolve();
        console.log(p_resolve) //Promise {<fulfilled>: undefined}
        },1000);
    })
console.log(p_resolve)  //Promise {<pending>}



//写法四，帮助理解pending  fulfilled  与resolve函数的关系
const p_best = new Promise((resolve, reject) => {
    setTimeout(function(){
        console.log('p_best')
        console.log(p_best) //Promise {<pending>}
        },1000);
    })
console.log(p_best)  //Promise {<pending>}

    //由写法三、四，可得出结论  promise回调函数里，只要不执行resolve方法，promise实例的状态一直是pending,只有执行了resolve方法之后，才是fullfilled状态
// promise执行resolve的意义   resolve方法会将promise对象的状态从pending（待定）变为fulfilled

resolve和reject的区别
执行成功执行失败

Promise 的实例方法

Proimse 拥有两个是方法 then() 和 catch()

then()这个方法就是在异步操作执行完之后去调用去执行一个回调函数。

Promise 实例生成以后，可以用 then 方法和 catch 方法分别指定 resolved 状态和 rejected 状态的回调函数。执行resolve()之后会调用then的回调函数

<script>
    let promise=new Promise(function(resolve){
        console.log("promise");
        resolve();
    })
    promise.then(function(){
        console.log('resolved');
    })
    console.log("hello");
    //输出结果：
//  promise
//  hello
//  resolved      promise.then难道是异步的？
</script>

then如何使用

then方法中有两个回调函数作为参数，如果Promise的状态为fulfilled则执行第一个回调函数；如果状态为rejected则执行第二个回调函数

例： p.then(()=>{},()=>{})

调用resolve改变状态时，传递的参数会作为then方法的第一个回调函数的参数；调用reject改变状态时，传递的参数会作为then方法的第二个回调函数的参数

一般reject(new Error(‘reason’))

<script>
//复杂写法
    function f(cb){
        setTimeout(function(){
            cb&&cb();
        },1000)
    }
    f(function(){
        console.log(1);
        f(function(){
            console.log(2);
            f(function(){
                console.log(3);
            })
        })
    })
    </script>

<script>
    //上面属于多层异步操作回调嵌套了
    function f(){
        return new Promise(function(resolve,reject){
            setTimeout(function(){
                resolve();
            },1000)
        })
    };
    f().then(function(){
        console.log(1);
        return f();
    }).then(function(){
        console.log(2);
    })


</script>

then 方法什么时候执行

当Promise的状态由pending->fulfilled的时候执行第一个回调函数,当Promise的状态由pending->rejected的时候执行第二个回调函数；


    let p=new Promise(function(resolve,reject){
        reject(new Error('reason'))
    })
    p.then(function(res){
        console.log(res);//这里无输出
    },function(rej){
        console.log(rej);  // 输出Error: reason
    })

补充：

promise构造函数只传入resolve参数，then可以只写有关resolve的回调

 
    let p10=new Promise(function(resolve){
        resolve("操作成功")
    })
    p10.then(function(res){     //这样写说明，可以构造函数只传入resolve参数，then只写有关resolve的回调
        console.log(res);// promise_reject.html:28 操作成功
    })