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函数支持传递查询参数，获取"辽宁省"，"大连市"对应地区列表展示

要求：

myAxios函数调用后，传入params选项
基于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函数支持传递请求头数据，完成注册用户功能

步骤：

myAxios函数调用后，判断data选项
转换数据类型，在send方法中发送

使用自己封装的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>