1. Toy模板网首页
  2. > Toy博客

Ajax_3 Ajax原理+ （XMLHttpRequest + Promise ）+ 封装一个axios插件库，实现功能。

9月前 作者：Forever_Hopeful 分类：Toy博客 阅读(44) 违法举报

这篇具有很好参考价值的文章主要介绍了Ajax_3 Ajax原理+ （XMLHttpRequest + Promise ）+ 封装一个axios插件库，实现功能。。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

Ajax_3 Ajax原理

01-Ajax原理-XMLHttpRequest

使用XMLHttpRequest

步骤：

  1. 创建XMLHttpRequest对象
  2. 配置请求方法请求url网址
  3. 监听loadend事件，接受响应结果
  4. 发起请求

需求：使用XMLHttpRequest对象与服务器通信

代码示例
 //  1. 创建 XMLHttpRequest 对象
 const xhr = new XMLHttpRequest()

 //  2. 配置请求方法和请求 url 地址
 xhr.open('GET','http://hmajax.itheima.net/api/province')

 // 3. 监听 loadend 事件，接收响应结果
 xhr.addEventListener('loadend', () => {
   console.log(xhr.response)
   // 字符串转对象
   const data = JSON.parse(xhr.response)
   console.log(data.list)
   // 数组转字符串
   console.log(data.list.join('<br>'))
   // 插入到页面中
   document.querySelector('.my-p').innerHTML = data.list.join('<br>')
 })

 //  4. 发起请求
 xhr.send()
</script>

02-XMLHttpRequest-查询参数

定义：浏览器提供给服务器的额外信息，让服务器返回浏览器想要的结果。

语法：
  1. ?参数名1=值1&参数名2=值2 （在问号后面，多个值用&连接）

参数名是接口文档里面设定的哦！

需求：使用XHR携带查询参数，展示某个省下属的城市列表

代码示例
<script>  
// 1、创建xhr实例对象
 const xhr = new XMLHttpRequest()
 // 2、发起请求
 xhr.open('GET','http://hmajax.itheima.net/api/city?pname=江西省')
 xhr.addEventListener('loadend', () => {
   console.log(xhr.response)
   // 对象转字符串
   const data = JSON.parse(xhr.response)
   console.log(data)
   // 数组转字符串，用换行符分隔
   console.log(data.list.join('<br>'))
   // 插入渲染
   document.querySelector('.city-p').innerHTML = data.list.join('<br>')
 })
 xhr.send()

</script>

03-地区查询

需求： 根据省份和城市名字, 查询对应的地区列表

代码示例
<script>
 // 注册点击事件
 document.querySelector('.sel-btn').addEventListener('click', () => {
   // 2.收集省份和城市名字
   const pname = document.querySelector('.province').value
   const cname = document.querySelector('.city').value

   // 3.组织查询参数的字符串
   const qObj = {
     pname,
     cname
   }
   // 将查询参数对象   ->  查询参数的字符串
   const paramsObj = new URLSearchParams(qObj)
   // 使用toString（）方法将实例对象转为字符串
   const queryString = paramsObj.toString()
   console.log(queryString)


   // 1.创建xhr实例对象
   const xhr = new XMLHttpRequest()
   // 2.向服务器发送请求
   xhr.open('GET', `http://hmajax.itheima.net/api/area?${queryString}`)
   // 3.监听函数监听服务器响应的信息
   xhr.addEventListener('loadend', () => {
     console.log(xhr.response)
     // 将返回结果对象转字符串
     const data = JSON.parse(xhr.response)
     console.log(data.list)
     // 将数组里面的数据通过map数组映射给标签，记得将数组转为大的字符串
     const htmlStr = data.list.map(item => {
       return `<li class="list-group-item">${item}</li>`
     }).join('')
     console.log(htmlStr)
     document.querySelector('.list-group').innerHTML = htmlStr
   })
   // 4.发送请求
   xhr.send()

 })

</script>

04-XMLHttpRequest-提交数据

需求： 通过XHR提交用户名和密码，完成注册功能

代码示例
 document.querySelector('.reg-btn').addEventListener('click', () => {
   const xhr = new XMLHttpRequest()
   xhr.open('POST', 'http://hmajax.itheima.net/api/register')
   xhr.addEventListener('loadend', () => {
     console.log(xhr.response)
   })
   // 自己配置请求参数
   xhr.setRequestHeader('Content-Type', 'application/json')
   // 准备好提交的数据
   const userObj = {
     username: 'liubuzhu',
     password: '7654321'
   }
   //将参数对象转为字符串  请求体
   const userStr = JSON.stringify(userObj)
   // 设置请求体：发起请求
   xhr.send(userStr)
 })
</script>

无论是请求还是查询都需要自己配置对象通过API转换后进行操作

查询参数使用路径传参在?后面。

提交请求参数则自己配置请求对象后，在xhr.send（请求参数）

05-认识 Promise

定义： promise对象用于表示一个异步操作的最终完成（或失败 及其结果）

promise的好处
  1. 逻辑更清晰
  2. 了解axios函数内部运作机制
  3. 能解决回调函数低于问题
语法：
  1. 创建一个promise对象，传入resolve和reject参数
  2. 执行异步任务，并传递结果，成功传入resolve，失败传入reject
  3. 接受结果：成功then方法 ， 失败 catch方法
代码示例
<script>  
const p = new Promise((resolve,reject) => {
    // 2.执行异步代码
    setTimeout(() => {
      // 成功就直接给resolve传入实参
      resolve('模拟Ajax请求成功结果')

      // 失败就直接给reject传入实参
      reject('模拟Ajax请求失败结果')
      
    },2000)
  })
  // 3.获取结果
  p.then(result => {
    console.log(result)
  }).catch(error => {
    console.log(error)
  })
  </script>
  • 注意第二步的使用。

06-Promise对象的三种状态

作用
  1. 了解Promise对象如何关联的处理函数，以及代码的执行顺序。
  1. pending状态（待定） new Promise() ： 初始状态，既没有被兑现，也没有被拒绝
  2. fulfilled状态 （已兑现） .then（回调函数） :意味着，操作成功完成
  3. rejected状态 （已拒绝） .catch(回调函数) : 意味着，操作失败
  • 注意：Promise对象一旦被 兑现 或者 拒绝，就已经被敲定了， 状态无法再被改变。
代码示例
<script>    
// Promise对象创建时(待定状态)，这里的代码都会被执行
      console.log('Promise对象内开始执行')
      // 2. 执行异步代码，等待执行结果返回给实参，然后兑现 或者 拒绝给结果
      setTimeout(() => {
        // resolve被调用后，  fulfilled状态-已兑现 then（）
        resolve('模拟AJAX请求-成功结果')

        // reject被调用后，rejected状态-已拒绝 catch（）
        reject(new Error('模拟AJAX请求-失败结果'))
      }, 2000)
</script>

了解三种状态的执行时机，先是执行Promise里面的同步语句，然后调用兑现和拒绝两种状态，等到 异步代码执行完结果在返回给两种状态。

07-使用Promise + XHR获取省份列表

步骤：

* 1. 创建Promise对象

* 2. 执行XHR异步代码，获取省份列表

* 3. 关联成功或失败函数，做后续处理

代码示例
<script>
        // 1. 创建Promise对象
    const p = new Promise((resolve,reject) => {
      // 2. 执行XHR异步代码，获取省份列表
      const xhr = new XMLHttpRequest()
      xhr.open('GET','http://hmajax.itheima.net/api/province')
      xhr.addEventListener('loadend',() => {
        // 查看响应状态码
        // console.log(xhr.status)
        if (xhr.status >= 200 && xhr.status < 300) {
          resolve(JSON.parse(xhr.response))  //字符串转对象
        } else {
          // 错误我们需要创建一个错误实例对象，并且给构造函数传递错误信息。当实现传递给对调函数
          reject(new Error(xhr.response))  
        }
      })
      xhr.send()
    })

    // 3. 关联成功或失败函数，做后续处理
    p.then(result => {
      document.querySelector('.my-p').innerHTML = result.list.join('<br>')
    }).catch(error => {
      // 服务器返回的错误信息返回给页面
      document.querySelector('.my-p').innerHTML = error.message

    })

</script>

08-封装简易的axios-查询、请求、提交

需求：基于Promise + XHR 封装 myAxios函数，获取省份列表展示。

  • 目标：封装_简易axios函数_获取省份列表
    1. 定义myAxios函数，接收配置对象，返回Promise对象
    * 2. 发起XHR请求，默认请求方法为GET
    * 3. 调用成功/失败的处理程序
    * 4. 使用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) {
      const jsonStr = JSON.stringify(config.data)
      xhr.setRequestHeader('Content-Type', 'application/json')
      xhr.send(jsonStr)
    } else {
      xhr.send()
    }
  })
}
//下面直接调用函数（就先使用axios（）一样的）根据实际需求配置  
      myAxios({
        url: 'http://hmajax.itheima.net/api/register',
        method: 'POST',
        data: {
          usename: 'myaxios010',
          password: '99999999'
        }
      }).then(result => {
        console.log(result)
      }).catch(error => {
        console.dir(error)  
      })
    })

2023年8月7日15:38:27

会有综合案例，会单独出一期，同时会补全。文章来源地址https://www.toymoban.com/news/detail-632742.html

到了这里，关于Ajax_3 Ajax原理+ （XMLHttpRequest + Promise ）+ 封装一个axios插件库，实现功能。的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处： 如若内容造成侵权/违法违规/事实不符，请点击违法举报进行投诉反馈，一经查实，立即删除！

分享到：
领支付宝红包 赞助服务器费用

相关文章

  • 异步回调中axios，ajax，promise，cors详解区分

    Ajax、Promise和Axios之间的关系是，它们都是用于在Web应用程序中发送异步HTTP请求的JavaScript库，但它们有不同的实现方式和用法。 Ajax是一种旧的技术，使用XMLHttpRequest对象来向服务器发送异步请求并获取响应。它通常需要手动编写回调函数来处理响应，并且容易出现回调地狱问

    2024年02月13日
    浏览(56)

  • 基于Promise手动封装ajax

    2024年02月12日
    浏览(37)

  • 二次封装ajax和axios

    2024年02月14日
    浏览(47)
  • 前端开发中的ajax请求、axios封装

    前端开发中的ajax请求、axios封装

    目录 浏览器http请求 同步 js标签跨域、url 异步ajax、websock协议 ajax是异步的技术术语，最早的api是xhr（XMLHttpRequest） fetch es6 api axios 封装axios（无论用requst还是axios请求都会生效） src/utils/request.ts请求/响应拦截器封装 ts post请求request.post(url)和 通用请求request({url,method:\\\'post\\\'})对象

    2024年02月11日
    浏览(50)
  • ajax-axios-url-form-serialize 插件

    ajax-axios-url-form-serialize 插件

    1.什么是 AJAX ? mdn 使用浏览器的 XMLHttpRequest 对象 与服务器通信 浏览器网页中，使用 AJAX技术（XHR对象）发起获取省份列表数据的请求，服务器代码响应准备好的省份列表数据给前端，前端拿到数据数组以后，展示到网页 2.什么是服务器？ 可以暂时理解为提供数据的一台电脑

    2024年02月11日
    浏览(37)
  • 【Vue框架】Vue2中axios发送请求—安装axios、配置全局域名、传递参数、axios原理之Promise(什么是Promise、使用原因、基本使用、相关API、async与await使用）

    【Vue框架】Vue2中axios发送请求—安装axios、配置全局域名、传递参数、axios原理之Promise(什么是Promise、使用原因、基本使用、相关API、async与await使用）

    官网： https://www.axios-http.cn/ 1.1.1 安装axios库 安装 axios 通信库： npm install axios -S 1.1.2 在全局中引入axios库 全局在main.js中引入axios： import axios from \\\'axios\\\' 1.1.3 挂在原型对象 Vue.prototype.$axios = axios; 将 axios 挂载到Vue原型对象中，实现数据共享，节约内存空间。 此时在任何页面都可

    2024年02月05日
    浏览(50)

  • Ajax_4(进阶)同步异步+ 宏任务微任务 + Promise链 + async终极解决方案 +事件循环原理 + 综合案例

    01-同步代码和异步代码 什么是同步代码？ 同步代码：逐行执行，需要原地等待结果后，才继续向下执行。 什么是异步代码？ 调用后耗时，不阻塞代码继续执行，（不必原地等待），在将来完成后 触发一个 回调函数 。 代码阅读 目标：阅读并回答代码执行和打印的顺序 打印

    2024年02月13日
    浏览(51)

  • 使用ts封装一个Axios请求

    下面是一个简单的 TypeScript 版本的封装 Axios 请求的例子，基于 Axios 0.21.1 版本： 在这个示例中，我们首先定义了一个通用的响应结构 ApiResponse，用来包装 API 返回的数据，包括状态码、数据和消息等信息。然后，我们创建了一个 Axios 实例，定义了请求和响应拦截器，以及封装

    2024年02月16日
    浏览(45)
  • 鸿蒙API9+axios封装一个通用工具类

    鸿蒙API9+axios封装一个通用工具类

    使用方式： 打开Harmony第三方工具仓，找到axios，如图： 第三方工具仓网址：https://ohpm.openharmony.cn/#/cn/home 在你的项目执行命令：ohpm install @ohos/axios 前提是你已经装好了ohpm ，如果没有安装，可以在官网找到详细的安装教程； 注意：不是在你的entry目录下，比如你的项目名称：

    2024年04月17日
    浏览(59)

  • axios全局封装取消请求，你可以创建一个 Axios 实例，并为该实例配置默认的 CancelToken

    可以在你的应用中使用这个封装过的 Axios 实例，并通过调用 instance.cancelAll() 方法来取消所有未完成的请求。

    2024年02月04日
    浏览(44)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包，优惠每天领

二维码1

领取红包

二维码2

领红包