Promise史诗级详解

最新推荐文章于 2024-06-07 10:58:40 发布
最新推荐文章于 2024-06-07 10:58:40 发布
阅读量504 收藏 1
点赞数
文章标签： javascript node.js java
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_59124055/article/details/120374152
版权

Promise-整体说明

它是一个ES6提出一个新语法，用来优化异步代码的写法。

  • 在前端领域是我们必须要会的一个内容

  • 后续的课程中也会多次使用

promise：承诺。

小小一道面试题

代码填空，并完成指定功能。

  • 生活中.它是用来表述 对将来要发生的事情的肯定。 例如 ： 高中生说，老师，我会考上一所好大学的；销售员说，老板，我一定会签下大单的；程序员说，老妈，我过年一定会带个女朋友回来的。

  • 在ES6中，它是新增的构造器，用来优化实现异步操作。在没有它之前，javascript中的异步处理，大多是利用回调函数来实现的。典型的几种如下:（1）setTimeout （2）ajax （3）nodejs中的文件读取。现在有了promise，就可以对这些异步操作进行改写了。

  • 学习内容

  • 构造器

  • 三种状态和值

  • 经典调用格式

小小一道面试题

代码填空，并完成指定功能。

function sleep(time){
    // 请写出你的代码
}

sleep(2000).then(()=>{
    console.log("后续操作")
})
console.log(2);

目标 是让sleep 的功能与setTimeout一样：就是等2000毫秒之后再执行后续操作。

参考代码如下：

function sleep(time){
	return new Promise(function(resolve,reject){
        // 异步操作，根据执行结果，决定是否调用 resolve,reject
        setTimeout(function(){
            resolve()
        }, time)
    })
}

Promise的基本使用

经典格式

构造器

var p1 = new Promise(function(resolve,reject){
  // 执行异步代码
  // 调用resolve,或者reject
});
console.dir(p1)

要点：

  • 构造器必须要给定一个参数，如果不给就是会报错。例如，new Promise() 报错的信息是： Promise resolver undefined is not a function

  • 构造器的实参是一个函数，这个函数的特殊之处在于它有两个形参(resolve,reject)，这两个形参也是函数。在格式上，也可以采用箭头函数来改写。例如：var p1 = new Promise((resolve,reject)=>{})。

  • 在函数体的内部， 一般会执行异步代码，然后根据情况来调用resolve()或者是reject() 。调用resolve或者是reject后会产生什么样的后果，在后面小节介绍。 当然了，再次强调一下resolve和reject只是形参名，可以改写成其它的。

三种状态和值

一个Promise对象的状态可能是如下三种之一：pending,resolved,rejected 。下面分别介绍。

初始态pending

pending。它的意思是 "待定的，将发生的"，相当于是一个初始状态。 创建Promise对象时，且没有调用resolve或者是reject方法，相当于是初始状态。这个初始状态会随着你调用resolve，或者是reject函数而切换到另一种状态。

var p = new Promise((ok,err)=>{ console.info('发呆.....' )})
console.dir(p)

这个初始状态就是你对别人说出承诺的那个瞬间，此时，大家都不知道这个承诺是否能兑现。

成功态resolved

也有叫fulfilled的。

resolved。表示解决了，就是说这个承诺实现了。 要实现从pending到resolved的转变，需要在 创建Promise对象时，在函数体中调用了resolve方法(即第一个参数)。

var p = new Promise((resolve,reject)=>{ resolved();})
console.dir(p)

注意，上面的resolve和reject仅是形参名而已。

失败态rejected

rejected。拒绝，失败。表示这个承诺没有做到，失败了。要实现从pending到rejected的转换，只需要在创建Promise对象时，调用reject函数。

var p = new Promise((resolve,reject)=>{ reject()} )
console.dir(p)

三种状态小结

  1. 状态是可转化。

最初创建promise对象时，默认状态是pending，如果在函数体内部调用了第一个参数对应的函数，则状态变成了resolved；如果调用了第二个参数对应的函数，则状态变成了rejected。

 pending -----  resolve() --> resolved;
 pending -----  reject()  --> rejected;

  1. 状态转换是不可逆的。

一旦从pending ---> resolved（或者是rejected），就不可能再回到pending，也不能由resolved变成rejected。

promise的值

一个promise对象除了状态之外，还有promiseValue。在构造器中，这个值在调用resolve和reject方法时传入。

例如：

var p = new Promise( (resolve,reject) => { resolve(123); } );
//  此时，prommise对象p的状态是 resolved，值是123。
console.dir(p)
var p = new Promise( (resolve,reject) => { reject(123); } );
//  此时，prommise对象p的状态是 rejected，值是123
console.dir(p)

promise的兑现

在构造器的函数体中，一旦状态发生了变化，就会进行then，或者是catch中去，同时把promiseValue传入对应的函数。

具体来说：

  • 状态从pending变成resolved，进入then中，调用函数，并传入此时的promiseValue（就是调用resolve时传入的实参）

  • 状态从pending变成rejected，进入catch中，调用函数，并传入此时的promiseValue（就是调用reject时传入的实参）

根据实际情况的需要，也可以不加上finally()。

小结

构造器

三种状态和值

经典格式

使用promise改造回调函数

下面我们回到具体的问题：如何对现有的，通过回调函数来实现异步操作的代码进行改写。

基本套路

  • 第一步：建立模板。这里的模板是指固定的套路：写一个空函数，在函数体中的创建一个promise对象，并返回。

function fnName(){
    var p = new Promise((resolve,reject)=>{})
    return p;
}

当然， 如果使用箭头函数的话，还可以简化成这样：

let fnName = () => new Promise((resolve,reject)=>{})

第二步：把异步功能写入构造器中，根据实际来决定是否调用resolve,reject。

function fnName(){
    var p = new Promise((resolve,reject)=>{
        // 这里写具体的代码，并在某个恰当的时机去调用resolve和reject函数。
    })
    return p;
}

  • 第三步：调用函数。

    通过fnName().then().catch() 结构来调用这个函数。

示例1: ajax

原回调函数的写法

var xhr = new XMLHttpRequest();
xhr.open('get','http://httpbin.org/ip')
xhr.onload = function() {
	console.log(xhr.responseText)	
}
xhr.onerror = function (){
	console.log('请求接口错误')
}
xhr.send()

改写之后

let ajax = function() {
	return new Promise((resolve,reject)=>{
		var xhr = new XMLHttpRequest();
        xhr.open('get','http://httpbin.org/ip')
        xhr.onload = function() {
			resolve(xhr.responseText)
        }
        xhr.onerror = function (){
			reject('请求接口错误')
        }
        xhr.send()
	})
}
ajax().then(res =>{
    console.log(res)
}).catch(err =>{
    console.log(err)
})

这里用到的接口http://httpbin.org/ip是从http.org 上访问的。

示例2 nodejs中的文件读取

原来的写法

const fs = require('fs');

fs.readFile("1.txt", 'utf8', (err, data) => {
    if (err) {
    	reject(err);
    } else {
    	resolve(data);
    }
});

改写之后

const fs = require('fs');
function readFile(filename) {
  return new Promise((resolve, reject) => {
    fs.readFile(filename, 'utf8', (err, data) => {
      if (err) {
        reject(err);
      } else {
        resolve(data);
      }
    });
  });
}

readFile('./server.js1')
  .then(rs => {
    console.log(rs);
  })
  .catch(err => {
    console.log('err', err);
  });

then的格式及执行逻辑

目标

掌握then方法的使用；

then方法的作用是为Promise对象添加状态改变时的回调函数。

下面从其调用格式，执行逻辑及返回值三个方面来介绍

then的格式

它可以写两个参数，如下：

// p 是一个promise对象
p.then(函数1[,函数2])

它的两个参数都是函数。

  • 第一个参数是resolved状态的回调函数。当p的状态从pending变成了resolved之后，函数1会执行。

  • 第二个参数是rejected状态的回调函数。 当p的状态从pending变成了rejected之后，函数2会执行。

  • 其中第二个参数是可选的，如果只写一个参数的话就是如下:

promise对象.then(函数1)

执行逻辑

以如下代码为例

var p = new Promise((resolve,reject)=>{
   resolve(val1);
    // or reject(val2)
})

p.then((okVal)=>{
    console.info("成功");
    console.log(okValue);
}, (errVal)=>{
    console.info("失败");
    console.log(errValue);
})

它的两个参数都是函数，其执行逻辑是:

  • 如果promise对象的状态是resolved，则then()会执行第一个函数，并传入当前的PromiseValue（即上面的val1）;

  • 如果promise对象的状态是rejected，则then()会执行第二个函数，并传入当前的PromiseValue（即上面的val2）;

  • 特别地，如果promise对象的状态是rejected，且此时then方法并没有设置第二个参数，就会向外抛出一个错误，错误的提示大约是Uncaught (in promise)。

示例代码1

var p = new Promise((resolve,reject)=>{
	resolve(1)//主动调用resolve，并传入
})
// 此时，P的状态是resolved，且值promiseValue 是1.
p.then((res)=>{
    // 因为p的状态是resolved，所以自动执行then的第一个参数，并且把promisevalue传进来。
	console.log("then,ok",res)
})

执行输出结果是：then,ok,1

示例代码2

var p = new Promise((resolve,reject)=>{
	reject(2)//主动调用reject，并传入实参
})
// 此时，P的状态是rejected，且值promiseValue 是2.

p.then((res)=>{
    // 因为p的状态是resolved，所以这句代码不会执行。
	console.log("then,ok",res)
},(err)=>{
    // 因为p的状态是rejected，所以自动执行then的第二个参数，并且把promisevalue传进来。
	console.log("then,err",err)
})

执行输出结果是：then,err,2

then的返回值(难点)

then()方法的返回值也是一个promise对象，所以它支持链式写法。但是要注意的是它的返回值是一个新的promise对象，与调用then方法的并不是同一个对象。

看下如下代码：

var p1 = new Promise(()=>{});
var p2 = p1.then(function f_ok(){}, 
	function f_err(){}
); 
// p2也是一个promise对象。

console.log(p1 === p2); // false

如上代码可以说明p1.then()的结果是一个与p1不同的promise对象。换句话说，then()会封装一个全新的promise对象p2。那既然 p2也是一个promise对象，那么，p2的状态（promiseStatus）和值(promiseValue)分别是什么？

p2的状态及promiseValue按如下规则来确定

  • 如果p1的状态是pending,则p2的状态也是pending。

  • 如果p1的状态是resolved，then()会去执行f_ok，则p2的状态由f_ok的返回值决定。

    • 如果f_ok返回值不是promise对象，则p2的状态是resolved，且p2的promiseValue就是f_ok函数的return值。

    • 如果f_ok返回值是一个promise对象，则p2的状态及promiseValue以这个promise对象为准。

    • 如果f_ok这个函数内部发生了错误（或者是用户主动抛出错误），则p2的状态是rejected，且p2的promiseValue就是这个错误对象。

  • 如果p1的状态是rejected，then()会去执行f_err，则p2的状态由f_err的返回值决定。

    • 如果f_err返回值不是promise对象，则p2的状态是resolved，且p2的promiseValue就是f_err函数的return值。

    • 如果f_err返回值是一个promise对象，则p2的状态及promiseValue以这个promise对象为准。

    • 如果f_err这个函数内部发生了错误（或者是用户主动抛出错误），则p2的状态是rejected，且p2的promiseValue就是这个错误对象。

练习

示例代码1

var p1 = new Promise(()=>{});
var p2 = p1.then(function f_ok(){}, function f_err(){}); // p2也是一个promise对象。
console.dir(p1);
console.dir(p2);

示例代码2

var p1 = new Promise((resolve,reject)=>{ resolve()});
var p2 = p1.then(function f_ok(){
	return 1
}, function f_err(){}); // p2也是一个promise对象。
console.dir(p1);
console.dir(p2);

特殊地，如果f_ok()中并没有return语句，则相当于是 return undefined。

示例代码3

var p1 = new Promise((resolve,reject)=>{ resolve()});
var p2 = p1.then(function f_ok(){
	var temp = new Promise((resolve,reject)=>{ resolve({a:1}) }); 
	return temp;
}, function f_err(){}); 

console.dir(p2);

示例代码4

var p1 = new Promise((resolve,reject)=>{ resolve()});
var p2 = p1.then(function f_ok(){
	console.log(abc);// 这里故意犯错
}, function f_err(){}); 

console.dir(p2);

示例代码5

var p1 = new Promise((resolve,reject)=>{ reject(100)});
var p2 = p1.then(function f_ok(){
	
}, function f_err(errVal){
	var temp = new Promise((resolve,reject)=>{ resolve({b:errVal}) }); 
	return temp;
}); 

console.dir(p2);

catch的格式及用法

catch()的格式及用法

Promise.prototype.catch 是 Promise.prototype.then(null, reject)的别名，用于指定当promise对象的状态从pending变成rejected的回调函数 。

var p1 = new Promise((resolve,reject)=>{
	reject('s')
});

p1.catch(function(err){
	console.log(err);
})

// 与下面的代码等价
p1.then(null, function(err){
	console.log(err);
})

单独使用catch没有什么意义，它一般与then一块使用。如下：

new Promise((resolve,reject)=>{

}).then(function(result){
	// 如果promise对象的状态是resolved的，就会到这里来，并且result会接收promiseValue的值
}).catch(function(err){
	// 如果promise对象的状态是rejected的，就会到这里来，并且err会接收promiseValue的值
})

// 上面的代码如何拆分来写的话，等价于：
var p1 = new Promise((resolve,reject){

});
var p2 = p1.then(function(result){

});
var p3 = p2.catch(function(err){

})

catch的返回值

catch的返回值仍是一个promise对象，确定它的值的方式与then(null,(errVal)=>{ })的方式一致。

promise的链式调用

示例1

代码

function do1() {
    console.log("任务1");
}
function do2() {
    console.log("任务2");
}
function do3() {
     console.log("任务3");
}
function do4() {
    console.log("任务4");
}

var p = new Promise((resolve,reject)=>{ resolve()})
p.then(do1)
 .then(do2)
 .then(do3)
 .then(do4);

结果输出是:任务1，任务2，任务3，任务4

分析

var p1 = p.then(do1);
var p2 = p1.then(do2)
var p3 = p2.then(do3)
var p4 = p3.then(do4)

第一步：由于p的状态是resolved,所以p.then(do1)中，do1函数会执行。输出任务1。

第二步：确定p1的状态。按前面关于then的部分的介绍，p1的状态由do1()来决定。因为do1并没有明确指定返回值，则返回值就是undefined. p1的状态就是resolved。

第三步：由于p1的状态是resolved，所以p1.then(do2)会继续执行do2。输出任务2 ，且p2的状态由do2来决定。与第二步的分析相同，p2的状态仍是resolved。

第四步：接下来看p3。由于p2的状态是resolved，所以p2.then(do3)会继续执行do3。输出任务2 ，且p3的状态由do3来定，仍是resolved。

最后：p3.then(do4)。由于p3的状态是resolved，所以执行do4。输出任务4 。

示例2

function do1() {
    console.log("任务1");
}
function do2() {
    console.log("任务2");
}
function do3() {
     console.log("任务3");
}
function do4() {
    console.log("任务4");
}

var p = new Promise((resolve,reject)=>{ resolve()})
p.then(do1)
 .then(do2)
 .catch(do3)
 .then(do4);

上面的代码的执行结果是：任务1, 任务2, 任务4。我们先把过程分解一下，多添加几个中间变量来描述它们的值

var p1 = p.then(do1);
var p2 = p1.then(do2)
var p3 = p2.catch(do3)
var p4 = p3.then(do4)

分析如下：

第一步：由于p的状态是resolved,所以p.then(do1)中，do1函数会执行。输出任务1。

第二步：确定p1的状态。按前面关于then的部分的介绍，p1的状态由do1()来决定。因为do1并没有明确指定返回值，则返回值就是undefined. p1的状态就是resolved。

第三步：由于p1的状态是resolved，所以p1.then(do2)会继续执行do2。输出任务2 ，且p2的状态由do2来决定。与第二步的分析相同，p2的状态仍是resolved。

第四步：接下来看p3。由于p2的状态是resolved，所以它并不会执行do3， p3的状态没有变化，仍保持p2的状态：resolved。

最后：p3.then(do4)。由于p3的状态是resolved，所以执行do4。输出任务4 。

async语法

async

函数返回一个 Promise 对象，可以使用then方法添加回调函数。

async函数返回一个 Promise 对象。

async函数内部return语句返回的值，会成为then方法回调函数的参数。

function f1 () {
  return 1
}
async function f2 () {
  return 1
}
async function f3 () {}
const r1 = f1()
const r2 = f2()
const r3 = f3()
console.log(r1) // 1
console.log(r2) // Promise, resolved(1)
console.log(r3) // Promise, resolved(undefined)
r2.then(res => { console.log(res) })
r3.then(res => { console.log(res) })

await 命令

正常情况下，await命令后面是一个 Promise 对象，返回该对象的结果。如果不是 Promise 对象，就直接返回对应的值。

async function f () {
  var a = await 1
  var b = await new Promise((resolve, reject) => { resolve(1) })
  console.log(a) // 1
  console.log(b) // 1
}
f()

执行流程

在执行async函数(设名为asyncF)时，进入函数内部：

- 按序执行同步代码
- 遇到await，跳出asyncF函数，

继续执行后续代码。

当await的后的异步代码执行完成之后，接着执行asyncF中的后续代码。

const p1 = new Promise((resolve, reject) => {
  setTimeout(()=>resolve(100), 3000)
})
async function f () {
  console.log('开始执行f')
  var a = await p1
  console.log('p1完成了')
  console.log(a)
  return 1
}

console.log('主函数运行...')
const res = f()
console.log('f()完成，返回值是', res)
res.then(res => { console.log(res) })

执行结果是：

主函数运行...
开始执行f
f()完成，返回值是 Promise { <pending> }
----此处等了3s----
p1完成了
100
1

async的返回值

async函数返回的 Promise 对象，必须等到内部所有await命令后面的 Promise 对象执行完，才会发生状态改变，除非遇到return语句或者抛出错误。也就是说，只有async函数内部的异步操作执行完，才会执行then方法指定的回调函数。

const p1 = new Promise((resolve, reject) => {
  setTimeout(() => resolve(100), 3000)
})

const p2 = new Promise((resolve, reject) => {
  setTimeout(() => resolve(200), 5000)
})
async function f () {
  console.log('开始执行f')
  var a = await p1
  console.log('p1完成了')
  var b = await p2
  console.log('p2完成了')
  return a + b
}

console.log('主函数运行...')
const res = f()
console.log('f()完成，返回值是', res)
res.then(res => { console.log(res) })

输出结果

主函数运行...
开始执行f
f()完成，返回值是 Promise { <pending> }
----此处等了3s----
p1完成了
----此处等了2s----
p2完成了
300

目录

Promise-整体说明

小小一道面试题

小小一道面试题

Promise的基本使用

经典格式

构造器

三种状态和值

promise的兑现

小结

使用promise改造回调函数

基本套路

示例1: ajax

示例2 nodejs中的文件读取

then的格式及执行逻辑

目标

then的格式

执行逻辑

then的返回值(难点)

练习

catch的格式及用法

catch()的格式及用法

catch的返回值

promise的链式调用

示例1

示例2

async语法

async

await 命令

执行流程

async的返回值

不爱青椒
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
promise-resolver:将promises解析器方法转换为节点样式回调
05-01
承诺解决者 提供接受回调并返回promise而不需要Promise实现的灵活方法 安装 $ npm install --save promise-resolver 用法 var promiseResolver = require ( 'promise-resolver' ) ; function sayMyName ( name , cb ) { var deferred = promiseResolver . defer ( cb ) ; // this resolves the promise and calls the callback (asynchronously). deferred . cb ( null , 'My name is ' + name + '!' ) ; return deferred . promise ; sayMyName现在可以通过
Promise函数的详解
01-20
Promise函数是异步编程的一个解决方案，相对传统的解决方案，他更合理和强大。Promise的本意是“承诺”、“许诺”的意思。承诺在未来会执行某个操作的函数，就是Promise函数。其基本结构如下： var promise = new ...
`Promise.withResolvers` - 更简单、更直观的异步控制
gitblog_00058的博客
05-28 407
Promise.withResolvers - 更简单、更直观的异步控制 项目地址:https://gitcode.com/tc39/proposal-promise-with-resolvers 在JavaScript的世界里，Promise是处理异步操作的重要工具。然而，当你需要在创建Promise之后配置其解析和拒绝行为时，传统的做法可能会显得繁琐。为此，我们向您推荐一个正在提案的增强功能—...
ES15新特性
qq_43641110的博客
03-20 1170
例如，Unicode 码点 U+10000（这是 BMP 之外的第一个码点）在 UTF-16 中的编码就是高代理码元 U+D800 和低代理码元 U+DC00 的组合，即 “D800 DC00”。ArrayBuffer 实例的 resize() 方法将 ArrayBuffer 调整为指定的大小，以字节为单位，前提是该 ArrayBuffer 是可调整大小的并且新的大小小于或等于该 ArrayBuffer 的 maxByteLength。使用 u 标志后，你可以匹配和处理任何有效的 Unicode 字符。
一道让人失眠的 Promise 试题深入分析
2401_84411522的博客
04-27 607
总结来说，面试成功=基础知识+项目经验+表达技巧+运气。我们无法控制运气，但是我们可以在别的地方花更多时间，每个环节都提前做好准备。面试一方面是为了找到工作，升职加薪，另一方面也是对于自我能力的考察。能够面试成功不仅仅是来自面试前的临时抱佛脚，更重要的是在平时学习和工作中不断积累和坚持，把每个知识点、每一次项目开发、每次遇到的难点知识，做好积累，实践和总结。开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】完美通过???最终时刻，如何解释那道面试题的执行结果。
全新API——Promise.withResolvers
weixin_43537322的博客
02-07 775
简介了Promise.withResolvers方法，它提供了一种简洁而灵活的处理Promise的方式。通过返回包含Promise对象和解决/拒绝函数的对象，该方法使得处理Promise的状态更方便，并可用于各种场景，如处理流和队列。此外，它还支持非Promise构造函数，增加了更多的应用可能性。使用Promise.withResolvers可以让我们以更优雅的方式处理Promise，并使代码更易读和维护。
uniapp 配置在线预览pnf
最新发布
xiaobai215sl的博客
06-07 152
在线预览pdf
uni-app预览pdf（适配多端）
欢迎来到Tong_YuTian的博客
06-06 667
今天有个功能要在当前页面预览pdf，并且适配多端，研究了好久，也踩了好多坑，写个文章记一下，也给各位避避坑~
Promise 高阶 try catch catch， done
u013400314的博客
06-15 253
catch，then 都会返回promise对象，如果不是要先调用promise.resolve转换的 1、参数如果是promise对象，那么promise.resolve 不做任何修改，直接原封不动的返回（如下图的P3,P4） 2、Promise.resolve()方法会将这个对象转为 Promise 对象，然后就立即执行thenable对象的then()方法。 3、参数不是具有then()方法的对象，或根本就不是对象 那么promise.resolve ，状态为resolved。 4、无参数的，直接返回
整会promise这8个高级用法，再被问倒来喷我
web全栈开发的博客
08-04 297
地址：前端面试题库 在js项目中，promise的使用应该是必不可少的，但我发现在同事和面试者中，很多中级或以上的前端都还停留在、、等常规用法，连也只是知其然，而不知其所以然。但其实，promise还有很多巧妙的高级用法，也将一些高级用法在alova请求策略库内部大量运用。现在，我把这些毫无保留地在这边分享给大家，看完你应该再也不会被问倒了，最后还有压轴题哦。觉得对你有帮助还请点赞收藏评论哦！例如你有一组接口需要串行执行，首先你可能会想到使用await 如果使用promise的写法，那么你可以使用the
解决前端项目问题：Uncaught (in promise) TypeError: resolve is not a function报错
意初的博客
09-23 8345
运行项目浏览器：Uncaught (in promise) TypeError: resolve is not a function报错。
Promise 新增的这个 API，挺有用！
程序员成长指北
02-29 250
大厂技术高级前端Node进阶点击上方程序员成长指北，关注公众号 回复1，加入高级Node交流群前言JavaScript 的异步编程模型是通过 Promise 来简化的，它允许我们以更直观的方式处理异步操作。近期，Promise API 迎来了一项新的扩展——Promise.withResolvers 方法.静态方法返回一个对象，其包含一个新的Promise()对象和两个函数，用于解决...
Javascript Promise用法详解
10-18
JavaScript Promise 是一种处理异步操作的技术，它在ES6中被引入，旨在解决回调地狱问题，提供了一种更强大、规范化的异步编程解决方案。Promise 是一个代表了可能还未完成或已经完成的异步操作的对象，它有三种状态...
ES6关于Promise的用法详解
12-03
Node的产生，大大推动了Javascript这门语言在服务端的发展，使得前端人员可以以很低的门槛转向后端开发。 当然，这并不代表迸发成了全栈。... 想必接触过Node的人都知道，Node是以异步(Async)回调著称的...Promise 对象用
JavaScript中Promise的使用详解
10-20
Promise，相信每一个前端工程师都或多或少地在项目中都是用过，毕竟它早已不是一个新名词。ES6中已经原生对它加以支持，在caniuse中搜索一下 Promise ，发现新版的chrome和firefox也已经支持。但是低版本的浏览器...
promise对象使用介绍
weixin_65100963的博客
04-30 2622
Promise 它是一个ES6提出一个新语法，用来优化异步代码的写法。 promise：承诺 ● 生活中，它是用来表述 对将来要发生的事情的肯定。 例如 ： 高中生说，老师，我会考上一所好大学的；销售员说，老板，我一定会签下大单的；程序员说，老妈，我过年一定会带个女朋友回来的。 ● 在ES6中，它是新增的构造器（Array, Object, Promise），用来优化实现异步操作。在没有它之前，javascript中的异步处理，大多是利用回调函数来实现的。典型的几种如下:（1）setTimeout （2）a
Promise浏览器兼容问题
qq_41114603的博客
02-14 1882
文章目录Promise 在360浏览器兼容模式下无法运行 Promise 在360浏览器兼容模式下无法运行 解决方案 npm install babel-polyfill --save 修改 entry: { app: ['./node_modules/babel-polyfill/dist/polyfill.js','./src/main.js'] }, 利用babel-poly...
promise
feng_cy的博客
09-19 175
Promise-整体说明 一、认识 它是一个ES6提出一个新语法，用来优化异步代码的写法。 在前端领域是我们必须要会的一个内容 后续的课程中也会多次使用 promise：承诺。 在ES6中，它是新增的构造器（Array, Object, Promise），用来优化实现异步操作。在没有它之前，javascript中的异步处理，大多是利用回调函数来实现的。典型的几种如下:（1）setTimeout （2）ajax （3）nodejs中的文件读取。现在有了promise，就可以对这些异步操作进行改写了。 学习内容
ts Promise 详解 高级应用
03-28
Promise是一种异步编程的解决方案，它可以用来处理异步操作，避免回调地狱，提高代码可读性和可维护性。在JavaScript中，Promise是一个对象，它代表了一个异步操作的最终状态（成功或失败）以及返回的值。 Promise有三种状态： 1. pending：初始状态，既不是成功，也不是失败状态。 2. fulfilled：意味着操作成功完成，Promise对象的状态变为fulfilled。 3. rejected：意味着操作失败，Promise对象的状态变为rejected。 Promise对象接受一个函数作为参数，该函数有两个参数：resolve和reject。当异步操作成功时，调用resolve函数并传递结果，当异步操作失败时，调用reject函数并传递错误信息。 Promise对象有两个重要的方法： 1. then：用于处理Promise对象的状态，当Promise对象的状态变为fulfilled时，调用then方法中的第一个函数并传递Promise对象的返回值，当Promise对象的状态变为rejected时，调用then方法中的第二个函数并传递Promise对象的错误信息。 2. catch：用于捕获Promise对象的错误信息，相当于then方法的第二个函数。 Promise对象还有一些高级应用，如： 1. Promise.all：用于将多个Promise对象合并为一个Promise对象，当所有Promise对象都变为fulfilled时，返回一个包含所有Promise对象返回值的数组，当其中一个Promise对象变为rejected时，返回该Promise对象的错误信息。 2. Promise.race：用于将多个Promise对象合并为一个Promise对象，当其中一个Promise对象变为fulfilled或rejected时，返回该Promise对象的状态和返回值。 3. Promise.resolve：用于将非Promise对象转换为Promise对象，当传入的参数为Promise对象时，返回该对象，当传入的参数为非Promise对象时，返回一个状态为fulfilled且返回值为传入参数的Promise对象。 4. Promise.reject：用于创建一个状态为rejected的Promise对象，返回一个包含错误信息的Promise对象。 总之，Promise是一种非常实用的异步编程解决方案，可以大大提高代码的可读性和可维护性，同时也有很多高级应用可以帮助我们更好地处理异步操作。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值