【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);
      })
    })
相关推荐
mCell2 小时前
GSAP ScrollTrigger 详解
前端·javascript·动效
gnip2 小时前
Node.js 子进程:child_process
前端·javascript
excel5 小时前
为什么在 Three.js 中平面能产生“起伏效果”?
前端
excel6 小时前
Node.js 断言与测试框架示例对比
前端
天蓝色的鱼鱼8 小时前
前端开发者的组件设计之痛:为什么我的组件总是难以维护?
前端·react.js
codingandsleeping8 小时前
使用orval自动拉取swagger文档并生成ts接口
前端·javascript
石金龙9 小时前
[译] Composition in CSS
前端·css
白水清风9 小时前
微前端学习记录(qiankun、wujie、micro-app)
前端·javascript·前端工程化
Ticnix9 小时前
函数封装实现Echarts多表渲染/叠加渲染
前端·echarts
用户22152044278009 小时前
new、原型和原型链浅析
前端·javascript