Promise+js实现ajax请求

Posted 2021-05-22 小路笔记

Promise+js实现ajax请求

function ajax(option) {
    let url = option.url
    let method = option.method.toLocaleLowerCase() || 'get'
    let async = option.async != false //默认是true
    let data = option.data
    // 1.创建xhr对象
    let xhr
    if (window.XMLHttpRequest) {
      xhr = new XMLHttpRequest()
    } else {
      xhr = new ActiveXObject('Microsoft.XMLHTTP')
    }
    // 设置请求超时
    if (option.timeout && option.timeout > 0) {
      xhr.timeout = option.timeout
    }
    return new Promise((resolve, reject) => {
      // 请求超时的返回
      xhr.ontimeout = () => reject && reject('请求超时')
      // 对传入数据的操作
      let paramArr = []
      let encodeDate
      if (data instanceof Object) {
        for (let key in data) {
          paramArr.push(
            encodeURIComponent(key) + '=' +               encodeURIComponent(data[key])
          )
        }
        encodeDate = paramArr.join('&')
      }
      if (method === 'get') {
        const index = url.indexOf('?')
        if (index === -1) {
          url += '?'
        } else if (index !== url.length - 1) {
          url += '&'
        }
        url += encodeDate
      }
      // 2.设置参数
      xhr.open(method, url, async)
      if (method === 'get') {
        // 3.发送请求
        xhr.send(null)
      } else {
        xhr.setRequestHeader(
          'Content-Type',
          'application/x-www-form-urlencoded;charset=UTF-8'
        )
        // 3.发送请求
        xhr.send(encodeDate)
      }
      // 4.请求完成的操作
      xhr.onreadystatechange = () => {
        if (xhr.readystate == 4) {
          if (
            (xhr.status >= 200 && xhr.status < 300) ||
            xhr.status == 304
          ) {
            resolve && resolve(xhr.responseText)
          } else {
            reject && reject()
          }
        }
      }
      xhr.onerror = (err) => reject && reject(err)
    })
  }