AJAX——封装_简易axios

1.简易axios_获取身份列表

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

步骤:

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

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

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

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

复制代码
<!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>
  <p class="my-p"></p>
  <script>

    /**
     * 目标:封装_简易axios函数_获取省份列表
     *  1. 定义myAxios函数,接收配置对象,返回Promise对象
     *  2. 发起XHR请求,默认请求方法为GET
     *  3. 调用成功/失败的处理程序
     *  4. 使用myAxios函数,获取省份列表展示
    */
  //  1. 定义myAxios函数,接收配置对象,返回Promise对象
  function myAxios(config){
    return new Promise((resolve, reject) => {
      //2.发起XHR请求,默认请求方法GET
      const xhr = new XMLHttpRequest()
      xhr.open(config.method || 'GET', config.url)
      xhr.addEventListener('loadend', () => {
        //3.调用成功/失败的处理程序
        if (xhr.status >= 200 && xhr.status < 300){
          resolve(JSON.parse(xhr.response))
        } else {
          reject(new Error(xhr.response))
        }
      })
      xhr.send()
    })
  }

  // 4. 使用myAxios函数,获取省份列表展示
  myAxios({
    url:'http://hmajax.itheima.net/api/province'
  }).then(result => {
    console.log(result)
    document.querySelector('.my-p').innerHTML = result.list.join('<br>')
  }).catch(error => {
    console.log(error)
    document.querySelector('.my-p').innerHTML = error.message
  })
  </script>
</body>

</html>

2.简易axios_获取地区列表

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

要求:

  1. myAxios函数调用后,传入params选项
  2. 基于URLSearchParams转换查询参数字符串
复制代码
<!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>
  <p class="my-p"></p>
  <script>
    /**
     * 目标:封装_简易axios函数_获取地区列表
     *  1. 判断有params选项,携带查询参数
     *  2. 使用URLSearchParams转换,并携带到url上
     *  3. 使用myAxios函数,获取地区列表
    */
    function myAxios(config) {
      return new Promise((resolve, reject) => {
        const xhr = new XMLHttpRequest()
        // 1. 判断有params选项,携带查询参数
        if(config.params){
          //2.使用URLSearchParams转换,并携带到url上
          const paramsObj = new URLSearchParams(config.params)
          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()
      })
    }

    // 3. 使用myAxios函数,获取地区列表
    myAxios({
      url:'http://hmajax.itheima.net/api/area',
      params: {
        pname:'辽宁省',
        cname:'大连市'
      }
    }).then(result => {
      console.log(result)
      document.querySelector('.my-p').innerHTML = result.list.join('<br>')
    })

  </script>
</body>

</html>

3.简易axios_注册用户

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

步骤:

  1. myAxios函数调用后,判断data选项

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

  3. 使用自己封装的myAxios函数完成注册用户功能

    <!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) { 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))
           }
         })
         // 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>
相关推荐
Mintopia10 分钟前
3D Quickhull 算法:用可见性与冲突图搭建空间凸壳
前端·javascript·计算机图形学
Mintopia11 分钟前
Three.js 三维数据交互与高并发优化:从点云到地图的底层修炼
前端·javascript·three.js
陌小路16 分钟前
5天 Vibe Coding 出一个在线音乐分享空间应用是什么体验
前端·aigc·vibecoding
成长ing1213824 分钟前
cocos creator 3.x shader 流光
前端·cocos creator
Alo36533 分钟前
antd 组件部分API使用方法
前端
BillKu36 分钟前
Vue3数组去重方法总结
前端·javascript·vue.js
GDAL38 分钟前
Object.freeze() 深度解析:不可变性的实现与实战指南
javascript·freeze
江城开朗的豌豆1 小时前
Vue+JSX真香现场:告别模板语法,解锁新姿势!
前端·javascript·vue.js
这里有鱼汤1 小时前
首个支持A股的AI多智能体金融系统,来了
前端·python
袁煦丞1 小时前
5分钟搭建高颜值后台!SoybeanAdmin:cpolar内网穿透实验室第648个成功挑战
前端·程序员·远程工作