当前位置：首页 > article >正文

【ES6复习笔记】Promise对象详解（12）

article 2024/12/27 12:39:09

1. 什么是 Promise？

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

2. Promise 的基本语法

Promise 对象有三种状态：

Pending（进行中）：初始状态，既不是成功，也不是失败。
Fulfilled（成功）：操作成功完成。
Rejected（失败）：操作失败。

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

Promise 的基本语法如下：

// 实例化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方法

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（）方法并且调用回调函数

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 封装读取文件的操作：

// 引入 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 链式调用读取多个文件：

// 引入 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

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 实例。

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 实例的结果值，作为返回结果。

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 完成得快
});