promise封装AJAX请求

title: promise封装AJAX请求
date: 2025-01-16 12:00:00
tags:
  
- 前端
categories:
  
- 前端

重点- promise封装AJAX请求

在前面的笔记里面已经大体了解了一下AJAX是个什么东西，现在再回到promise里面

前言

AJAX（Asynchronous JavaScript and XML）是一种在不重新加载整个页面的情况下，通过异步与服务器交换数据并更新网页的技术。

正文

再次来理解-

function ajaxRequest(url) {
    return new Promise((resolve, reject) => {
        const xhr = new XMLHttpRequest();
        xhr.open("GET", url, true);
​
        // 请求成功时
        xhr.onload = function () {
            if (xhr.status >= 200 && xhr.status < 300) {
                resolve(xhr.responseText); // 请求成功，返回数据
            } else {
                reject(new Error("Request failed with status " + xhr.status)); // 请求失败，返回错误
            }
        };
​
        // 请求出错时
        xhr.onerror = function () {
            reject(new Error("Network error"));
        };
​
        xhr.send(); // 发送请求
    });
}
​
// 调用示例
ajaxRequest("https://api.apiservice.com/getJoke")
    .then(function (response) {
        console.log("成功返回数据: ", response);
    })
    .catch(function (error) {
        console.error("请求失败: ", error);
    });

1. ajaxRequest 函数返回一个 Promise。

2. 使用 XMLHttpRequest 对象发送异步请求。

3. 在 onload 回调中，如果请求成功（HTTP状态码在200到299之间），调用 resolve 传递响应数据；如果失败，则调用 reject 返回错误。

4. 在 onerror 回调中，网络出现错误时会调用 reject 进行错误处理。

1. 使用 then 方法处理成功的响应，使用 catch 方法捕获错误。

   这样就明显理解多了

在这里补充一下promise大体上有什么

介绍

Promise 是 JavaScript 中的一种异步编程解决方案，它代表了一个异步操作的最终完成（或失败）及其结果值的表示。简单来说，Promise 用来处理异步操作的结果，它的核心目的是解决回调地狱（callback hell）问题，并让代码更加简洁、易于维护。

关键词：异步操作哈

状态

Promise 的状态

一个 Promise 实例有三种状态：

1. Pending（待定）：初始状态，既不是成功，也不是失败。

2. Fulfilled（已完成）：异步操作成功完成，且返回了结果。

3. Rejected（已拒绝）：异步操作失败，且返回了错误。

这三种状态之间的转换是单向的：

• 从 Pending 状态可以转为 Fulfilled 或 Rejected。

• 一旦状态发生改变（从 Pending 到 Fulfilled 或 Rejected），它就不可再变了。

语法

创建 Promise

要创建一个 Promise 对象，可以使用 new Promise() 构造函数，它接受一个回调函数，这个回调函数有两个参数：resolve 和 reject。

• resolve(value)：表示操作成功，传递成功的结果。

• reject(reason)：表示操作失败，传递失败的原因。

const promise = new Promise((resolve, reject) => {
    // 异步操作（例如网络请求、定时器等）
    let success = true;
    
    if (success) {
        resolve("操作成功");
    } else {
        reject("操作失败");
    }
});

promise.then((value) => {
    console.log(value); // 输出 "操作成功"
});

promise.catch((error) => {
    console.error(error); // 输出 "操作失败"
});

new Promise((resolve, reject) => {
    resolve("第一个成功");
})
    .then((value) => {
        console.log(value); // 输出 "第一个成功"
        return "第二个成功";
    })
    .then((value) => {
        console.log(value); // 输出 "第二个成功"
    })
    .catch((error) => {
        console.error(error); // 错误处理
    });

Promise 支持链式调用，可以在一个 Promise 的 then 方法后接着另一个 then 或 catch。这样可以避免嵌套回调函数（即回调地狱）。

Promise 的常用方法

• then(onFulfilled, onRejected)：Promise 成功或失败后的处理函数。

• onFulfilled(value)：Promise 被 resolve 后执行的回调。

• onRejected(reason)：Promise 被 reject 后执行的回调。

• then() 方法会返回一个新的 Promise，可以继续链式调用。

• catch(onRejected)：处理 Promise 的拒绝（失败）情况，实际上是 .<u>then(undefined, onRejected) 的简写。</u>

• finally(onFinally)：无论 Promise 成功还是失败，都会执行的回调，适合用于清理操作。

^-^呵呵，大体就会这一点///。：）