通过promise封装ajax

简易的ajax封装

function ajax(url, method, callback) {
    let xhr = new XMLHttpRequest()                        // 生成一个新的XMLHttpRequest对象，具体参考https://developer.mozilla.org/zh-CN/docs/Web/API/XMLHttpRequest
    xhr.open(method, url)                                 // 初始化一个请求
    xhr.send()                                            // 发送请求
    xhr.onload = function () {                            // XMLHttpRequest请求成功完成时触发
      if (this.status === 200) {
        callback(JSON.parse(this.response))               // 回调方法
      } else {
        throw new Error("加载失败")
      }
    }
    xhr.onerror = function () {                            // 当 request 遭遇错误时触发。
      throw new Error("加载失败")
    }
  }

使用示例：

  let url = "https://api.apiopen.top/getJoke?page=1&count=2&type=video" // 这里有免费的开放接口https://blog.csdn.net/c__chao/article/details/78573737
  let method = "GET"

  ajax(url, method, value => {
    console.log(value)
  })

promise封装ajax

  function ajax(url, method) {
    return new Promise((resolve, reject) => {
      let xhr = new XMLHttpRequest()                        // 生成一个新的XMLHttpRequest对象，具体参考https://developer.mozilla.org/zh-CN/docs/Web/API/XMLHttpRequest
      xhr.open(method, url)                                 // 初始化一个请求
      xhr.send()                                            // 发送请求
      xhr.onload = function () {                            // XMLHttpRequest请求成功完成时触发
        if (this.status === 200) {
          resolve(JSON.parse(this.response))               // 回调方法
        } else {
          reject("加载失败")
        }
      }
      xhr.onerror = function () {                            // 当 request 遭遇错误时触发。
        reject("加载失败")
      }
    })
  }

使用示例：

  let url = "https://api.apiopen.top/getJoke?page=1&count=2&type=video" // 这里有免费的开放接口https://blog.csdn.net/c__chao/article/details/78573737
  let method = "GET"

  ajax(url, method).then(value => {
    console.log(value)
  }).catch(err => {
    console.log(err)
  })