Promise封装Ajax请求

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.mzph.cn/news/125805.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

【PID专题】控制算法PID之比例控制(P)的原理和示例代码

PID是“比例-积分-微分”的缩写&#xff0c;是一种广泛用于控制系统的反馈控制算法。PID控制器根据测量值与期望值之间的误差来调整控制器的输出&#xff0c;以使系统稳定并尽可能接近期望值。下面是PID中P&#xff08;比例控制&#xff09;的基本介绍&#xff1a; 比例&#x…

springweb flux拦截请求获取参数和方法做接口签名防重放校验

在给spring webflux做接口签名、防重放的时候&#xff0c;往往需要获取请求参数&#xff0c;请求方法等&#xff0c;而spring webflux无法像spring mvc那样好获取&#xff0c;这里根据之前的实践特地说明一下&#xff1a; 总体思路&#xff1a; 1、利用过滤器&#xff0c;从原…

关于CSS的几种字体悬浮的设置方法

关于CSS的几种字体悬浮的设置方法 1. 鼠标放上动态的2. 静态的&#xff08;位置看上悬浮&#xff09;2.1 参考QQ邮箱2.2 参考知乎 1. 鼠标放上动态的 效果如下&#xff1a; 代码如下&#xff1a; <!DOCTYPE html> <html lang"en"> <head><met…

<多线程章节八> 单例模式中的饿汉模式与懒汉模式的讲解,以及懒汉模式中容易引起的Bug

&#x1f490;专栏导读 本篇文章收录于多线程&#xff0c;也欢迎翻阅博主的其他文章&#xff0c;可能也会让你有不一样的收获&#x1f604; &#x1f337;JavaSE &#x1f342;多线程 &#x1f33e;数据结构 文章目录 &#x1f490;专栏导读&#x1f4a1;饿汉模式&#x1f4a1;…

从 Seq2Seq 到 Attention:彻底改变序列建模

探究Attention机制和意力的起源。 简介 在这篇博文[1]中&#xff0c;将讨论注意力机制的起源&#xff0c;然后介绍第一篇将注意力用于神经机器翻译的论文。由于上下文压缩、短期记忆限制和偏差&#xff0c;具有 2 个 RNN 的 Seq2Seq 模型失败了。该模型的 BLEU 分数随着序列长度…

构造函数、析构函数、虚函数、成员函数的详细解释

详细解释 构造函数析构函数虚函数成员函数 构造函数 构造函数&#xff08;Constructor&#xff09; 是一个特殊的成员函数&#xff0c;当一个对象被创建时&#xff0c;它会自动被调用。构造函数通常用于初始化对象的成员变量。 (就是先设定了一些规矩&#xff0c;到用的时候直…

【VPX630】青翼 基于KU115 FPGA+C6678 DSP的6U VPX通用超宽带实时信号处理平台

板卡概述 VPX630是一款基于6U VPX总线架构的高速信号处理平台&#xff0c;该平台采用一片Xilinx的Kintex UltraScale系列FPGA&#xff08;XCKU115&#xff09;作为主处理器&#xff0c;完成复杂的数据采集、回放以及实时信号处理算法。采用一片带有ARM内核的高性能嵌入式处理器…

【深度学习】pytorch——快速入门

笔记为自我总结整理的学习笔记&#xff0c;若有错误欢迎指出哟~ pytorch快速入门 简介张量&#xff08;Tensor&#xff09;操作创建张量向量拷贝张量维度张量加法函数名后面带下划线 _ 的函数索引和切片Tensor和Numpy的数组之间的转换张量&#xff08;tensor&#xff09;与标量…

力扣1502. 判断能否形成等差数列(Java,排序法)

Problem: 1502. 判断能否形成等差数列 文章目录 思路解题方法复杂度Code 思路 根据简单的数学知识易得等差数列公差相等。 解题方法 1.对数列排序 2.遍历数列&#xff0c;判断相邻两数的差是否相等。 复杂度 时间复杂度: O ( n ) O(n) O(n) 空间复杂度: O ( 1 ) O(1) O(1) Cod…

设计交换机原理图前应先理清的框图

一、系统布局图 需重点考虑“外壳、电源、风扇、主板&#xff08;包含MAC、CPU、PHY&#xff09;、指示灯、管理网口/串口、电口/光口等连接器”在整机中的大致位置&#xff0c;在系统布局图中予以体现。 二、系统框图 &#xff08;1&#xff09;电源整体框图&#xff1b; &…

centos做个登录提醒

1.编辑脚本 sudo vim /usr/local/bin/login-notify.sh例如 login-notify.sh #!/bin/bash# 检查是否有一个原始SSH命令&#xff0c;并执行它 if [[ -n "$SSH_ORIGINAL_COMMAND" ]]; thenecho "SSH_ORIGINAL_COMMAND: $SSH_ORIGINAL_COMMAND" >> /va…

三十九、CANdelaStudio实践-19服务(ReadDTCInformation)

本专栏将由浅入深的展开诊断实际开发与测试的数据库编辑,包含大量实际开发过程中的步骤、使用技巧与少量对Autosar标准的解读。希望能对大家有所帮助,与大家共同成长,早日成为一名车载诊断、通信全栈工程师。 本文介绍CANdelaStudio的19服务(ReadDTCInformation)编辑,欢迎…

基于STM32C8T6的智能蓝牙小车控制设计

**单片机设计介绍&#xff0c;1655基于STM32C8T6的智能蓝牙小车控制设计 文章目录 一 概要二、功能设计设计思路 三、 软件设计五、 程序文档 六、 结论七、 文章目录 一 概要 基于STM32C8T6的智能蓝牙小车控制设计是基于STM32微控制器和蓝牙模块开发的一种小型智能车辆控制系统…

C#WPF工具提示(ToolTip)实例

本文演示C#WPF工具提示(ToolTip)实例 ToolTip ToolTip是当鼠标移到某个控件上后可以弹出提示的控件 属性说明 1、HasDropShadow 决定工具提示是否具有扩散的黑色阴影,使其和背后的窗口区别开来 2、Placement 使用PlacementMode枚举值决定如何放置工具提示。默认值是M…

力扣刷题-队列-滑动窗口最大值

239. 滑动窗口最大值 给定一个数组 nums&#xff0c;有一个大小为 k 的滑动窗口从数组的最左侧移动到数组的最右侧。你只可以看到在滑动窗口内的 k 个数字。滑动窗口每次只向右移动一位。 返回滑动窗口中的最大值。 进阶&#xff1a; 在线性时间复杂度内解决此题&#xff1f; …

算法leetcode|86. 分隔链表(rust重拳出击)

文章目录 86. 分隔链表&#xff1a;样例 1&#xff1a;样例 2&#xff1a;提示&#xff1a; 分析&#xff1a;题解&#xff1a;rust&#xff1a;go&#xff1a;c&#xff1a;python&#xff1a;java&#xff1a; 86. 分隔链表&#xff1a; 给你一个链表的头节点 head 和一个特…

ubuntu 22.04 源码安装 apollo 8.0

对于其他的关于GPU的安装包需求&#xff0c;这里不再列出&#xff0c;因为我之前安装过&#xff0c;偷个懒就不写了&#xff0c;哈哈哈哈1, 安装docker 安装docker命令(这里的安装命令都是在docker官网,还有安装包)&#xff1a; 1&#xff0c; 设置docker的apt仓库 # Add Do…

IDEA 如何运行 SpringBoot 项目

步骤一&#xff1a;配置 Maven 第一步&#xff1a;用 IDEA 打开项目&#xff0c;准备配置 maven 环境 &#xff0c;当然如果本地没有提前配置好 maven&#xff0c;就用 IDEA 默认的配置即可 配置 maven 步骤 情况 1&#xff1a;如果本地没有配置过 maven&#xff0c;可以保持如…

【学习笔记】CF930E Coins Exhibition

感觉像是之前做过的题的加强版&#x1f605; 考虑容斥哪些区间不合法。直接处理比较困难&#xff0c;考虑将所有区间按右端点排序&#xff0c;并将端点离散化&#xff08;将右端点 1 1 1&#xff0c;转化为左闭右开区间&#xff09;&#xff0c;设 d p i , j , k dp_{i,j,k} …

2.1 ppq量化pytorch->onnx

前言 torchvision中加载一个模型&#xff0c;转换为 onnx 格式、导出 quantized graph. code from typing import Iterableimport torch import torchvision from torch.utils.data import DataLoaderfrom ppq import BaseGraph, QuantizationSettingFactory, TargetPlatfor…