XHR原型链改造思路

XHR 原型链改造思路

通过下面的案例，为大家发散下思维，改造原型链上的方法，可以做得事情很多。比如我们通过改造 XMLHttpRequest 对象原型链上的 open、send方法，可以实现前端埋点，xhr, axios 请求拦截器等等

/**
 * xhr, axios请求拦截
 */
export function interceptAjax() {
  const { open, send } = XMLHttpRequest.prototype

  // 劫持 open方法
  XMLHttpRequest.prototype.open = function openXHR(...args) {
    console.log('%c - open -', 'background: orange;color: white')
    return open.apply(this, args)
  }

  // 劫持 send方法
  XMLHttpRequest.prototype.send = function (body) {
    // body 就是post方法携带的参数

    // readyState发生改变时触发,也就是请求状态改变时
    // readyState 会依次变为 2,3,4 也就是会触发三次这里
    this.addEventListener('readystatechange', () => {
      const {
        readyState,
        status,
        responseURL = _config.src,
        responseText,
      } = this
      if (readyState === 4) {
        // 请求已完成,且响应已就绪
        if (status === 200 || status === 304) {
          // 请求成功
          console.log(
            '%c - response successful -',
            'background: green;color: white'
          )
        } else {
          // 请求失败，这里可以做前端埋点，比如说错误上报等
          console.log('%c - response failed -', 'background: red;color: white')
        }
      }
    })

    return send.call(this, body)
  }
}

效果图：