一、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. 屏幕分辨率测试工具(舍弃)---chrome开发者工具devTools(强烈建议系统学习)

    2019-01-25 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http:// ...

  2. (转)pycharm autopep8配置

    转:https://blog.csdn.net/BobYuan888/article/details/81943808 1.pip下载安装: 在命令行下输入以下命令安装autopep8 pip ins ...

  3. Ntdll.h

    转自:https://www.cnblogs.com/gwsbhqt/p/5092390.html 为了能使用上Ntdll.lib库函数,从几份不完整的Ntdll.h中拼凑整理出了比较完整美观的Ntd ...

  4. Django 前戏

    1.web应用 web应用程序是一种可以通过web访问的应用程序.程序最大的好处就是用户很容易的访问应用程序,用户只需要有浏览器即可,不需要在安装其他的软件,应用程序有两种模式C/S,B/S C/S模 ...

  5. Jmeter发送SOAP请求对WebService接口测试

    Jmeter发送SOAP请求对WebService接口测试 1.测试计划中添加一个用户自定义变量 2.HTTP信息头管理器,添加Content-Tpe,  application/soap+xml;c ...

  6. Linux 路由表详解及 route 命令详解

    参考资料 Linux 内核的路由表 通过 route 命令查看 Linux 内核的路由表: [root@VM_139_74_centos ~]# route Kernel IP routing tab ...

  7. org.w3c.dom。 XML解析 练习

    HTML文档 1 import javax.xml.parsers.DocumentBuilder; import javax.xml.parsers.DocumentBuilderFactory; ...

  8. Win7 VSCode 离线安装Rust语言及环境配置

    前置依赖 装过Visual Studio或Visual Studio Build Tool 2015 下载Rust离线安装包 https://forge.rust-lang.org/other-ins ...

  9. 关于eclipse中的maven插件问题

    最近上课讲eclipse 中的maven插件 有一个坑确实比较坑,实际上就是一个配置的原因. 就是在eclipse中设置java 的buildpath的时候,一般不注意往往都设置成了jre的,这样的话 ...

  10. HTML5基本标签<搬运>

    HTML语言基本标签: 创建一个HTML文档<html></html> 设置文档标题以及其他不在WEB网页上显示的信息<head></head> 设置文 ...