js基础编程-题目10 ajax的promise版本

使用Promise封装原生Ajax

最新推荐文章于 2025-12-05 08:37:05 发布

原创最新推荐文章于 2025-12-05 08:37:05 发布 · 182 阅读

0 ·

CC 4.0 BY-SA版权

柳晓黑胡椒

文章标签：

#javascript #ajax #开发语言

js编程题专栏收录该内容

29 篇文章

订阅专栏

这篇博客分享了如何将原生的Ajax实现转化为Promise形式，适用于处理异步请求。通过创建一个名为ajax的函数，接受参数option，根据GET或POST方式发送请求，并设置超时处理。同时提供了一个objStr辅助函数来处理请求数据的编码。

整理下初学时做过的js基础编程题目和大家分享以下，如果大家觉得有用，别忘了点一下赞哦

ajax

将原生的Ajax封装为prmise

const ajax = (option) => new Promise((resolve, reject) => {
  let xmlhttp, timer
  xmlhttp = window.XMLHttpRequest ? new XMLHttpRequest() : new ActiveXObject("Microsoft.XMLHTTP")
  if (option.type.toLowerCase() === 'get') {
    xmlhttp.open("GET", option.url + '?' + objStr(option.data), true)
    xmlhttp.send()
  } else if (option.type.toLowerCase() === "post") {
    xmlhttp.open("POST", option.url, true)
    xmlhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded")
    xmlhttp.send(objStr(option.data))
  }
  xmlhttp.addEventListener("readystatechange", function () {
    if (xmlhttp.readyState === 4) {
      clearTimeout(timer)
      if (xmlhttp.status >= 200 && xmlhttp.status <= 300) {
        resolve(xmlhttp)
      } else {
        reject(xmlhttp)
      }
    }
  }, false)
  if (option.timeout) {
    timer = setTimeout(() => {
      xmlhttp.abort()
      clearTimeout(timer)
    }, option.timeout)
  }
  function objStr(obj) {
    if (typeof obj === "string") return obj
    obj.t = new Date().getTime()
    let temp = []
    for (let key in obj) {
      temp.push(encodeURIComponent(key) + '=' + encodeURIComponent(obj[key]))
    }
    return temp.join("&")
  }
})