【ajax核心03】封装底层axios函数

目录

一:步骤总结

二:获取数据需求:

三:查找数据需求:

四:发送数据需求:

一:步骤总结

  1. 定义myAxios函数,接收配置对象,返回Promise对象
  2. 发送XHR请求,设置默认请求方式为GET
  3. 调用成功/失败处理程序
  4. 使用myAxios函数,获取数据
function myAxios(config){return new Promise((resolve,reject)=>{//XHR请求//调用成功/失败的处理程序})    
}
myAxios({
}).then(result=>{}).catch(error=>{})

其实底层部分源码框架是这样的,只不过不同的需求,往函数中传入的配置对象有些许不同

二:获取数据需求:

/**

     * 目标:封装_简易axios函数_获取省份列表

     *  1. 定义myAxios函数,接收配置对象,返回Promise对象

     *  2. 发起XHR请求,默认请求方法为GET

     *  3. 调用成功/失败的处理程序

     *  4. 使用myAxios函数,获取省份列表展示

    */

    //*  1. 定义myAxios函数,接收配置对象,返回Promise对象function myAxios(config) {return new Promise((resolve, reject) => {//*  2. 发起XHR请求,默认请求方法为GETconst xhr = new XMLHttpRequest()xhr.open(config.method || 'GET', config.url)xhr.addEventListener('loadend', () => {if (xhr.status >= 200 && xhr.status < 300) {resolve(JSON.parse(xhr.response))} else {reject(new Error(xhr.response))}})xhr.send()})}//*  3. 调用成功/失败的处理程序myAxios({url: 'https://hmajax.itheima.net/api/province1',}).then(//*  4. 使用myAxios函数,获取省份列表展示result => {console.log(result);document.body.innerHTML = result.list.join('<br>')}).catch(error => {document.body.innerHTML = error.message})

三:查找数据需求:

/**

     * 目标:封装_简易axios函数_获取地区列表

     *  1. 判断有params选项,携带查询参数(核心)

     *  2. 使用URLSearchParams转换,并携带到url上(核心)

     *  3. 使用myAxios函数,获取地区列表

    */

 function myAxios(config) {return new Promise((resolve, reject) => {const xhr = new XMLHttpRequest()if (config.params) {//核心// 2.使用URLSearchParams,将传参对象中的params查询对象进行转化,并携带到url上const paramsObj = new URLSearchParams(config.params)console.log(paramsObj);const queryString = paramsObj.toString()//把查询字符串拼接在url?后面config.url += `?${queryString}`//核心}xhr.open(config.method || 'GET', config.url)xhr.addEventListener('loadend', () => {if (xhr.status >= 200 && xhr.status < 300) {resolve(JSON.parse(xhr.response))} else {reject(new Error(xhr.response))}})xhr.send()})}myAxios({url: "https://hmajax.itheima.net/api/area",params: {pname: "辽宁省",cname: '大连市'}}).then(result => {console.log(result);document.body.innerHTML = result.list.join('<br>')})

四:发送数据需求:

 /**

     * 目标:封装_简易axios函数_注册用户

     *  1. 判断有data选项,携带请求体

     *  2. 转换数据类型,在send中发送

     *  3. 使用myAxios函数,完成注册用户

    */

function myAxios(config) {return new Promise((resolve, reject) => {const xhr = new XMLHttpRequest()if (config.params) {const paramsObj = new URLSearchParams(config.params)const queryString = paramsObj.toString()config.url += `?${queryString}`}xhr.open(config.method || 'GET', config.url)xhr.addEventListener('loadend', () => {if (xhr.status >= 200 && xhr.status < 300) {resolve(JSON.parse(xhr.response))} else {reject(new Error(xhr.response))}})//发送数据需求if (config.data) {xhr.setRequestHeader('Content-Type', 'application/json')//2.转换数据类型,将data中的对象转换为json字符串,在send中发送const jsonStr = JSON.stringify(config.data)xhr.send(jsonStr)} else {xhr.send()}})}
//发送数据需求document.querySelector('.reg-btn').addEventListener('click', () => {myAxios({url: 'https://hmajax.itheima.net/api/register',method: 'post',data: {username: 'itheima9999',password: '123456'}}).then(result => {console.log(result);}).catch(error => {console.log(error);})})

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

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

相关文章

Redis启停脚本

目录 1.概述2.Redis自带脚本3.Redis安装4.修改Redis默认脚本5.注册为Service检验脚本/etc/init.d/redis-server脚本添加执行权限添加到redis-server服务启用redis-server服务 6.功能验证启动服务服务状态重启服务停止服务 1.概述 解决部分老系统&#xff0c;如Centos6上启停Re…

HTTP 状态码详解及使用场景

目录 1xx 信息性状态码2xx 成功状态码3xx 重定向状态码4xx 客户端错误状态码5xx 服务器错误状态码 HTTP思维导图连接&#xff1a;https://note.youdao.com/s/A7QHimm0 1xx 信息性状态码 100 Continue&#xff1a;表示客户端应继续发送请求的其余部分。 使用场景&#xff1a;客…

学习分享-Redis 中的压缩列表 (Ziplist)

Redis 中的压缩列表 (Ziplist) 压缩列表 (Ziplist) 是 Redis 内部用于优化小规模数据存储的一种紧凑数据结构。它设计用于高效地存储包含少量元素的列表、哈希表或有序集合&#xff0c;以减少内存占用和提高性能。以下是压缩列表的详细介绍&#xff1a; 1. 压缩列表的结构 压…

胡说八道(24.6.20)——通信杂谈(科普)

上回书到无线电通信的一个分支——电报&#xff0c;咱们今天继续看看关于无线电通信的其他应用的发展史。 第一个是收音机。收音机的出现解决的是人类远距离通过耳朵实时听见讲演者声音的需求&#xff0c;但人们更渴望用眼睛实时远距离看见表演者的形象与动作&#xff0c;这就推…

南阳水利乙级资质:标准提升与行业进步

南阳水利乙级资质的标准提升与行业进步是相辅相成、相互促进的。以下将从标准提升的具体内容、行业进步的表现以及二者之间的关系三个方面进行详细分析。 一、南阳水利乙级资质标准提升的具体内容 企业资信能力要求&#xff1a;水利乙级资质要求企业的净资产达到800万元以上&am…

Freertos-----任务之间的消息传递(使用消息队列信号量方法)

这次来分享任务之间的数据传递的方法&#xff0c;方法有很多种&#xff0c;我展示2种&#xff0c;让大家对freertos有更深刻的印象 目录 消息队列 信号量 消息队列 首先直接打开普中的例程&#xff0c;然后在里面加上ADC的驱动代码&#xff0c;先初始化外设先&#xff0c;我…

java中BiFunction类和Function类的区别和联系?

在Java中&#xff0c;Function和BiFunction都是函数式接口&#xff0c;它们都是Java 8引入的&#xff0c;用于支持函数式编程风格。这两个接口都位于java.util.function包中&#xff0c;但它们在处理参数和返回值方面有所差异&#xff1a; Function接口: 接口定义&#xff1a…

内江科技杂志内江科技杂志社内江科技编辑部2024年第13期目录

科教兴国 内江市科技局“五个强化”助力“五经普”工作有序推进 本刊通讯员; 1 内江市多措并举融入成渝中线科创走廊建设 本刊通讯员; 2 科学管理《内江科技》投稿&#xff1a;cnqikantg126.com 数字化社会公共图书馆的服务效能提升策略研究 闫永凤;臧萌;王亚博;王…

[极客大挑战 2020]Roamphp4-Rceme

rce,rce,rce!!! 右键源代码里给了提示&#xff0c;有备份文件index.php.swp,大伙都做到这来了&#xff0c;应该不用写了吧。看源码 <?php error_reporting(0); session_start(); if(!isset($_SESSION[code])){$_SESSION[code] substr(md5(mt_rand().sha1(mt_rand)),0,5);…

汽车IVI中控开发入门及进阶(二十九):i.MX6

前言: i.MX 6双/6Quad处理器集成多媒体应用处理器,是不断增长的多媒体产品系列的一部分,提供高性能处理,并针对最低功耗进行了优化。 i.MX 6Dual/6Quad处理器采用先进的quad-ArmCortex-A9内核,运行速度高达800 MHz,包括2D和3D图形处理器、1080p视频处理和集成电源管理。…

区块链中nonce是什么,什么作用

目录 区块链中nonce是什么,什么作用 区块链中nonce是什么,什么作用 Nonce在以太坊中是一个用于确保交易顺序性和唯一性的重要参数。以下是对Nonce的详细解释: 定义 Nonce是一个scalar值,它等于从该地址发送的交易数量,或在具有关联代码的账户的情况下,由该账户创建的合…

Python | C++漂移扩散方程和无风险套利公式算法微分

&#x1f3af;要点 &#x1f3af;漂移扩散方程计算微分 | &#x1f3af;期权无风险套利公式计算微分 | &#x1f3af;实现图结构算法微分 | &#x1f3af;实现简单正向和反向计算微分 | &#x1f3af;实现简单回归分类和生成对抗网络计算微分 | &#x1f3af;几何网格计算微分…

如何配置IOMMU或者SWIOTLB

1. 前言 这篇文章说明了如何在Linux内核中启用和配置IOMMU和SWOTLB。 当今的计算或者嵌入设备使用一种内存分区的方法进行外设的管理&#xff0c;如显卡、PCI设备或USB设备&#xff0c;都将设备映射为一段内存&#xff0c;用于设备的读写。 传统意义上的IOMMU用于内存映射&a…

从xxl-job源码中学习Netty的使用

1. 启动与Spring实例化 com.xxl.job.core.executor.impl.XxlJobSpringExecutor.java类 继承SmartInitializingSingleton 类&#xff0c;在afterSingletonsInstantiated 实例化后方法中 调用initJobHandlerMethodRepository 把所有的xxljob任务管理起来&#xff1b; private…

使用ASP.NET Core封装接口请求参数格式

有些人获取接口请求参数是直接使用数据库实体类来获取的&#xff0c;这种方式虽然写起来很方便&#xff0c;但是会导致swagger接口文档出现很多没用的参数&#xff0c;让人看着不舒服。 比如&#xff0c;新增用户只需要传用户名、密码、邮箱就可以了&#xff0c;但是实体类也包…

数据可视化---绘制常用图表,组合图表,定制图表主题

题目一&#xff1a;绘制桑基图&#xff0c;展示某商铺新老客服群体的商品喜好 编写程序。根据第9.3.7&#xff0c;绘制桑基图&#xff0c;展示某商铺新老客服群体的商品喜好。 运行代码&#xff1a; #绘制桑基图&#xff0c;展示某商铺新老客服群体的商品喜好 from pyecharts…

使用Spring Boot和Redis实现邮箱注册与登录的验证码验证

引言 在现代web应用中&#xff0c;邮箱注册和登录是一种常见的用户验证方式。为了增强安全性和便捷性&#xff0c;我们可以利用Redis缓存存储验证码及其过期时间。本文将展示如何使用Spring Boot和Redis来实现邮箱验证码的注册与登录功能。 环境准备 1. 创建Spring Boot项目…

34.构建核心注入代码

上一个内容&#xff1a;33.获取入口点 以 33.获取入口点 它的代码为基础进行修改 实现的功能是把LoadLibrary函数注入到目标进程实现加载我们的模块。LoadLibrary只有有程序使用过了它的代码就会加载到内存中&#xff08;因为动态链接库是内存加载&#xff09;就是a程序要用L…

大数据-数据分析师利用excel绘图

你会用excel&#xff0c;统计数据吗&#xff1f;我是大数据工程师&#xff0c;但是我不会excel。那咋办&#xff1f; 用sql&#xff0c;统计&#xff0c;导出到excel&#xff0c;在用excel统计。本文主要讨论的是导出到excel后&#xff0c;画图。 图是什么&#xff1f; x和y…

【学习笔记】Mybatis-Plus(二) :常用注解

常用注解 注解含义应用场景TableName表名注解&#xff0c;标识实体类对应的表表名和实体类名称不一致TableId主键注解&#xff0c;标识实体类的主键主键需要指定自增长TableField字段注解数据库名称和字段名称不一致TableLogic逻辑删除不是真正物理删除数据KeySequence序列主键…