【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 中处理异步操作的一种强大机制,它可以让异步操作更加容易管理和控制。通过封装异步操作,可以避免回调地狱,使代码更加清晰和易于维护。

相关推荐
胡西风_foxww35 分钟前
【es6复习笔记】rest参数(7)
前端·笔记·es6·参数·rest
噢,我明白了2 小时前
同源策略:为什么XMLHttpRequest不能跨域请求资源?
javascript·跨域
sanguine__2 小时前
APIs-day2
javascript·css·css3
关你西红柿子2 小时前
小程序app封装公用顶部筛选区uv-drop-down
前端·javascript·vue.js·小程序·uv
济南小草根3 小时前
把一个Vue项目的页面打包后再另一个项目中使用
前端·javascript·vue.js
小木_.3 小时前
【python 逆向分析某有道翻译】分析有道翻译公开的密文内容,webpack类型,全程扣代码,最后实现接口调用翻译,仅供学习参考
javascript·python·学习·webpack·分享·逆向分析
Aphasia3113 小时前
一次搞懂 JS 对象转换,从此告别类型错误!
javascript·面试
m0_748256564 小时前
Vue - axios的使用
前端·javascript·vue.js
m0_748256344 小时前
QWebChannel实现与JS的交互
java·javascript·交互
胡西风_foxww4 小时前
【es6复习笔记】函数参数的默认值(6)
javascript·笔记·es6·参数·函数·默认值