【ajax核心03】封装底层axios函数

目录

一:步骤总结

二:获取数据需求:

三:查找数据需求:

四:发送数据需求:

一:步骤总结

  1. 定义myAxios函数,接收配置对象,返回Promise对象
  2. 发送XHR请求,设置默认请求方式为GET
  3. 调用成功/失败处理程序
  4. 使用myAxios函数,获取数据
javascript 复制代码
function myAxios(config){
    return new Promise((resolve,reject)=>{
        //XHR请求
        //调用成功/失败的处理程序
    })    
}
myAxios({
}).then(result=>{}).catch(error=>{})

其实底层部分源码框架是这样的,只不过不同的需求,往函数中传入的配置对象有些许不同

二:获取数据需求:

/**

* 目标:封装_简易axios函数_获取省份列表

* 1. 定义myAxios函数,接收配置对象,返回Promise对象

* 2. 发起XHR请求,默认请求方法为GET

* 3. 调用成功/失败的处理程序

* 4. 使用myAxios函数,获取省份列表展示

*/

javascript 复制代码
    //*  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', () => {
          if (xhr.status >= 200 && xhr.status < 300) {
            resolve(JSON.parse(xhr.response))
          } else {
            reject(new Error(xhr.response))
          }
        })
        xhr.send()
      })
    }
    //*  3. 调用成功/失败的处理程序
    myAxios({
      url: 'https://hmajax.itheima.net/api/province1',
    }).then(
      //*  4. 使用myAxios函数,获取省份列表展示
      result => {
        console.log(result);
        document.body.innerHTML = result.list.join('<br>')
      }).catch(error => {

        document.body.innerHTML = error.message
      })

三:查找数据需求:

/**

* 目标:封装_简易axios函数_获取地区列表

* 1. 判断有params选项,携带查询参数(核心)

* 2. 使用URLSearchParams转换,并携带到url上(核心)

* 3. 使用myAxios函数,获取地区列表

*/

javascript 复制代码
 function myAxios(config) {
      return new Promise((resolve, reject) => {
        const xhr = new XMLHttpRequest()
        if (config.params) {



//核心
          // 2.使用URLSearchParams,将传参对象中的params查询对象进行转化,并携带到url上
          const paramsObj = new URLSearchParams(config.params)
          console.log(paramsObj);
          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()
      })
    }
    myAxios({
      url: "https://hmajax.itheima.net/api/area",
      params: {
        pname: "辽宁省",
        cname: '大连市'
      }
    }).then(result => {
      console.log(result);
      document.body.innerHTML = result.list.join('<br>')
    })

四:发送数据需求:

/**

* 目标:封装_简易axios函数_注册用户

* 1. 判断有data选项,携带请求体

* 2. 转换数据类型,在send中发送

* 3. 使用myAxios函数,完成注册用户

*/

javascript 复制代码
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))
          }
        })

//发送数据需求
        if (config.data) {
          xhr.setRequestHeader('Content-Type', 'application/json')
          //2.转换数据类型,将data中的对象转换为json字符串,在send中发送
          const jsonStr = JSON.stringify(config.data)
          xhr.send(jsonStr)
        } else {
          xhr.send()
        }
      })
    }
//发送数据需求
    document.querySelector('.reg-btn').addEventListener('click', () => {
      myAxios({
        url: 'https://hmajax.itheima.net/api/register',
        method: 'post',
        data: {
          username: 'itheima9999',
          password: '123456'
        }
      }).then(result => {
        console.log(result);
      }).catch(error => {
        console.log(error);
      })
    })
相关推荐
Danny_FD7 分钟前
Vue + Element UI 实现模糊搜索自动补全
前端·javascript
gnip12 分钟前
闭包实现一个简单Vue3的状态管理
前端·javascript
斐济岛上有一只斐济18 分钟前
后端程序员的CSS复习
前端
Enddme21 分钟前
《面试必问!JavaScript 中this 全方位避坑指南 (含高频题解析)》
前端·javascript·面试
有梦想的程序员22 分钟前
微信小程序使用 Tailwind CSS version 3
前端
你怎么知道我是队长42 分钟前
python---eval函数
开发语言·javascript·python
溟洵1 小时前
Qt 窗口 工具栏QToolBar、状态栏StatusBar
开发语言·前端·数据库·c++·后端·qt
用户2519162427111 小时前
Canvas之图像合成
前端·javascript·canvas
每天开心1 小时前
噜噜旅游App(4)——构建旅游智能客服模块,实现AI聊天
前端·微信小程序·前端框架
超凌1 小时前
el-input-number出现的点击+-按钮频现不生效
前端