promise的用法与定义。

结合个人理解说下promise 。
首先在讲promise时,也简单的说下两个东西,一个构造函数,一个回调函数。

什么是构造函数(实例方法):

特点:
构造函数的名称一般是开头字母是大写的
this就是指实例,挂载在this上面的属性称为实例属性,挂载在this上函数称为实例方法。

function Btn (val){//定义一个构造函数
    this.val = val//挂载在this身上的实例属性
}
var w = new Btn ("wahaha")
console.log(w.val)
//返回  wahaha

注意 当创建对象时,对象会自动调用它的构造函数,并把参数传进去。

什么是回调函数:

javascript中万物皆对象,所以 函数也是一种变相的对象。
它可以存在一个变量中,作为参数去传给另外一个函数。说白了就是,回调函数作为一个参数去传给另外一个函数(称主函数)。当另外那个函数(主函数)执行完之后在执行这个作为参数传过去的函数。这个过程称为回调,传过去的函数称为回调函数。

回调函数的干嘛的呢:
因为javascript代码是从上向下的执行顺序,并且大部分程序都是属性异步程序。
但有些时候我们需要把异步程序变成同步程序,如:
需要先执行完A函数在去执行B函数 ,这个时候就用到回调函数了。需要在执行A函数时去调B函数

function A(b){
    console.log("我是A函数")
    b()
}
function B(){
    console.log("我是B函数")
}
A(B)

返回结果:
在这里插入图片描述
在执行A函数时,传了一个参数,而这个参数就是一个函数,当执行完A函数里的代码时,在去调的B函数。以上称为回调函数。
那么问题来了,如果我是很多个这样的函数去调用呢,如A函数执行完去调B函数,B函数执行完去调C函数,C函数执行完调D函数等等
这么回调下去将会出现 回调地狱 这种现象。
那要怎么解决呢: 对 promise可以完美解决。嗯。。。。。

promise的原理与使用:

1 创建promise对象后的关键操作就是你何时去执行resolve函数。
2 当返回一个promise对象时,立刻执行对象里的回调函数。
3 .then()终会返回一个promise对象,当嵌套then方法使用时(前者决定后者)。

什么是promise:
定义一个promise对象:

var p = new Promise()

promise()函数 不能直接执行,必须通过new来执行,在new的同时要给它传一个回调函数,这个回调函数表示正在进行时(通过new返回对象时就执行)此回调函数有2个参数(resolveFn,rejectFn)。
注意 这两个参数 是函数(属于promise回调函数的两个回调函数)而这两个函数是由then(resolveFn,rejectFn)方法传过去的。
promise 对象上有一个then方法,promise.then() 表示 然后呢 同时也会返回一个promise对象。
也就是说当你开始new 一个promise对象时,就执行里面的回调函数,执行完回调函数 然后呢 总要有个回应吧(是成功了还是失败了。。。)
什么是new一个promise对象而不是函数:
虽然在js中常说万物皆对象,那函数与对象的区别是什么呢, 对象可以保存状态,而函数不可以(闭包除外)之所以是对象 ,是能够存有状态的。
promise的状态:
pending 初始化状态
pending------fulfilled 初始化到成功 实现 已完成
pending----- rejected 初始化到失败 未完成 未完成不了
注意:这两种情况一旦发生变化,状态就凝固了。就不会在改变。
当执行resolve()时,pending到fulfilled把promise状态由初始化到已完成,什么时候调用呢?
答:
当promise队列中的异步操作成功完成时去调用resolve函数,并将异步操作的结果作为resolve函数的参数给传过去。
当执行reject()时,pending到rejected把promise状态由初始化到未完成/完成不了,什么时候调用呢?
答:
当promise的队列中的异步操作失败或者未完成时去调用reject函数,并把异步操作的结果,作为reject函数的参数给传出去。(传到then方法的回调中)
传到哪里呢 谁来接呢?
答:
由then()方法里的回调函数来接,当promise状态发生变化时 会触发then()方法里的响应函数及处理后续步骤。
一般用resolveFn()捕获成功的回应 ,用rejectFn捕获失败的回应。
搞个简单的例子:

var p = new Promise((resolve,reject)=>{
    //正在进行时。。。。如一些异步操作
    let num = Math.random();
    console.log("打印随机数"+num);
    num>0.6?resolve():reject();
}).then(function resolve(){
    console.log("我是resolve函数")
},function reject(){
    console.log("我是reject函数")
})

运行下看看
在这里插入图片描述
以上代码可以看到,它执行了resolve回调就不会在执行reject回调,也就是说resolve函数和reject函数不存在两个都执行,也不存在同时执行。
讲解:
首先new一个promise,得到一个promise对象的同时立刻执行promise的回调函数,当这个随机数大于0.6时(表示是成功的需求)去执行resolve()后由初始化状态pending变为resolve状态表示已完成,当随机数小于0.6(表示失败的需求)去执行reject函数,由状态pending 变为reject表示未完成或者完成不了了(可能代码报错)。
promise.then()方法:
then()方法—始终会返回一个promise对象。
虽然then()方法可以接受两个函数作为参数,但一般只在then方法里写成功的回调(回调函数处理逻辑)。
promise.catch()方法:
把失败的回调可以写在catch方法里,catch方法主要可以捕获各种报错,方便开发排查bug。
如下 简单的结构形式写法:

var p = new Promise(function(resolve,reject){
 //其他代码逻辑.......等 
	 if("异步程序代码操作成功")resolve("这里放异步操作完拿到的数据...往下传")else{
	 reject(err)
	}
})

使用catch()方法改写以上例子:

var p = new Promise((resolve,reject)=>{
    let num = Math.random();
    num>0.6?resolve():reject();
}).then((res)=>{
    console.log("我是resolve函数")
}).catch((err)=>{
    console.log("我是reject函数")
})

运行起来和上面的是一样, 那为什么建议要用catch方法呢
区别:
如果then()里放成功和失败两个回调函数,那么成功回调中一旦有报错时是捕获不到的,它只能捕获失败回调函数中的报错和promise的回调函数中的报错。
而catch方法,不仅能捕获失败回调和成功回调的报错,还能捕获new promise中所有的错,哎呀反下就 是用它了。

promise执行顺序简单总结:
先执行promise的回调函数
在执行队列中的同步代码
最后执行then()方法中的回调啦。
举个例子:

(function a (){
     new Promise((resolve,reject)=>{//1 这里是promise的回调函数
      console.log("我这里是属于回调函数部分")
      resolve("wahaha")
    }).then((res)=>{// 3 这里是then方法里的回调
       console.log("我这里是属于then方法的回调部分")
    })
    console.log("我是队列的同步代码")//2 这里是函数队列中的同步代码
})()

运行结果:
在这里插入图片描述
promise不就是异步的嘛,为什么又说是同步代码了
不要慌 ,其实 promise的then() , catch() , finally()才是异步任务又称微任务。
而new promise()里的代码还是同步执行的。
讲解:
先打印“我这里是回调函数部分”,通过调resolve()在进入异步回调之前,将promise的异步回调加入到微任务队列中,这个时候把执行权交出来了,就会执行函数中的同步代码去打印“这里是队列同步代码”,然后在去拿微任务队列中的第一个任务去执行。所以最后打印“我这里是then方法中的回调函数”。
如果是这样:

(function a (){
     return new Promise((resolve,reject)=>{
      console.log("我这里是属于回调函数部分")
      resolve("wahaha")
    }).then((res)=>{
       console.log("我这里是属于then方法的回调部分")
    })
    console.log("我是队列的同步代码")//不执行
})()

队列中的所有代码都不会执行哦。
promise嵌套axios/ajax使用:

function getdata(url,parsm){
  return new Promise((resolve,reject)=>{
      axios.post/get(url,parsm).then((response)=>{
          resolve(response)
      }).catch((err)=>{
          reject(err)
      })
  })
}
getdata(url,parsm).then().catch()

把整个axios的请求看作一个异步操作。
那么ajax也是一样滴。。。。嵌套在promise内使用。

promise的多层嵌套使用:

就是那种比如,我想执行promise1在去执行promise2,执行完promise2再去执行promise3等等。。。
就简单写个例子吧。找下感觉就行了。。。。

function a1(){
  return new Promise((resolve,reject)=>{
      console.log("我是a1函数");
      resolve("传个a1")
  })
}
function a2(){
    return new Promise((resolve,reject)=>{
        console.log("我是a2函数");
        resolve("传个a2")
    })
  }
  function a3(){
    return new Promise((resolve,reject)=>{
        console.log("我是a3函数");
        resolve("传个a3")
    })
  }
  a1().then(a2).then(a3).then((data)=>{
      console.log("我接到参数"+data)
  })

执行完a1在去执行a2,执行完a2在去执行a3,然后把a3得到的数据拿到,就可以在成功回调里任你处理了。
那可能问,我非要按照这个顺序执行嘛,我可以按照指定的顺序让它执行嘛 ,一样的,随你咯

function a1(){
  return new Promise((resolve,reject)=>{
      console.log("我是a1函数");
      resolve("传个a1")
  })
}
function a2(){
    return new Promise((resolve,reject)=>{
        console.log("我是a2函数");
        resolve("传个a2")
    })
  }
  function a3(){
    return new Promise((resolve,reject)=>{
        console.log("我是a3函数");
        resolve("传个a3")
    })
  }
  a1().then(a3).then((data)=>{
      console.log("我接到参数"+data)
  })

执行完a1直接执行a3等等。。。。。

先讲到这里啦,后面会把promise执行机制好好整理更新,关注会继续完善优化哦~
异步终极者async~await 异步函数。后面会陆续更新哦
有不同意见的欢迎指出,共同进步~
原创不易给个支持和关注吧三克油~

------努力努力再努力~

  • 5
    点赞
  • 5
    收藏
    觉得还不错? 一键收藏
  • 3
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 3
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值