用原生JS创建简易的axios

1.定义一个函数

function myAxios(config){}

  1. 此时我们要考虑axios中是如何使用的,axios 中可能会存在 url(资源路径) ,params(请求参数),method(请求方式),data(请求数据),其中url一定是要有的
  2. 我们要有一定的知识储备,如Promise, URLSearchParams, XHL 的一些基本的使用

2. 给函数添加相应的逻辑

  1. 判断有没有params选项
java 复制代码
  if (config.params) {
          // 2.使用URLSearchParams 转换,并携带到url上
          // 构造函数 得到的是 一个对象
          const paramsObj = new URLSearchParams(config.params)
          const queryString = paramsObj.toString()
          // 把查询参数字符串,拼接在url? 后面
          config.url += `?${queryString}`
        }
  1. 判断有没有data选项,携带请求体
java 复制代码
    if (config.data) {
          // 2. 将对象转换成JSON字符串
          const jsonStr = JSON.stringify(config.data)
          // 3. 在发送请求体时,要说命数据的类型
          xhr.setRequestHeader('Content-Type', 'application/json')
          xhr.send(jsonStr)
        } else {

          xhr.send()
        }
  1. 代码的核心逻辑
java 复制代码
		// 添加相应的请求方式,和资源路径
      xhr.open(config.method || 'GET', config.url)
      	// 绑定loadend事件
        xhr.addEventListener('loadend', () => {
        // 判断是否成功
          if (xhr.status >= 200 && xhr.status < 300) {
          // 成功调用,成功回调函数
            resolve(JSON.parse(xhr.response))
          } else {
          // 失败 调用失败回调函数
            reject(new Error(xhr.response))
          }
        })

3. 完整版代码

java 复制代码
    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)
      	// 绑定loadend事件
        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. 将对象转换成JSON字符串
          const jsonStr = JSON.stringify(config.data)
          // 3. 在发送请求体时,要说命数据的类型
          xhr.setRequestHeader('Content-Type', 'application/json')
          xhr.send(jsonStr)
        } else {

          xhr.send()
        }
      })
    }
相关推荐
你的人类朋友1 分钟前
“签名”这个概念是非对称加密独有的吗?
前端·后端·安全
Adorable老犀牛7 分钟前
阿里云-ECS实例信息统计并发送统计报告到企业微信
python·阿里云·云计算·企业微信
西陵8 分钟前
Nx带来极致的前端开发体验——任务缓存
前端·javascript·架构
倔强青铜三17 分钟前
苦练Python第66天:文件操作终极武器!shutil模块完全指南
人工智能·python·面试
倔强青铜三19 分钟前
苦练Python第65天:CPU密集型任务救星!多进程multiprocessing模块实战解析,攻破GIL限制!
人工智能·python·面试
Panda__Panda25 分钟前
docker项目打包演示项目(数字排序服务)
运维·javascript·python·docker·容器·c#
Lris-KK1 小时前
力扣Hot100--94.二叉树的中序遍历、144.二叉树的前序遍历、145.二叉树的后序遍历
python·算法·leetcode
10年前端老司机1 小时前
Promise 常见面试题(持续更新中)
前端·javascript
潘小安2 小时前
跟着 AI 学 (一)- shell 脚本
前端·ci/cd·vibecoding
zy_destiny2 小时前
【工业场景】用YOLOv8实现抽烟识别
人工智能·python·算法·yolo·机器学习·计算机视觉·目标跟踪