Promise封装ajax

Promise封装原生ajax

1.node的内置模块url, http

2.Promise封装原生ajax

01-node的内置模块

# url: 操作网址
let url = require('url')
url.parse('网址', [布尔值: 决定是否将查询字符串转换为对象格式]): 将网址解析成对象# http: 创建本地服务器
let http = require('http')let server = http.createServer(function (req, res) {// req: 前端提交的数据// res: 后端响应的内容console.log('服务器被访问了一次');
})
server.listen('8888', console.log('服务器启动成功'))

02-Promise封装ajax【面试题】

/* 参数:1. 请求地址,url: 必填2. 请求方式,method: 选填 默认get请求3. 提交的参数,data: 选填 默认值 ''4. post的请求头, headers:选填, 默认值 {content-type, 'application/x-www-form-urlencoded'}返回值:=> 必须=> 返回的内容可以是回调函数, 可能会造成回调地狱=> 建议选择的是返回Promise,可以支持async/await函数封装的方法:相同部分放到函数体内,不同部分传参搞定函数封装的原则:尽可能的让程序的兼容性更强=> 参数是否齐全=> 参数的格式是否正确*/// 将对象转换为查询字符串
function queryStringify(data) {let str = ''for (let key in data) {str += `${key}=${data[key]}&`}return str.slice(0, -1)
}function createAjax(url) {var BaseURL = urlfunction ajax(options = {}) {// 这里options参数选择了对象:对象可以不用考虑参数的顺序// throw new Error(): 创建一个错误信息对象,并抛出(显示在控制台)// 1.1 请求地址是必填项if (!options.url) throw new Error('请求地址是必填项')// 1.2 请求方式 这个地方可以是undefined, 也可以是'GET'或'POST'if (!(options.method === undefined || /^(GET|POST)$/i.test(options.method))) {throw new Error('目前仅支持GET或POST,敬请期待更多方式')}// 1.3 提交的参数 这个地方也可以undefined,也可以是字符串,也可以是对象if (!(options.data === undefined || typeof options.data === 'string' || options.data.constructor === Object)) {throw new Error('支持的数据类型可以是字符串或者对象')}// 1.4 post请求头,可以是undefined, 也可以是表单格式提交if (/^POST$/i.test(options.method)) {if (!(options.headers === undefined || options.headers['content-type'] === 'application/x-www-form-urlencoded' || options.headers['content-type'] === 'application/json')) {throw new Error('post请求,必须设置请求头')}}// 如果options里面的参数不包含请求方式和提交参数,就要提供默认值let _default = {url: BaseURL + options.url,method: options.method || 'GET',data: options.data || '',headers: options.headers || { 'content-type': 'application/x-www-form-urlencoded' }}// 提交的参数的格式可以是对象形式,就需要将对象先转换成查询字符串,再做拼接if (_default.data.constructor === Object) _default.data = queryStringify(_default.data)// 注意:如果请求方式是get,并且需要携带参数,就需要把参数拼接在url地址的后面if (/^GET$/i.test(_default.method) && _default.data) _default.url += '?' + _default.data// 注意:发送了请求之后,希望可以接收到响应的数据,这里就使用了Promise, 再将结果resolve出去即可let p = new Promise((resolve, reject) => {// 2. 发起ajax请求// 2.1 创建一个实例对象,负责发起请求和接收响应的数据let xhr = new XMLHttpRequest()// 2.2 配置请求方式和请求地址xhr.open(_default.method, _default.url)// 2.3 设置请求头信息// xhr.setRequestHeader('content-type', 'application/x-www-form-urlencoded')if (/^POST$/i.test(_default.method)) xhr.setRequestHeader('content-type', _default.headers['content-type'])// // 2.4 发送请求xhr.send(/^POST$/i.test(_default.method) && _default.data)// 2.4 监听请求状态xhr.onreadystatechange = function () {// 如果请求的状态码等于4 并且 http请求码等于200if (xhr.readyState === 4 && xhr.status === 200) {let res = JSON.parse(xhr.responseText)// console.log(res);resolve(res)}}})return p}return ajax
}# 方法调用async function fun() {let ajax = createAjax('http://115.159.153.85:8001')let r1 = await ajax({url: '/getTest',// method: 'POST',// headers: { 'content-type': 'application/json' },data: {name: 'xdj',age: 18}})let r2 = await ajax({url: '/postTest',method: 'POST',// headers: { 'content-type': 'application/json' },data: {name: r1.msg.slice(0, 3),age: 18}})}
fun()

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/779232.shtml

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

相关文章

大数据学习-2024/3/28-xls转csv文件、csv文件转xls文件

九九乘法表写入到d.xls文件中 1.导入模块 import xlwt2.创建工作薄对象 bookxlwt.Workbook()3.根据book对象创建sheet标签页对象 sheetbook.add_sheet(jj)4.写入内容 # 外层循环:控制乘法口诀表的行数 # range(1, 10) 生成一个从1到9的整数序列,共…

镜舟普元揭秘数据中台新范式,引领企业数智化转型与创新实践

在当前数字化浪潮中,数据中台的角色越发重要,承担着将一切业务数据化的重任。近日,北京镜舟科技有限公司(简称“镜舟”)与普元信息技术股份有限公司(简称“普元”)联合举办“数据中台新范式”云…

matplotlib 绘图

matplotlib 绘图 方便设置legend图例的位置 ax1.legend(loc‘upper center’, bbox_to_anchor(0.3, -0.1)) ax2.legend(loc‘upper center’, bbox_to_anchor(0.6, -0.1)) import numpy as np import matplotlib.pyplot as plt from scipy.stats import norm from scipy.inter…

【SpringCloud】Ribbon负载均衡

🏡浩泽学编程:个人主页 🔥 推荐专栏:《深入浅出SpringBoot》《java对AI的调用开发》 《RabbitMQ》《Spring》《SpringMVC》《项目实战》 🛸学无止境,不骄不躁,知行合一 文章目录 …

解决Chrome浏览器打开flags页面时出现黑屏问题的方法

当我们在使用Chrome浏览器并尝试访问flags页面时,遇到屏幕短暂闪烁或变黑的情况,这可能与启用的硬件加速功能有关。硬件加速是Chrome浏览器的一个功能,旨在利用计算设备的GPU来提高视频播放和图形渲染的性能。然而,在某些情况下&a…

类的成员之三:构造器(Constructor)

类的成员之一:成员变量 (field) 类的成员之二:方法 (method) 我们 new 完对象时,所有成员变量都是默认值,如果我们需要赋别的值,需要挨个为它们再赋值,太麻 烦了。我们能不能在new 对象时,直接…

es6的核心语法

在学习低代码时,经常有粉丝会问,低代码需要什么基础,es6就是基础中的一项。我们本篇是做一个扫盲,可以让你对基础有一个概要性的了解,具体的每个知识点可以深入进行了解,再结合官方模板就会有一个不错的掌握…

MySql实战--全局锁和表锁 :给表加个字段怎么有这么多阻碍

今天我要跟你聊聊MySQL的锁。数据库锁设计的初衷是处理并发问题。作为多用户共享的资源,当出现并发访问的时候,数据库需要合理地控制资源的访问规则。而锁就是用来实现这些访问规则的重要数据结构。 根据加锁的范围,MySQL里面的锁大致可以分成…

安装编译cpprest sdk

1、安装vcpkg git clone https://github.com/microsoft/vcpkg运行 bootstrap-vcpkg.bat 2、用vcpkg安装cpprestsdk 下载cpprest,:git clone https://github.com/Microsoft/cpprestsdk.git安装依赖库:vcpkg install --triplet x64-windows zlib openss…

三元组数据模型:构建知识图谱的基石

目录 前言1. 三元组数据模型概述1.1 定义与结构1.2 特点 2. 三元组在知识图谱中的应用2.1 知识表示2.2 知识推理2.3 数据整合 3 三元组的数据格式3.1 N-Triples :3.2 RDF/XML :3.3 Turtle (又称为 Terse RDF Triple Language)&…

Ping32、IPguard三款主流文档加密软件对比,加密软件排行

在当今数字化的时代,数据安全越来越受到人们的重视。为了保护敏感信息不被泄露或滥用,众多企业选择采用数据加密软件。在市面上,Ping32、ipguard和亿赛通是三款备受关注的数据加密软件。本文将对这三款软件进行对比分析,以帮助您更…

蓝桥杯备考随手记: practise01

问题描述: 小明对数位中含有 2、0、1、9 的数字很感兴趣,在 1 到 40 中这样的数包 括 1、2、9、10 至 32、39 和 40,共 28 个,他们的和是 574。 请问,在 1 到 2019 中,所有这样的数的和是多少? 思路分析…

一、JAVA集成海康SDK

JAVA集成海康SDK 文章目录 JAVA集成海康SDK前言一、项目依赖 jar1. examples.jar2. 项目依赖 jna.jar,可以通过 maven依赖到。二、集成SDK1.HcNetSdkUtil 海康 SDK封装类2.HCNetSDK3.Linux系统集成SDK三、总结前言 提示:首先去海康官网下载 https://open.hikvision.com/dow…

Flink-CDC 无法增量抽取SQLServer数据

1.问题 因部署在WindowsServer服务器SQLServer发生过期后重启,Flink-CDC同步进行作业重启,启动后无报错信息,数据正常抽取。但是观察几天后发现当天数据计算指标无法展示 2.定位 因为没用进行任何修改,故初步判断不是因Flink-C…

多线程的学习1

多线程 线程是操作系统能够进入运算调度的最小单位。它被包含在进程之中,是进程中的实际运作单位。 进程:是程序的基本执行实体。 并发:在同一个时刻,有多个指令在单个CPU上交替执行。 并行:在同一时刻&#xff0c…

成都正信晟锦:现在借了钱不还的人怎么处理

在金钱往来中,“借钱不还”的现象时有发生,这不仅损害了债权人的利益,也破坏了社会的信任基础。面对这种情形,我们应当采取何种措施予以解决? 预防胜于治疗。出借前应充分评估借款人的信用状况,必要时要求提供相应的担…

安科瑞智慧安全用电综合解决方案

概述 智慧用电管理云平台是智慧城市建设的延伸成果,将电力物联网技术与云平台的大数据分析功能相结合,实现用电信息的可视化管理,可帮助用户实现安全用电,节约用电,可靠用电。平台支持web,app,微…

Qt与编码

ASCII码:一个字节&#xff0c;256个字符。 Unicode:字母&#xff0c;汉字都占用两个字节。 utf-8:字母一个字节&#xff0c;汉字3个字节。 gbk:字母一个字节&#xff0c;汉字2个字节。 gb2312:可以表示汉字&#xff0c;gb2312<gbk。 编码查看&#xff1a; https://www.…

2024知乎广告推广怎么做,知乎推广教程!

随着社交媒体影响力的日益增强&#xff0c;知乎作为中国高质量知识分享社区的代表&#xff0c;已经成为品牌方精准触达目标受众的重要阵地。云衔科技凭借其专业的一站式广告服务能力&#xff0c;为企业提供知乎广告开户及代运营解决方案&#xff0c;助力企业在知乎平台上实现品…

双非二本找实习前的准备day12

学习目标&#xff1a; 每天复习代码随想录上的题目2-3道算法&#xff08;时间充足可以继续&#xff09;&#xff0c;背诵的八股的问题也在这里记录了 今日碎碎念&#xff1a; 1&#xff09;科四没时间考了&#xff0c;等实习完回来再说咯 2&#xff09;这几天在忙收拾东西和…