【es6复习笔记】Promise对象详解(12)

1. 什么是 Promise?

Promise 是 JavaScript 中处理异步操作的一种机制,它可以让异步操作更加容易管理和控制。Promise 对象代表一个异步操作的最终完成或失败,并提供了一种方式来处理操作的结果。

2. Promise 的基本语法

Promise 对象有三种状态:

  • Pending(进行中):初始状态,既不是成功,也不是失败。
  • Fulfilled(成功):操作成功完成。
  • Rejected(失败):操作失败。

改变Promise状态:Promise对象的状态改变,只有两种可能:从pending变为fulfilled和从pending变为rejected。状态一旦改变,就不会再变,也就是说,Promise对象的状态改变是单向的。

Promise 的基本语法如下:

javascript 复制代码
// 实例化promise对象
const promise = new Promise((resolve, reject) => {
  // 异步操作
  if (/* 异步操作成功 */) {
    resolve(value); // 将Promise对象的状态从"pending"变为"fulfilled",同时将异步操作的结果,作为回调函数的参数
  } else {
    reject(reason); // 将Promise对象的状态从"pending"变为"rejected",同时将异步操作报出的错误,作为回调函数的参数
  }
});

promise.then(value => {
  // 成功时的回调函数,即当Promise的状态变为fulfilled时调用
}, reason => {
  // 失败时的回调函数,即当Promise的状态变为rejected时调用
});


// 例如:
//实例化 Promise 对象
const p = new Promise(function(resolve, reject){
    setTimeout(function(){
        //
        // let data = '数据库中的用户数据';
        // resolve
        // resolve(data);

        let err = '数据读取失败';
        reject(err);
    }, 1000);
});

//调用 promise 对象的 then 方法
p.then(function(value){
    console.log(value);
}, function(reason){
    console.error(reason);
})

3.Promise的then方法

javascript 复制代码
const p =new Promise((resolve, reject) =>{
    setTimeout(()=>{
        resolve('用户数据');
    })
});

//then()函数返回的实际也是一个Promise对象
//1.当回调后,返回的是非Promise类型的属性时,状态为fulfilled,then()函数的返回值为对象的成功值,如reutnr 123,返回的Promise对象值为123,如果没有返回值,是undefined

//2.当回调后,返回的是Promise类型的对象时,then()函数的返回值为这个Promise对象的状态值

//3.当回调后,如果抛出的异常,则then()函数的返回值状态也是rejected
let result = p.then(value => {
    console.log(value)
    // return 123;
    // return new Promise((resolve, reject) => {
    //     resolve('ok')
    // })
    throw 123
},reason => {
    console.log(reason)
})
console.log(result);

4. Promise的catch方法

catch()函数只有一个回调函数,意味着如果Promise对象状态为失败就会调用catch()方法并且调用回调函数

javascript 复制代码
const p = new Promise((resolve, reject)=>{
   setTimeout(()=>{
       //设置 p 对象的状态为失败, 并设置失败的值
       reject("出错啦!");
   }, 1000)
});

// p.then(function(value){}, function(reason){
//     console.error(reason);
// });

p.catch(function(reason){
   console.warn(reason);
});

5. Promise 的实践

5.1 读取单个文件

使用 Promise 封装读取文件的操作:

javascript 复制代码
// 引入 fs 模块
const fs = require('fs');

// 使用 Promise 封装
const p = new Promise(function(resolve, reject){
  fs.readFile("./resources/为学.md", (err, data)=>{
    // 判断如果失败
    if(err) reject(err);
    // 如果成功
    resolve(data);
  });
});

p.then(function(value){
  console.log(value.toString());
}, function(reason){
  console.log("读取失败!!");
});

5.2 读取多个文件

使用 Promise 链式调用读取多个文件:

javascript 复制代码
// 引入 fs 模块
const fs = require("fs");

// 使用 promise 实现
const p = new Promise((resolve, reject) => {
  fs.readFile("./resources/为学.md", (err, data) => {
    resolve(data);
  });
});

p.then(value => {
  return new Promise((resolve, reject) => {
    fs.readFile("./resources/插秧诗.md", (err, data) => {
      resolve([value, data]);
    });
  });
}).then(value => {
  return new Promise((resolve, reject) => {
    fs.readFile("./resources/观书有感.md", (err, data) => {
      // 压入
      value.push(data);
      resolve(value);
    });
  })
}).then(value => {
  console.log(value.join('\r\n'));
});

6.promise封装Ajax

js 复制代码
function ajax(url) {
  return new Promise((resolve, reject) => {
    const xhr = new XMLHttpRequest();
    xhr.open('GET', url);
    xhr.onreadystatechange = function() {
      if (xhr.readyState === 4) {
        if (xhr.status >= 200 && xhr.status < 300) {
          resolve(xhr.responseText);
        } else {
          reject(new Error(xhr.statusText));
        }
      }
    };
    xhr.send();
  });
}

// 使用封装好的函数发送 AJAX 请求
ajax('https://api.example.com/data')
 .then(data => {
    console.log(data);
  })
 .catch(error => {
    console.error(error);
  });

7. Promise.all()

Promise.all 方法用于将多个 Promise 实例,包装成一个新的 Promise 实例。

javascript 复制代码
let promise1 = Promise.resolve(3);
let promise2 = 42;
let promise3 = new Promise((resolve, reject) => {
  setTimeout(resolve, 100, 'foo');
});

Promise.all([promise1, promise2, promise3]).then((values) => {
  console.log(values);
});
// 输出: [3, 42, "foo"]

8. Promise.race

Promise.race 方法用于将多个 Promise 实例,包装成一个新的 Promise 实例,并以数组中,第一个完成的 Promise 实例的结果值,作为返回结果。

javascript 复制代码
let promise1 = new Promise((resolve, reject) => {
  setTimeout(resolve, 500, 'one');
});

let promise2 = new Promise((resolve, reject) => {
  setTimeout(resolve, 100, 'two');
});

Promise.race([promise1, promise2]).then((value) => {
  console.log(value);
  // "two" ------ 因为它比 promise1 完成得快
});

9. 总结

Promise 是 JavaScript 中处理异步操作的一种强大机制,它可以让异步操作更加容易管理和控制。通过封装异步操作,可以避免回调地狱,使代码更加清晰和易于维护。

相关推荐
知识分享小能手1 小时前
React学习教程,从入门到精通, React 属性(Props)语法知识点与案例详解(14)
前端·javascript·vue.js·学习·react.js·vue·react
luckys.one1 小时前
第9篇:Freqtrade量化交易之config.json 基础入门与初始化
javascript·数据库·python·mysql·算法·json·区块链
mCell2 小时前
JavaScript 的多线程能力:Worker
前端·javascript·浏览器
weixin_437830943 小时前
使用冰狐智能辅助实现图形列表自动点击:OCR与HID技术详解
开发语言·javascript·ocr
汇能感知3 小时前
摄像头模块在运动相机中的特殊应用
经验分享·笔记·科技
阿巴Jun4 小时前
【数学】线性代数知识点总结
笔记·线性代数·矩阵
茯苓gao4 小时前
STM32G4 速度环开环,电流环闭环 IF模式建模
笔记·stm32·单片机·嵌入式硬件·学习
是誰萆微了承諾4 小时前
【golang学习笔记 gin 】1.2 redis 的使用
笔记·学习·golang
gnip4 小时前
JavaScript事件流
前端·javascript
小菜全5 小时前
基于若依框架Vue+TS导出PDF文件的方法
javascript·vue.js·前端框架·json