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

ES学习Promise对象（九）

news 2025/7/8 5:18:53

这里写目录标题

一、概念
二、示例
- 基本使用
- 使用 Promise 对象封装Ajax
- then() 方法
- catch() 方法

一、概念

简单说就是一个容器，里面保存着某个未来才会结束的事件（通常是一个异步操作）的结果。
Promise 是一个对象，Promise 提供统一的 API，各种异步操作都可以用同样的方法进行处理。axios 的内部实现原理就是通过 Promise 实现的。
Promise对象有以下两个特点：
- 对象的状态不受外界影响。有三种状态：pending（进行中）、fulfilled（成功）和rejected（失败）。只有异步操作的结果，可以决定当前是哪一种状态，任何其他操作都无法改变这个状态。
- 一旦状态改变，就不会再变，任何时候都可以得到这个结果。Promise对象的状态改变，只有两种可能：从pending变为resolved和从pending变为rejected。只要这两种情况发生，状态就凝固了，不会再变了，会一直保持这个结果。
Promise对象是一个构造函数，用来生成Promise实例，带有一个回调函数，回调函数的两个参数是 resolve（成功）和 reject（失败）,这两个参数他们也是函数。

二、示例

基本使用

        function timeOut(ms) {// Promise对象是一个构造函数，用来生成Promise实例// 闭包函数：一个函数里面返回一个函数return new Promise((resolve, reject) => {// ... 模拟执行异步操作,后端返回的数据let res = {code: 200,//code:201data: {name: 'ES6学习！'},error: '失败了！'}setTimeout(() => {// 异步执行成功if (res.code === 200) {resolve(res.data);// 异步执行失败} else {reject(res.error);}},ms);});}// then方法的第一个参数是resolved状态的回调函数，// 第二个参数是rejected状态的回调函数，它们都是可选的。timeOut(4000).then((val)=>{console.log(val); //这里的值接收的是 resolved() 的值},(err)=>{console.log(err);//这里的值接收的是 rejected() 的值，输出 失败了});

Promise构造函数接受一个函数作为参数，该函数的两个参数分别是resolve和reject。它们是两个函数，由JavaScript引擎提供，不用自己部署。
resolve函数的作用是，将Promise对象的状态从“未完成”变成“成功”（即从pending变为resolved）,在异步操作成功时调用，并将异步操作的结果作为参数传递。
reject函数的作用是，将Promise对象的状态从“未完成”变为“失败”（即从pending变为rejected）,在异步操作失败时嗲用，并将异步操作报出的错位u传递出去。
Promise 实例生成以后，可以用 then方法分别指定resolved状态和 rejected状态的回调函数。

使用 Promise 对象封装Ajax

        const getJson = function (url) {return new Promise((resolve, reject) => {const xhr = new XMLHttpRequest();xhr.open('GET', url);xhr.resposeType = 'json';xhr.setRequestHeader('Accept', 'application/json');xhr.send();xhr.onreadystatechange = function() {//console.log("READYSTATE"+ xhr.readyState);if (xhr.readyState === 4) {  console.log("READYSTATE"+ xhr.status);             if (xhr.status === 200) { resolve(this.responseText);} else {reject(new Error(xhr.statusText))}}}})}getJson('http://timor.tech/api/holiday/year/2024').then((data) => {console.log(data);}, (error) => {console.log(error);})