common-mini-components/packages/api/request.ts

公共组件

/**
 * 封装原生 XHRHttpReqest 对象请求数据
 * @param { 请求路径 } url
 * @param { 请求方法 } method
 */
export function request (url: string, method: string, key: string) {
  return new Promise((resolve, reject) => {
    // 获取 XMLHttpRequest 对象的实例
    const xhr = new XMLHttpRequest()
    /**
     * open 方法 接收三个参数
     * 1、method 请求类型
     * 2、url 请求地址
     * 3、async 是否要异步发送请求，false 表示同步， true 表示异步
     *    同步时，Javascript 在发送请求后继续等待浏览器的响应，不做其他操作
     *    异步时，Javascript 在发送请求后会做其他操作，直到浏览器响应后，才
     *    继续请求那边的操作
     * 作用
     *    open 方法会启动一个针对 url 的请求
     *    但不会真正的发送请求，只是启动状态，以备发送
     */
    xhr.open(method, url)
    
    // 必须先open才能设置请求头信息
    xhr.setRequestHeader('Content-Type', 'application/json;charset=UTF-8')
    // 设置 gaia key
    xhr.setRequestHeader('X-Gaia-Api-Key', key)

    /**
     * send 方法接收一个参数，该参数作为请求主体发送
     *      由于该参数对于某些浏览器是必须的，所以不想
     *      发送参数，可以传入 null
     */
    xhr.send(null)

    /**
     * XMLHttpRequest 对象的 readyState 属性
     *    表示请求/响应过程的当前活动阶段
     *    xhr.readyState 每次改变都会触发 onreadystatechange 事件
     *    0：未初始化，尚未调用 open 方法
     *    1：启动，已调用 open 方法，未调用 send 方法
     *    2：发送，已调用 send 方法，但尚未接收到响应
     *    3、接收，已接收到部分相应数据
     *    4、完成，已接收到全部的响应数据，且可以在浏览器端使用了
     */

    xhr.onreadystatechange = function () {
      if (xhr.readyState === 4) {
        /**
         * http 状态码在 200 的区间都是请求成功的状态
         * 状态码 304 表示缓存文件
         */
        if ((xhr.status >= 200 && xhr.status < 300) || xhr.status === 304) {
          const data = JSON.parse(xhr.responseText)
          console.log(data)
          resolve(data)
        } else {
          console.log('request was unsuccessful:' + xhr.status)
          reject('请求出错了')
        }
      }
    }
  })
}