首页 > 其他分享 >AJAX - 利用XML和Promise封装简易版axios,了解axios底层原理

AJAX - 利用XML和Promise封装简易版axios,了解axios底层原理

时间:2024-08-11 12:25:17浏览次数:20  
标签:XML axios XMLHttpRequest 请求 url xhr 简易版 config

 AJAX原理 - XMLHttpRequest

定义:XMLHttpRequest(XHR)对象用于与服务器交互。通过 XMLHttpRequest 可以在不刷新页面的情况下请求特定 URL,获取数据。这允许网页在不影响用户操作的情况下,更新页面的局部内容。XMLHttpRequest 在 AJAX 编程中被大量使用。

关系:axios 内部采用 XMLHttpRequest 与服务器交互

使用 XMLHttpRequest

步骤: 1. 创建 XMLHttpRequest 对象 2. 配置 请求方法 和请求 url 地址 3. 监听 loadend 事件,接收 响应结果 4. 发起请求

 

XML使用步骤

 

Promise

定义:Promise 对象表示异步操作最终的完成(或失败)以及其结果值

使用步骤:

promise使用步骤

 

XML与promise和aixos的关系图

 

封装代码示例

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>封装_简易axios函数_注册用户</title>
</head>

<body>
  <button class="reg-btn">注册用户</button>
  <script>
    /**
     * 目标:封装_简易axios函数_注册用户
     *  1. 判断有data选项,携带请求体
     *  2. 转换数据类型,在send中发送
     *  3. 使用myAxios函数,完成注册用户
    */
    function myAxios(config) {
            //  创建Promise对象
      return new Promise((resolve, reject) => {
          //  执行XHR异步代码,获取省份列表
        const xhr = new XMLHttpRequest()
            //  判断有params选项,携带查询参数
        if (config.params) {
            //  使用URLSearchParams转换,并携带到url上
          const paramsObj = new URLSearchParams(config.params)
          const queryString = paramsObj.toString()
          // 把查询参数字符串,拼接在url?后面
          config.url += `?${queryString}`
        }
         //  发起XHR请求,默认请求方法为GET
        xhr.open(config.method || 'GET', config.url)

        xhr.addEventListener('loadend', () => {
               //  调用成功/失败的处理程序
              // xhr如何判断响应成功还是失败的?
              // 2xx开头的都是成功响应状态码
          if (xhr.status >= 200 && xhr.status < 300) {
            resolve(JSON.parse(xhr.response))
          } else {
            reject(new Error(xhr.response))
          }
        })
        // 1. 判断有data选项,携带请求体
        if (config.data) {
          // 2. 转换数据类型,在send中发送
          const jsonStr = JSON.stringify(config.data)
          xhr.setRequestHeader('Content-Type', 'application/json')
          xhr.send(jsonStr)
        } else {
          // 如果没有请求体数据,正常的发起请求
          xhr.send()
        }
      })
    }
  
    document.querySelector('.reg-btn').addEventListener('click', () => {
      // 3. 使用myAxios函数,完成注册用户
      myAxios({
        url: 'http://hmajax.itheima.net/api/register',
        method: 'POST',
        data: {
          username: 'itheima999',
          password: '666666'
        }
      })
      //获取成功函数,做后续处理
      .then(result => {
        console.log(result)
      })
       //获取失败函数,做后续处理
      .catch(error => {
        console.dir(error)
      })
    })
  </script>
</body>

</html>

标签:XML,axios,XMLHttpRequest,请求,url,xhr,简易版,config
From: https://blog.csdn.net/m0_73890048/article/details/141103847

相关文章

  • 新手常见错误:Language level is invalid or missing in pom.xml. Current project JDK
    目录Blue留声机:分析报错 Blue留声机:今天开一个maven的时候遇到这样一个报错,这个报错对于我来言是一个并不陌生的报错,早期学习spring框架的时候,遇到过这个问题,当时怎么也弄不出来(现在想想那个时候的我真菜),现在却对这种问题的解决游刃有余。好了,不多bb了,看看我一般处理bu......
  • JAVA里的xml(详解)
    1.xml1.1概述【理解】万维网联盟(W3C)万维网联盟(W3C)创建于1994年,又称W3C理事会。1994年10月在麻省理工学院计算机科学实验室成立。建立者:TimBerners-Lee(蒂姆·伯纳斯·李)。是Web技术领域最具权威和影响力的国际中立性技术标准机构。到目前为止,W3C已发布了200多......
  • 智能车创意组地平线赛道--Yolov5数据集标注xml文件时统一标签问题
    废话不多说,直接给出代码。'''通过解析xml文件,批量修改xml文件里的标签名称,比如把标签zero改成num'''importos.pathimportglobimportxml.etree.ElementTreeasETpath=r'D:\test'#存储标签的路径,修改为自己的Annotations标签路径forxml_fileinglob.glob(pa......
  • Element学习(axios异步加载数据、案例操作)(5)
    1、这次学习的是上次还未完成好的恶element案例,对列表数据的异步加载,并渲染展示。——>axios来发送异步请求(1)(2)在vue当中安装axios(注意在当前的项目目录,并且安装完之后再将项目重启一下)(3)这里我用到数据的url地址为:https://mock.apifox.cn/m1/3128855-0-default/emp/list......
  • Nuxt3 axios封装 使用axios接口请求
    一、先安装axiosnpminstalladdaxios封装请求request.ts文件importaxiosfrom'axios'import{ElMessage,Message}from"element-plus"import{getToken}from'./token.js'constservice=axios.create({baseURL:'/api',//......
  • 二、Tauri 使用(http请求 axios)
    1.启用该功能        在tauri.conf.json文件中启用该功能,配置要请求的API路径,多个API的情况使用逗号隔开就可以了{ "tauri":{  "allowlist":{   "http":{    "all":true,    "request":true,    "scope":["http:......
  • 纯js 导出excel表格,xmlns 方式,导出格式只能是xls
    代码onstworksheet="Sheet1";consttableHTML="<tr><td>数据1</td><td>数据2</td></tr>";constexcelHTML=`<htmlxmlns:o="urn:schemas-microsoft-com:office:office"xmlns:x="urn:s......
  • 【第九节】python中xml解析和json编解码
    目录一、PythonXML解析1.1什么是XML1.2Python对XML的解析方法1.3SAX解析xml1.4xml.dom解析xml1.6ElementTree解析XML二、Python编解码json2.1什么是json2.2使用json库2.3使用第三方库Demjson一、PythonXML解析1.1什么是XML        XML,......
  • vue中axios二次封装【简洁、附代码】+api解耦
    reference:https://www.bilibili.com/video/BV1my421h7hK/?share_source=copy_web&vd_source=334dbcc5ec1e90276a3fca594c89e11e下一篇:继axios二次封装后跨域问题解决——配置代理、环境变量文章目录一、axios请求接口1下载2引入3使用二、axios二次封装1.下......
  • vs生成事件中创建xml -bat取版本号写文件
      setfile=update.xmlsetver=0.0.0.0seturl=http://172.16.17.97:8999echo^<?xmlversion="1.0"encoding="utf-8"?^>>%file%echo^<item^>>>%file%rem这里读取exe的版本号到临时再转格式再输出到%file%wmicdatafilewhereName=$......