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函数完成注册用户功能
封装_简易axios函数_注册用户