AJAX——封装_简易axios

最新推荐文章于 2024-05-02 14:26:53 发布

再快一步`

最新推荐文章于 2024-05-02 14:26:53 发布

阅读量1.1k

点赞数 28

分类专栏： ajax 文章标签： ajax 前端 javascript

本文链接：https://blog.csdn.net/weixin_48719464/article/details/138054286

版权

ajax 专栏收录该内容

20 篇文章 0 订阅

订阅专栏

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>

再快一步`

关注

28
点赞
踩
4

收藏

觉得还不错? 一键收藏
打赏
1
评论
AJAX——封装_简易axios

需求：基于Promise + XHR 封装 myAxios函数，获取省份列表展示步骤：1.定义 myAxios函数，接收配置对象，返回Promise对象2.发起XHR请求，默认请求方法为GET3.调用成功/失败的处理程序4.使用myAxios函数，获取省份列表展示。
复制链接

扫一扫