一、promise函数是干什么的

promise函数是解决异步编程调用代码逻辑编写过于复杂的问题的,当网络请求非常复杂时,就会出现回调地狱,这样如果将这些代码写在一起就会看起来很复杂,且不利于阅读,如果用promise的话就会让代码看起来更加美观优雅

二、Promise三种状态

首先, 当我们开发中有异步操作时, 就可以给异步操作包装一个Promise
异步操作之后会有三种状态

pending:等待状态,比如正在进行网络请求,或者定时器没有到时间。
fulfill:满足状态,当我们主动回调了resolve时,就处于该状态,并且会回调.then()
reject:拒绝状态,当我们主动回调了reject时,就处于该状态,并且会回调.catch()

三、实现方法

 //参数 函数(resolve,reject)
new Promise((resolve, reject) => {
setTimeout(() => {
//请求成功的时候调用resolve
resolve('22222')
//请求失败的时候调用reject
reject('error message')
}, 1000)
}).then((data) => { //请求成功处理函数
console.log(data)
}).catch((err) => { //请求失败处理函数
console.log(err)
})

四、链式调用

new Promise ((resolve,reject) => {
setTimeout(() => {
resolve('aaa')
},1000)
}).then (res => {
//自己处理代码
console.log(res) //对结果进行第一次处理
return new Promise((resole) => {
resole(res + '111')
})
}).then (res => {
//第二层代码
console.log(res)
//对结果进行第二次处理
return Promise.resolve(res + '222') //可以这样简写
}).then(res => {
console.log(res)
})

五、promise all方法

有时候我们需要等待两个或者多个请求都成功返回了再进行下一步操作,promise 的all方法是等所有的异步请求完成之后在进行下一步回调

Promise.all([
new Promise((resolve,reject) => {
$ajax({
url: 'url1',
success: function (data) {
resolve(data)
}
})
}),
new Promise((resolve,reject) => {
$ajax({
url: 'url2',
success: function (data) {
resolve(data)
}
})
})
]).then(results => {
console.log(results) //返回得results是一个数组
})

promise函数的更多相关文章

  1. ES6的promise函数用法讲解

    总结:Promise函数的出现极大的解决了Js中的异步调用代码逻辑编写太过复杂的问题,Promise对象让异步调用函数的流程显得更加的优雅,也更容易编写. 举例: 1. 异步调用: 假设现在我的一个页 ...

  2. 封装原生promise函数

    阿里面试题: 手动封装promise函数 <!DOCTYPE html> <html lang="en"> <head> <meta ch ...

  3. Promise函数的使用

    最近在做批量打印并监控显示打印进度的功能,用到了很多异步函数,很多异步函数嵌套在回调函数里面,层层嵌套,导致代码可阅读性与可维护性变得十分糟糕,而且由于都是异步执行的函数,无法知道什么时候能回调结束, ...

  4. 为Promise添加finally方法支持,把小程序函数变成promise函数

    // 为Promise添加finally方法支持 Promise.prototype.finally = function (callback) {   let P = this.constructo ...

  5. C++Promise函数

    Promise内部会建立一个shared state是用来放一个相应的类型的值或是一个异常,并可被future object 取其数据当线程结果 promise是在形成成果后才将结果放进shared ...

  6. 【学习笔记】浅析Promise函数

    一.Promise是什么? 在JavaScript中,所有的代码都是单线程执行,所以javaScript的所有网络操作(“GET”/"POST"/"PUT"/& ...

  7. 阿里前端测试题--关于ES6中Promise函数的理解与应用

    今天做了阿里前端的笔试题目,原题目是这样的 //实现mergePromise函数,把传进去的数组顺序先后执行,//并且把返回的数据先后放到数组data中 const timeout = ms => ...

  8. 如何手动封装Promise函数

    第一步:Promise构造函数接受一个函数作为参数,该函数的两个参数分别是:resolve和reject; function Promise(task) { // 缓存this let that = ...

  9. 理解Promise函数中的resolve和reject

    看了promise的用法,一直不明白里面的resolve和reject的用法: 运行了这两段代码之后彻底理解了promise的用法: var p = new Promise(function (res ...

随机推荐

  1. html5: postMessage解决跨域通信的问题

    效果图 postmessage解析 HTML5提供了新型机制PostMessage实现安全的跨源通信. 语法 otherWindow.postMessage(message, targetOrigin ...

  2. 给网页标题添加icon小图标

    so easy: 给网页标题添加icon小图标: 直接在html文件的head部分添加下面代码(注意href的路径): <link rel="icon" type=" ...

  3. LLDB动态调试

  4. BZOJ 5170: Fable

    离散化+树状数组 求当前位之前是否有k位比它大 这样的话它就需要前移k位 剩下的按照原来的顺序依次填入 其实我觉得sort一下就可以做出来了 太久没写树状数组了 所以写了一下树状数组 #include ...

  5. Log4j Threshold、Append

    报错ERROR日志单独存放 Threshold属性可以指定日志level Log4j根据日志信息的重要程度,分OFF.FATAL.ERROR.WARN.INFO.DEBUG.ALL 比如我们指定某个a ...

  6. Linux_自制系统服务启动脚本

    目录 目录 前言 Case语句 Apache 启动脚本 Postfix service 启停脚本 前言 在Linux的某些系统服务中,需要自己定制启动服务的脚本.通常会使用Cash语句来实现. Cas ...

  7. 2019/10/27 TZOJ

    1001 Gaussian Prime http://www.tzcoder.cn/acmhome/problemdetail.do?&method=showdetail&id=379 ...

  8. HashSet -无序,不重复集合

    package cn.learn.collection.Set; import java.util.Objects; public class IsPerson { private int age; ...

  9. Netty核心组件介绍及手写简易版Tomcat

    Netty是什么: 异步事件驱动框架,用于快速开发高i性能服务端和客户端 封装了JDK底层BIO和NIO模型,提供高度可用的API 自带编码解码器解决拆包粘包问题,用户只用关心业务逻辑 精心设计的Re ...

  10. 阿里巴巴离线数据同步工具/平台datax安装、使用笔记

    废话不多说,直接上笔记,先来看下参考链接GitHub: https://github.com/alibaba/DataX.此链接有较详细的安装使用方法,还有json参数编写的文档说明,建议多看. Fi ...