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>
相关推荐
cnsxjean39 分钟前
SpringBoot集成Minio实现上传凭证、分片上传、秒传和断点续传
java·前端·spring boot·分布式·后端·中间件·架构
ZL_5671 小时前
uniapp中使用uni-forms实现表单管理,验证表单
前端·javascript·uni-app
沉浮yu大海1 小时前
Vue.js 组件开发:构建可重用且高效的 UI 块
前端·vue.js·ui
代码欢乐豆1 小时前
软件工程第13章小测
服务器·前端·数据库·软件工程
sunly_1 小时前
Flutter:启动屏逻辑处理02:启动页
android·javascript·flutter
EasyNTS1 小时前
H5流媒体播放器EasyPlayer.js网页直播/点播播放器如果H.265视频在播放器上播放不流畅,可以考虑的解决方案
javascript·音视频·h.265
莘薪2 小时前
JQuery -- 第九课
前端·javascript·jquery
好青崧2 小时前
CSS 样式入门:属性全知晓
前端·css·tensorflow
在路上`2 小时前
vue实现列表滑动下拉加载数据
javascript·vue.js·ecmascript
光头程序员3 小时前
工程化开发谷歌插件到底有爽
前端·react·工程化·前端工程化·谷歌插件