ES6中promise的使用

已于 2023-08-25 15:25:14 修改
阅读量798 收藏 3
点赞数
分类专栏： 前端 文章标签： es6 javascript 前端
于 2023-08-25 15:23:27 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_23858785/article/details/132495842
版权

ES6中promise的使用

本文目录

基础介绍

官网：https://promisesaplus.com/

window.Promise
箭头函数
let p1 = new Promise((resolved, rejected) => {
  console.log("p1 Promise");
})
console.log(p1);
function函数
let p2 = new Promise(function (resolve, reject) {
  console.log("p2 Promise");
});
console.log(p2);

new Promise函数是同步函数，是立即执行的

状态

promise共有三种状态：pending / fulfilled / rejected

状态转换

  • pending -> fulfilled：成功状态
  • pending -> rejected：失败状态
let p = new Promise((resolved, rejected) => {
  console.log("p Promise");
  // resolved()
  // rejected()
})
console.log(p);

  • 竞争

原型方法

Promise.prototype.then()

  • then方法接收两个参数，一个是成功时的回调函数，一个是失败时的回调函数

    let p = new Promise(function (resolve, reject) {
  // 将状态修改为成功
  resolve("BNTang");
  // 将状态修改为失败
  // reject("BNTang");
});

    指针函数

    p.then(
  (val) => {
    console.log("val = " + val);
  },
  (err) => {
    console.log("err = " + err);
  }
)

    function函数

    p.then(
  function(val){
    console.log("val = " + val);
  },
  function(err){
    console.log("err = " + err);
  }
)

    function函数2

    function success(data) {
  console.log("成功", data);
}

function error(data) {
  console.log("失败", data);
}

promise.then(success, error);

  • Promise需要有返回值，在PromiseResult中可以查看

  • 如果new Promise中没有回调；则then里的函数不会执行

    let p = new Promise((res,rej)=>{
})

p.then(val=>{
  console.log(11); // 11不输出
})

  • then获取返回值，成功则进入第一个函数，失败进入第二个函数

    function f() {
  return "ghn"
}

let p = new Promise((resolved, rejected) => {
  // resolved(f())
  rejected(f())
})

p.then(
  (val) => {
    console.log("val = " + val);
  },
  (err) => {
    console.log("err = " + err);
  }
)
console.log(p）

  • then也会返回一个新的Promise对象，这个新Promise的状态取决于回调函数的执行情况，默认是undefined

    let p = new Promise((res, rej) => {
  res(11)
})

let p1 = p.then(
  (val) => {
    console.log("val1= " + val);
    return { name: 'ghn' }
  }, (err) => {
    console.log("err1 = " + err);
  }
)

p1.then(value => {
  console.log("p1-then = " + JSON.stringify(value));
})

console.log(p);
console.log(p1);

  • then中抛出异常或返回失败，第二个then的promise实例状态是根据p.then的返回值决定的

    let p = new Promise((res, rej) => {
  res(11)
})

let p1 = p.then(
  (val) => {
    console.log("val1= " + val);
    // return { name: 'ghn' }
    return new Promise((resolved,   rejected) => {
      rejected(2)
    })
    // throw new Error("my error")
  }, (err) => {
    console.log("err1 = " + err);
  }
)

p1.then((val) => {
  console.log("p1-then = " + JSON.stringify(val));
},(err) => {
  console.log("p1-then-err = " + JSON.stringify(err));
})
console.log(p);
console.log(p1);

Promise.prototype.catch()

  • 基础使用

    p.then(
  (data) => {
    console.log('resolved',data);
  },(err) => {
    console.log('rejected',err);
  }
); 

p.then((data) => {
  console.log('resolved',data);
}).catch((err) => {
  console.log('rejected',err);
});

  • 使用catch捕获异常

    let p = new Promise((res, rej) => {
  res(11)
})

let p1 = p.then(
  (val) => {
    console.log("val1= " + val);
    // return { name: 'ghn' }
    // return new Promise((resolved, rejected) => {
    //   rejected(2)
    // })
    throw new Error("my error")
  }, (err) => {
    console.log("err1 = " + err);
  }
).catch(err => {
  console.log("catch = " + err.message);
  // 根据错误类型判断是否继续抛出
  if (err instanceof Error) {
    // 如果错误是使用 new Error() 创建的，则不再继续传递
    return;
  }
  // 如果错误是其他类型，如Promise的reject方法传递的值，则继续抛出
  throw err;
})

p1.then((val) => {
  console.log("p1-then = " + JSON.stringify(val));
},(err) => {
  console.log("p1-then-err = " + JSON.stringify(err));
})
console.log(p);
console.log(p1);

静态方法

Promise.all()

Promise.all() 方法是 && 的关系；Promise.any() 方法是 || 的关系； Promise.race()方法是 赛跑机制

var p = Promise.all([p1, p2, p3]);
  • 只有p1、p2、p3的状态都变成fulfilled，p的状态才会变成fulfilled，此时p1、p2、p3的返回值组成一个数组，传递给p的回调函数
let p1 =new Promise(function(resolve,reject){
   resolve(1);
});
let p2 = new Promise(function(resolve,reject){
   resolve(2);
});
let p3 = new Promise(function(resolve,reject){
   resolve(3);
});

Promise.all([p1, p2, p3]).then(function (results) {
   console.log('success:'+results);
}).catch(function(r){
   console.log("error");
   console.log(r);
});
  • 只要p1、p2、p3之中有一个被rejected，p的状态就变成rejected，此时第一个被reject的实例的返回值，会传递给p的回调函数
let p1 =new Promise(function(resolve,reject){
   resolve(1);
});
let p2 = new Promise(function(resolve,reject){
   resolve(2);
});
let p3 = new Promise(function(resolve,reject){
   reject(3);
});

Promise.all([p1, p2, p3]).then(function (results) {
   console.log('success:'+results);
}).catch(function(r){
   console.log("error");
   console.log(r);
});
  • Promise.all() 方法提供了并行执行异步操作的能力，在 all 中所有异步操作结束后才执行回调
function p1() {
  var promise1 = new Promise(function (resolve, reject) {
    console.log("p1的第一条输出语句");
    resolve("p1完成");
  });
  return promise1;
}

function p2() {
  var promise2 = new Promise(function (resolve, reject) {
    console.log("p2的第一条输出语句");
    setTimeout(() => {
      console.log("p2的第二条输出语句");
      resolve("p2完成");
    }, 2000);
  });
  return promise2;
}

function p3() {
  var promise3 = new Promise(function (resolve, reject) {
    console.log("p3的第一条输出语句");
    resolve("p3完成");
  });
  return promise3;
}

Promise.all([p1(), p2(), p3()]).then(function (data) {
  console.log(data);
});
  • Promise.all()获得的成功结果的数组里面的数据顺序和接收到的数组顺序是一致的，即p1的结果在前，即便p1的结果获取的比p2要晚
// 在前端开发请求数据的过程中，会遇到发送多个请求并根据请求顺序获取和使用数据的场景
let wake = (time) => {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      resolve(`${time / 1000}秒后醒来`)
    }, time)
  })
}
 
let p1 = wake(3000)
let p2 = wake(2000)
 
Promise.all([p1, p2]).then((result) => {
  console.log(result)       // [ '3秒后醒来', '2秒后醒来' ]
}).catch((error) => {
  console.log(error)
})
Promise.race()
  • Promise.race([p1, p2, p3])里面的结果哪个获取的快，就返回哪个结果，不管结果本身是成功还是失败
let p1 =new Promise(function(resolve,reject){
   resolve(1);
});
let p2 = new Promise(function(resolve,reject){
   resolve(2);
});
let p3 = new Promise(function(resolve,reject){
   resolve(3);
});

Promise.race([p1, p2, p3]).then(function (results) {
   console.log('success:'+results);
}).catch(function(r){
   console.log("error");
   console.log(r);
});
  • 使用场景：几个服务器的好几个接口都提供同样的服务，不知道哪个接口更快，可以使用Promise.race
let p1 = new Promise(function(resolve,reject){
  setTimeout(() => {
    resolve(1);
  }, 1000);
});
let p2 = new Promise(function(resolve,reject){
   reject(2);
});
let p3 = new Promise(function(resolve,reject){
   resolve(3);
});

Promise.race([p1, p2, p3]).then(function (results) {
   console.log('success:'+results);
}).catch(function(r){
   console.log("error");
   console.log(r);
});
Promise.any()
  • 只要p1，p2状态有一个变为fulfilled，该实例的状态为fulfilled
const pErr = new Promise((resolve, reject) => {
  reject("总是失败");
});
 
const pSlow = new Promise((resolve, reject) => {
  setTimeout(resolve, 500, "最终完成");
});
 
const pFast = new Promise((resolve, reject) => {
  setTimeout(resolve, 100, "很快完成");
});
 
Promise.any([pErr, pSlow, pFast]).then((value) => {
  console.log(value);
},(err) => {
  console.log(err);
}).catch((aggregateError) => {
   console.log("error");
   console.log(aggregateError);
});
// expected output: "很快完成"
  • 如果所有的 Promises 都失败，该实例的状态将失败（rejected），结果值是包含所有失败状态的 AggregateError 的实例的结果集
const pErr = new Promise((resolve, reject) => {
  reject("总是失败");
});
 
const pSlow = new Promise((resolve, reject) => {
  setTimeout(reject, 500, "最终失败");
});
 
const pFast = new Promise((resolve, reject) => {
  setTimeout(reject, 100, "很快失败");
});
 
Promise.any([pErr, pSlow, pFast]).then((value) => {
  console.log(value);
}).catch((aggregateError) => {
   console.log(aggregateError.errors);
});

链式回调

https://segmentfault.com/a/1190000010420744

then回调：then方法提供一个供自定义的回调函数

  1. 若传入非函数，则会忽略当前then方法
  2. 回调函数中会把上一个then中返回的值当做参数值供当前then方法调用
  3. then方法执行完毕后需要返回一个新的值给下一个then调用（没有返回值默认使用undefined）
  4. 每个then只可能使用前一个then的返回值
  • val接收到的是上一个then或者Promise的结果
  • res是被返回并传递给下一个then作为它的参数
let p = new Promise((resolved, rejected) => {
  resolved(1)
})

let p1 = p.then(
  (val) => {
    console.log(val)
    let res = "child";
    return res;
  }
)

p1.then(
  (val) => {
    console.log(val)
  }
)

// 1
// child

具体使用1：then是否是函数

let func = function() {
  return new Promise((resolve, reject) => {
    resolve('返回值');
  });
};

let cb = function() {
  return '新的值';
}

// 有返回值
func().then(function () {
  return cb();
}).then(resp => {
  console.warn(resp);
  console.warn('1 =========<');
});

// 无返回值
func().then(function () {
  cb();
}).then(resp => {
  console.warn(resp);
  console.warn('2 =========<');
});

// cb()执行后返回的并不是一个函数
// 在Promise规范中会自动忽略调当前then
// 会把func中的返回值供下一个then使用
func().then(cb()).then(resp => {
  console.warn(resp);
  console.warn('3 =========<');
});

// 第一个方法在回调内部返回cb执行后的值
// 第四个方法则直接把cb当做回调
func().then(cb).then(resp => {
  console.warn(resp);
  console.warn('4 =========<');
});

具体使用2：reject和catch

  • reject后的东西，一定会进入then中的第二个回调，如果then中没有写第二个回调，则进入catch
  • resolve的东西，一定会进入then的第一个回调，肯定不会进入catch
  • 仅仅返回一个Error对象并不会使Promise变为rejected状态
  • 为了真正拒绝一个Promise，需要throw一个错误或调用reject()函数
new Promise((resolve, reject) => {
  resolve('请求成功了');
})
.then((value) => {
  console.log(value);
  return new Error('错误');
})
.catch(() => {
  console.log('错误'); //未打印，发生穿透
})
.then((value) => {
  console.log(111);
})
.then((value) => {
  console.log(222);
})
  • 除非catch()再次抛出错误，否则链中之后的任何then()块都将按正常顺序执行，因为catch()会把Promise的状态从rejected转变为fulfilled
new Promise((resolve, reject) => {
  resolve('请求成功了');
})
.then((value) => {
  console.log(value);
  throw new Error('错误');
})
.catch(() => {
  console.log('错误');
})
.then((value) => {
  console.log(111);
})
.then((value) => {
  console.log(222);
})
anjushi_
关注
  • 0
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
ES6：Promise使用方法解析大全
景天科技苑
03-12 1244
Promise 是异步编程的一种解决方案，比传统的解决方案——回调函数和事件——更合理和更强大。 它由社区最早提出和实现，ES6 将其写进了语言标准，统一了用法，原生提供了Promise对象。 Promise 是一个 ECMAScript 6 提供的类，目的是更加优雅地书写复杂的异步任务。 Promise是一个构造函数，通过new来实例化，主要解决异步编程。
ES6 Promise用法小结
热门推荐
涂涂
07-25 39万+
目录 1.什么是Promise reject的用法 catch的用法 all的用法 race的用法 1.什么是Promise Promise 是异步编程的一种解决方案，其实是一个构造函数，自己身上有all、reject、resolve这几个方法，原型上有then、catch等方法。 Promise对象有以下两个特点。 （1）对象的状态不受外界影响。Promise对象代表一个异步操...
ES6：promise基本使用讲解
qq_45820271的博客
04-06 1265
本文介绍了promise以及promise的方法和简单的使用方式
ES6之Promise详解
xllllll___的博客
05-24 893
1.语法：在语法上async/await提供了更简洁 ，更直观的一个语法，使异步代码更易读和维护。2.错误处理：在async/await中，可以直接使用try...catch来捕获异常,而在Promise中，则需要使用catch。3.代码流程：async/await可以使得异步代码看起来更像一个同步代码，易于阅读和理解。
ES6 之Promise的使用
m0_48982503的博客
12-03 575
(一) Promise promise是承诺，允诺的意思。(是将来发生的事) (1) Promise是什么？ 从用途上来说： (1) promise主要用于异步计算。 (2) 可以将异步操作队列化，按照期望的顺序执行，返回符合预期的结果。 (3) 可以在对象之间传递和操作promise，帮助我们处理队列。 从语法上说： Promise 是一个对象，从它可以获取异步操作的消息。 Promise 提供统一的 API，各种异步操作都可以用同样的方法进行处理 executor是执行器，执行者的意
【ES6】Promise 使用
zhenshu_guo的博客
01-25 1307
promise 基本使用与练习
详解ES6的Promise
rr20060119的博客
03-12 1067
异步操作处理：Promise用于处理需要等待时间较长的操作，如网络请求、文件读取等。通过Promise可以更清晰地表达异步操作的执行顺序和结果处理。状态：Promise有三种状态：pending（进行中）、fulfilled（已完成）和rejected（已失败）。初始状态为pending，当操作成功完成时，状态变为fulfilled，如果发生错误，状态则变为rejected。then()方法：Promise对象的then()方法用于指定操作成功或失败时的回调函数。
前端学习：ES6中promise
qq_43164745的博客
05-23 359
1.promise的基本使用 概述： Promise 是 ES6 引入的异步编程的新解决方案。语法上 Promise 是一个构造函数，用来封装异步操作并可以获取其成功或失败的结果； 1. Promise 构造函数: Promise (excutor) {}； 2. Promise.prototype.then 方法； 3. Promise.prototype.catch 方法； 基本语法： // 实例化 Promise对象 const p = new Promise...
es6的promise的ajax,es6中promise实现ajax的例子
weixin_35125164的博客
08-05 592
function getData(url){var pro = new Promise(function(resolve,reject){var xhr = null;try{xhr = new XMLHttpRequest()}catch(e){xhr = new ActiveXObject("Microsoft.XMLHTTP");}xhr.open("get",url);xhr.onread...
介绍ES6中的Promise及其使用场景
qwerrerfjj的博客
11-19 496
每日一题
ES6中Promise的使用方法实例总结
10-15
ES6（ECMAScript 2015）中引入了Promise，这是一种处理异步编程的现代解决方案。Promise代表了一个异步操作的最终完成（或失败）及其结果值。 ### Promise基本概念 Promise有三种状态：pending（进行中）、...
es6-promise
04-02
es6-promise.auto.js ,可用于微信小程序开发，小程序里需要
es6-promise.auto.js
10-31
<!-- Automatically provides/replaces `Promise` if missing or broken. --> [removed][removed] ...-- Minified version of `es6-promise-auto` below. --> [removed][removed] [removed][removed]
ES6之Promise的使用
01-20
所谓Promise简单来说就是一个容器,内部保存着一个未来才会结束的一个事件.从语法 上说，Promise 是一个对象，从它可以获取异步操作的消息。Promise 提供统一的 API，各种异步操作都可以用同样 的方法进行处理。 我们...
前端开发工程师面试整理-ES6+的新特性
不务正业的猿
08-17 356
这些ES6+的新特性使JavaScript变得更强大、更简洁，提高了开发效率和代码可读性。ES6（ECMAScript 2015）及后续版本引入了许多新特性，极大地增强了JavaScript的功能和开发体验。使用function*定义生成器函数，可以通过yield暂停和恢复执行。基于Promise的异步编程语法，使异步代码更加简洁和易读。使用简洁的语法定义函数，并且不绑定自己的this。使用import和export语法导入和导出模块。Map用于存储键值对，Set用于存储唯一值的集合。用于异步操作的对象。
nodejs安装
a1241436267的博客
08-19 424
版本控制nodejs版本:v17.3.1npm版本:8.3.0安装流程。
vue开发引入第三方插件的方式及其区别
最新发布
你们瞎搞
08-22 334
npm。
【js】各类前端输入校验方法
galaxyJING的博客
08-21 347
【代码】【js】各类前端输入校验方法。
Nuxt3【内置的工具函数】2024最新版
朝阳39的博客
08-20 997
用于在Vue应用程序或API路由中进行HTTP请求，详见。
ES6中promise的缺点
04-17
ES6中Promise的缺点主要有以下几点： 1. Promise不支持取消操作，一旦Promise开始执行，就无法停止。 2. Promise链过长时，可能会导致代码难以维护，也可能会影响性能。 3. Promise无法处理一些异步操作，例如定时器等。 4. Promise的错误处理机制不够完善，一旦Promise rejected，就需要通过catch或者then的第二个参数来处理错误。 5. 使用Promise时需要注意的一些问题，例如回调地狱、错误处理等，可能会导致新手难以理解和应用。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

anjushi_

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值