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>
相关推荐
web行路人2 分钟前
React中类组件和函数组件的理解和区别
前端·javascript·react.js·前端框架
番茄小酱0013 分钟前
Expo|ReactNative 中实现扫描二维码功能
javascript·react native·react.js
子非鱼92122 分钟前
【Ajax】跨域
javascript·ajax·cors·jsonp
超雄代码狂24 分钟前
ajax关于axios库的运用小案例
前端·javascript·ajax
孤客网络科技工作室26 分钟前
AJAX 全面教程:从基础到高级
android·ajax·okhttp
长弓三石33 分钟前
鸿蒙网络编程系列44-仓颉版HttpRequest上传文件示例
前端·网络·华为·harmonyos·鸿蒙
小马哥编程34 分钟前
【前端基础】CSS基础
前端·css
嚣张农民1 小时前
推荐3个实用的760°全景框架
前端·vue.js·程序员
周亚鑫1 小时前
vue3 pdf base64转成文件流打开
前端·javascript·pdf
落魄小二1 小时前
el-table 表格索引不展示问题
javascript·vue.js·elementui