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

ES学习Promise对象（九）

article 2024/12/23 13:27:12

这里写目录标题

一、概念
二、示例
- 基本使用
- 使用 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:201
                    data: {
                        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);
        })