Promise封装Ajax请求

news/2025/2/12 15:01:39/

Promise 封装 Ajax 请求的示例代码如下:

function ajax(url, method, data) {return new Promise((resolve, reject) => {const xhr = new XMLHttpRequest();xhr.open(method, url);xhr.setRequestHeader('Content-Type', 'application/json');xhr.onreadystatechange = function () {if (this.readyState === 4) {if (this.status >= 200 && this.status < 300) {resolve(JSON.parse(this.responseText));} else {reject({status: this.status,statusText: xhr.statusText});}}};xhr.onerror = function () {reject({status: this.status,statusText: xhr.statusText});};xhr.send(JSON.stringify(data));});
}

调用方法:

ajax('/api/test', 'POST', {foo: 'bar'}).then(data => console.log(data)).catch(error => console.error(error));

以上代码的含义是:发送一个 POST 请求到 URL /api/test,数据为 {foo: 'bar'},返回一个 Promise 对象,使用 then 方法处理成功的回调函数,使用 catch 方法处理失败的回调函数。

Promise是JavaScript中一种非常常用的异步编程解决方案。它可以非常方便地处理异步操作,避免了回调函数的嵌套过多而导致代码难以维护的问题。

Promise的主要作用是将异步操作封装成一个对象,通过then方法向外界提供成功和失败的回调函数,使得异步操作的结果可以通过回调函数进行处理。简单来说,Promise的作用就是让异步操作变得像同步操作一样,更加易于理解和编写。

下面是一个简单的Promise封装示例:

function getData(url) {return new Promise(function(resolve, reject) {var 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.onerror = function() {reject(new Error('Network Error'));};xhr.send();});
}// 使用方式
getData('https://example.com/api/data').then(function(data) {console.log(data);}).catch(function(error) {console.log(error);});

在这个例子中,我们封装了一个名为getData的函数,该函数接收一个URL参数,返回一个Promise对象。我们使用XMLHttpRequest对象发送一个GET请求,当请求完成时,根据请求的状态码来决定resolve还是reject Promise。如果请求成功,我们将返回响应文本;如果请求失败,则返回一个Error对象。

使用时,我们可以通过then方法来注册成功的回调函数,catch方法来注册失败的回调函数。这样,无论getData函数返回的Promise对象是成功还是失败,我们都可以方便地处理它的结果。


http://www.ppmy.cn/news/1186185.html

相关文章

【马蹄集】—— 搜索专题

搜索专题 目录 MT2238 数的增殖MT2239 二维矩阵中的最长下降序列MT2240 传染病MT2241 循环空间BD202303 第五维度 MT2238 数的增殖 难度&#xff1a;黄金    时间限制&#xff1a;1秒    占用内存&#xff1a;128M 题目描述 给定一个数 n ( n < 1000 ) n (n<1000) n…

C# 使用.NET的SocketAsyncEventArgs实现高效能多并发TCPSocket通信

BufferManager类, 管理传输流的大小SocketEventPool类: 管理SocketAsyncEventArgs的一个应用池. 有效地重复使用. AsyncUserToken类: 这个可以根据自己的实际情况来定义.主要作用就是存储客户端的信息.SocketManager类: 核心,实现Socket监听,收发信息等操作. 额外功能 1.自动…

项目解读_v2

1. 项目介绍 如果使用task2-1作为示例时&#xff0c; 运行process.py的过程中需要确认 process调用的是函数 preprocess_ast_wav2vec(wav, fr) 1.1 任务简介 首个开源的儿科呼吸音数据集&#xff0c; 通过邀请11位医师标注&#xff1b; 数字听诊器的采样频率和量化分辨率分…

Vue 菜单导航栏,轮播图

导航菜单栏结构和样式代码实现 一级导航栏 views/HomeView.vue <template><div><Shortcut></Shortcut><Header></Header><div class"inner"><Navigation></Navigation></div><div>我是主页&l…

mycat2.X读写分离

一、数据库中间件介绍 二、下载安装包 2.1下载地址: 下载两个一个是mycat程序,一个是mycat的驱动 http://dl.mycat.org.cn/2.0/install-template/mycat2-install-template-1.20.zip http://dl.mycat.org.cn/2.0/1.21-release/mycat2-1.21-release-jar-with-dependencies-2…

请教设计师全屋定制有哪些门道

⬛装修很难绕开全屋定制&#xff0c;设计师来告诉你有哪些前期就要留意的事项&#x1f320;⬛全屋定制板材&#x1f4da;常用的板材&#xff1a;颗粒板、密度板、生态板、多层板、欧松板、实木指接板’对于家装来说&#xff0c;建议大家选大品牌和环保达标的。常用板材的厚度&a…

微信定时发圈,快人一步不落索

现在的社交媒体运营已经成为了私域流量获取的重要手段&#xff0c;而微信作为最大的社交平台之一&#xff0c;更是吸引了众多使用者。但是&#xff0c;你是否曾经感叹过每天手动发朋友圈的繁琐&#xff1f;是否希望能够事先设置好定时发送的功能&#xff0c;让你的朋友圈自动更…

SAP SPAD新建打印纸张

SAP SPAD新建打印纸张 1.事务代码SPAD 2.完全管理&#xff0d;设备类型&#xff0d;页格式-显示(创建格式页) 3.按标准A4纸张为模板参考创建。同一个纸张纵向/横向各创建1次(创建格式页) 4.完全管理&#xff0d;设备类型&#xff0d;格式类型-显示(创建格式类型&#xff0…