【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);
      })
    })
相关推荐
牧羊狼的狼30 分钟前
React 中的 HOC 和 Hooks
前端·javascript·react.js·hooks·高阶组件·hoc
知识分享小能手2 小时前
React学习教程,从入门到精通, React 属性(Props)语法知识点与案例详解(14)
前端·javascript·vue.js·学习·react.js·vue·react
luckys.one2 小时前
第9篇:Freqtrade量化交易之config.json 基础入门与初始化
javascript·数据库·python·mysql·算法·json·区块链
魔云连洲2 小时前
深入解析:Vue与React的异步批处理更新机制
前端·vue.js·react.js
mCell2 小时前
JavaScript 的多线程能力:Worker
前端·javascript·浏览器
weixin_437830944 小时前
使用冰狐智能辅助实现图形列表自动点击:OCR与HID技术详解
开发语言·javascript·ocr
超级无敌攻城狮4 小时前
3 分钟学会!波浪文字动画超详细教程,从 0 到 1 实现「思考中 / 加载中」高级效果
前端
excel5 小时前
用 TensorFlow.js Node 实现猫图像识别(教学版逐步分解)
前端
gnip5 小时前
JavaScript事件流
前端·javascript
小菜全5 小时前
基于若依框架Vue+TS导出PDF文件的方法
javascript·vue.js·前端框架·json