• AJAX——封装_简易axios

    1.简易axios_获取身份列表

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

    步骤：

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

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

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

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

    1. <!DOCTYPE html>
    2. <html lang="en">
    3.  
    4. <head>
    5.   <meta charset="UTF-8">
    6.   <meta http-equiv="X-UA-Compatible" content="IE=edge">
    7.   <meta name="viewport" content="width=device-width, initial-scale=1.0">
    8.   <title>封装_简易axios函数_获取省份列表</title>
    9. </head>
    10.  
    11. <body>
    12.   <p class="my-p"></p>
    13.   <script>
    14.  
    15.     /**
    16.      * 目标：封装_简易axios函数_获取省份列表
    17.      *  1. 定义myAxios函数，接收配置对象，返回Promise对象
    18.      *  2. 发起XHR请求，默认请求方法为GET
    19.      *  3. 调用成功/失败的处理程序
    20.      *  4. 使用myAxios函数，获取省份列表展示
    21.     */
    22.   //  1. 定义myAxios函数，接收配置对象，返回Promise对象
    23.   function myAxios(config){
    24.     return new Promise((resolve, reject) => {
    25.       //2.发起XHR请求，默认请求方法GET
    26.       const xhr = new XMLHttpRequest()
    27.       xhr.open(config.method || 'GET', config.url)
    28.       xhr.addEventListener('loadend', () => {
    29.         //3.调用成功/失败的处理程序
    30.         if (xhr.status >= 200 && xhr.status < 300){
    31.           resolve(JSON.parse(xhr.response))
    32.         } else {
    33.           reject(new Error(xhr.response))
    34.         }
    35.       })
    36.       xhr.send()
    37.     })
    38.   }
    39.  
    40.   // 4. 使用myAxios函数，获取省份列表展示
    41.   myAxios({
    42.     url:'http://hmajax.itheima.net/api/province'
    43.   }).then(result => {
    44.     console.log(result)
    45.     document.querySelector('.my-p').innerHTML = result.list.join('
      '      )
    46.   }).catch(error => {
    47.     console.log(error)
    48.     document.querySelector('.my-p').innerHTML = error.message
    49.   })
    50.   </script>
    51. </body>
    52.  
    53. </html>

    2.简易axios_获取地区列表

    需求：修改myAxios函数支持传递查询参数，获取“辽宁省”，“大连市”对应地区列表展示

    要求：

    1. myAxios函数调用后，传入params选项
    2. 基于URLSearchParams转换查询参数字符串

    1. <!DOCTYPE html>
    2. <html lang="en">
    3.  
    4. <head>
    5.   <meta charset="UTF-8">
    6.   <meta http-equiv="X-UA-Compatible" content="IE=edge">
    7.   <meta name="viewport" content="width=device-width, initial-scale=1.0">
    8.   <title>封装_简易axios函数_获取地区列表</title>
    9. </head>
    10.  
    11. <body>
    12.   <p class="my-p"></p>
    13.   <script>
    14.     /**
    15.      * 目标：封装_简易axios函数_获取地区列表
    16.      *  1. 判断有params选项，携带查询参数
    17.      *  2. 使用URLSearchParams转换，并携带到url上
    18.      *  3. 使用myAxios函数，获取地区列表
    19.     */
    20.     function myAxios(config) {
    21.       return new Promise((resolve, reject) => {
    22.         const xhr = new XMLHttpRequest()
    23.         // 1. 判断有params选项，携带查询参数
    24.         if(config.params){
    25.           //2.使用URLSearchParams转换，并携带到url上
    26.           const paramsObj = new URLSearchParams(config.params)
    27.           const queryString = paramsObj.toString()
    28.           // 把查询参数字符串，拼接在url？后面
    29.           config.url += `?${queryString}`
    30.         }
    31.  
    32.         xhr.open(config.method || 'GET', config.url)
    33.         xhr.addEventListener('loadend', () => {
    34.           if (xhr.status >= 200 && xhr.status < 300) {
    35.             resolve(JSON.parse(xhr.response))
    36.           } else {
    37.             reject(new Error(xhr.response))
    38.           }
    39.         })
    40.         xhr.send()
    41.       })
    42.     }
    43.  
    44.     // 3. 使用myAxios函数，获取地区列表
    45.     myAxios({
    46.       url:'http://hmajax.itheima.net/api/area',
    47.       params: {
    48.         pname:'辽宁省',
    49.         cname:'大连市'
    50.       }
    51.     }).then(result => {
    52.       console.log(result)
    53.       document.querySelector('.my-p').innerHTML = result.list.join('
      '      )
    54.     })
    55.  
    56.   </script>
    57. </body>
    58.  
    59. </html>

    3.简易axios_注册用户

    需求：修改myAxios函数支持传递请求头数据，完成注册用户功能

    步骤：

    1. myAxios函数调用后，判断data选项
    2. 转换数据类型，在send方法中发送
    3. 使用自己封装的myAxios函数完成注册用户功能
    1. <!DOCTYPE html>
    2. <html lang="en">
    3.  
    4. <head>
    5.   <meta charset="UTF-8">
    6.   <meta http-equiv="X-UA-Compatible" content="IE=edge">
    7.   <meta name="viewport" content="width=device-width, initial-scale=1.0">
    8.   <title>封装_简易axios函数_注册用户</title>
    9. </head>
    10.  
    11. <body>
    12.   <button class="reg-btn">注册用户</button>
    13.   <script>
    14.     /**
    15.      * 目标：封装_简易axios函数_注册用户
    16.      *  1. 判断有data选项，携带请求体
    17.      *  2. 转换数据类型，在send中发送
    18.      *  3. 使用myAxios函数，完成注册用户
    19.     */
    20.     function myAxios(config) {
    21.       return new Promise((resolve, reject) => {
    22.         const xhr = new XMLHttpRequest()
    23.  
    24.         if (config.params) {
    25.           const paramsObj = new URLSearchParams(config.params)
    26.           const queryString = paramsObj.toString()
    27.           config.url += `?${queryString}`
    28.         }
    29.         xhr.open(config.method || 'GET', config.url)
    30.  
    31.         xhr.addEventListener('loadend', () => {
    32.           if (xhr.status >= 200 && xhr.status < 300) {
    33.             resolve(JSON.parse(xhr.response))
    34.           } else {
    35.             reject(new Error(xhr.response))
    36.           }
    37.         })
    38.         // 1. 判断有data选项，携带请求体
    39.         if (config.data) {
    40.           //2. 转换数据类型，在send中发送
    41.           const jsonStr = JSON.stringify(config.data)
    42.           xhr.setRequestHeader('Content-Type','application/json')
    43.           xhr.send(jsonStr)
    44.         } else {
    45.           // 如果没有请求体数据，正常的发起请求
    46.           xhr.send()
    47.         }
    48.         
    49.       })
    50.     }
    51.  
    52.  
    53.     document.querySelector('.reg-btn').addEventListener('click',() => {
    54.       // 3. 使用myAxios函数，完成注册用户
    55.       myAxios({
    56.         url:'http://hmajax.itheima.net/api/register',
    57.         method:'POST',
    58.         data:{
    59.           username:'itheima999',
    60.           password:'666666'
    61.         }
    62.       }).then(result => {
    63.         console.log(result)
    64.       }).catch(error => {
    65.         console.dir(error)
    66.       })
    67.     })
    68.   </script>
    69. </body>
    70.  
    71. </html>

  • 相关阅读:
    关于一篇“范式详解”博文的批注
    Android 11 设置开机默认系统横屏显示
    自认为最好的rule_of_five
    论如何在Android中还原设计稿中的阴影
    [附源码]java毕业设计教务系统
    Cascade-MVSNet论文笔记
    【小月电子】ALTERA FPGA开发板（Spirit_V4）系统学习教程-LESSON3 LED流水灯
    HCIP路由交换的三门考试
    如何判断去噪之后的变压器局部放电是内部还是外部信号
    vue3父子组件传对象，子组件访问修改父组件对象中的属性值
  • 原文地址：https://blog.csdn.net/weixin_48719464/article/details/138054286