换个角度理解Promise

简介: 如下是一点白话文的理解,清晰易懂

学习心得

Promise

then:里面有两个回调

  • promise原型上提供了 then catch finally 三个方法,使用这几个方法都会返回一个全新的 Promise 实例,这个 Promise 实例也有其状态和 Value,它的这个状态和 Value 取决于该实例中某个函数执行的结果是否报错,return 的值是其 Value 值。如果后面再来一个 .then,那么它执行哪个回调以及它的 Value 值,是取决于上一个.then的回调是否执行成功和返回的 Value 值的(特殊情况:如果其方法中返回的是一个新的Promise实例,他会按照这个实例最终的状态和结果,决定下一个then中执行哪个回调)。

  • Promise的向下顺延体制,是因为Promise内部给我们加了方法进行顺延。

new Promise(function executor(resolve) {
    
     // 这里是要执行异步操作代码
     let ran = Math.random()
     ran > 0.5 ? resolve(1) : reject(0) // => 改变PROMISE实例的状态,并将 1 / 0
}).then(function onFulFilled(x) {
   
    retuen 100
    // return new Promise()
},function onRejected(y) {
   

}).then(null,function onRejected(y) {
   

}).then(function onFulfilled(x) {
   
    // => 因为上一个then中是没有成功处理函数的,PROMISE内部会帮我们自动创建一个onFulfilled 函数,让其执行后的状态还是Fulfilled,也接受并返回了Value值
    return x*10
},function onRejected(y) {
   

}).then(function onFulFilled(x) {
   
    throw new Error('')
},function onRejected(y) {
   

}).then(null,null).then(function onFulFilled(x) {
   

},function onRejected(y) {
   
    // =>  因为上一个then中是没有失败处理函数的,PROMISE内部会帮我们自动创建一个 onRejected 函数,让其执行后的状态还是Rejected,也接受并返回了Value值
    console.log(y)
})

catch:里面只有一个回调

// => 创建一个状态为 FulFilled,Value 为 A 的 Promise 实例
Promise.resolve('A').catch(function onRejected(){
   

})
// => 创建一个状态为 rejected,Value 为 A 的 Promise 实例
Promise.reject('A').catch(function onRejected(){
   

})

Promise.all:所有都成功,整体状态才成功

Promise.all([Promise1,Promise2,...]).then(function (results) {
   
    // => 按照顺序存储每一个Promise的Value值[ VALUE1,VALUE2 ...]
})

Primise.race:看Promise实例中谁先得到最后的状态,最后就以它的状态和Value为主

Axios

它比Jquer中的AJAX库牛逼就牛逼在它是基于Promise的设计模式而封装的。

不管3721,第一步我们都是配置好默认项

// => 配置
axios.defaults.baseURL = 'http://127.0.0.1:5500';
axios.defaults.withCredentials = true;
axios.defaults.headers['Content-Type'] = 'application/x-www-form-urlencoded'
// => 请求拦截器
axios.defaults.transformRequest = function(data) {
   
    // => DATA: 用户需要传递给服务器的JSON对象
    if(!data) return data;
    let result = ``;
    for(let key in data) {
   
        if(!data.hasOwnProperty(key)) break
        result += `&${data[attr]}=${data[attr]}`;
    }
    return result.substring(1)
}
// => 响应拦截器
axios.defaults.transformResponse = [function onFulfilled(response) {
   
    return response.data
},function onRejected(reason){
   
    return Promise.reject(reason)
}]

// => 发送各种请求以及使用axios.all处理并行
axios.get(URL,{
   
    params: {
   

    }
}).then(data => {
   

}).catch(reason => {
   

})

axios.post(URL,DATA,{
   

}).then(data => {
   })


axios.all([p1,p2,....]).then(results => {
   })
目录
相关文章
|
JSON JavaScript 安全
从另外一个角度看待——JS深浅复制
1. 浅复制 VS 深复制 2. 浅谈浅复制 • 扩展运算符(...)复制对象和数组 • Object.assign() • Object.getOwnPropertyDescriptors()和Object.defineProperties() 3. 深复制 4. 掘金的文章
|
运维 Kubernetes 前端开发
换个角度入门 K8s
本文通过一个业务发展的故事,分享 K8s 出现的原因以及它的运作方式。适合所有技术开发人员,尤其是前端开发者。
1749 0
换个角度入门 K8s
|
前端开发 JavaScript 设计模式
|
设计模式 缓存 Android开发
换个姿势,更好地参透EventBus(上)
EventBus(事件总线),跟之前写的 Handler 一样,老生常谈,教程早已烂大街
261 1
|
安全 Java API
换个姿势,更好地参透EventBus(下)
EventBus(事件总线),跟之前写的 Handler 一样,老生常谈,教程早已烂大街
132 0
|
设计模式 存储 Java
换个姿势,更好地参透EventBus(中)
EventBus(事件总线),跟之前写的 Handler 一样,老生常谈,教程早已烂大街
117 0
|
设计模式 Java 编译器
恕我直言,我怀疑你没怎么用过枚举
我们是否一样? 估计很多小伙伴(也包括我自己)都有这种情况,在自学Java语言看书时,关于枚举enum这一块的知识点可能都有点 “轻敌” ,觉得这块内容非常简单,一带而过,而且在实际写代码过程中也不注意运用。 是的,我也是这样!直到有一天我提的代码审核没过,被技术总监一顿批,我才重新拿起了《Java编程思想》,把枚举这块的知识点重新又审视了一遍。 为什么需要枚举 常量定义它不香吗?为啥非得用枚举? 举个栗子,就以B站上传视频为例,视频一般有三个状态:草稿、审核和发布,我们可以将其定义为静态常量: public class VideoStatus { public st
145 0
|
iOS开发
动效-通过现象看本质
动效-通过现象看本质
107 0
动效-通过现象看本质
|
5月前
|
消息中间件 前端开发 API
研究Promise心得总结与思路总结
本文总结了Promise的核心功能,包括状态管理、then方法实现以及链式调用和错误处理。
36 0
|
C++
关于IOCP,某些地方就是不让人彻底舒服(WSASend重叠post数据)
开门见山,直接就事论事。   假如有这么一个基于IOCP模型的Server,这个Server提供的所有服务中有这么一种服务……文件下载,我们再假设Server端存有一个20G的文件,客户端这时发送一个请求到服务端来,客户端要求下载这个20G的文件,由此可能引发一系列让人头疼的问题(不谈Trans...
1354 0

热门文章

最新文章