Axios、Fetch、Ajax的实现区别及与XMLHttpRequest之间的关系

// todo CSRF攻击/XSS攻击

1、Ajax

AJAX即“Asynchronous JavaScript and XML”（异步的JavaScript与XML技术）

• XMLHttpRequest api是Ajax的核心
• 什么是 XMLHttpRequest 对象？
  XMLHttpRequest 对象用于在后台与服务器交换数据。所有现代的浏览器都支持 XMLHttpRequest 对象。

const xhr = new XMLHttpRequest();
// open(method, url, async, username, password)
// username 和 password 参数是可选的，为 url 所需的授权提供认证资格。如果指定了，它们会覆盖 url 自己指定的任何资格。

xhr.open('GET', '/your-url', true);
xhr.send();

2、Axios

Axios基于Promise用于浏览器和Node.js的http客户端。
Axios的特性如下：

• 在浏览器中创建 XMLHttpRequests
• Make http requests from node.js
• 支持Promise API
• 拦截请求和响应
• 转换请求和响应数据
• 取消请求
• JSON 数据的自动转换
• 客户端支持防止XSRF
• Axios的核心还是使用XHR来进行通信

3、Fetch

image.png

Fetch 是一种新的原生 JavaScript API，目前大多数浏览器都支持。Fetch 允许您发出类似于 XMLHttpRequest。与 XMLHttpRequest 相比，它是对XMLHttpRequest API 的改进。Fetch 和 XMLHttpRequest 之间的主要区别在于 Fetch API 使用 Promise，因此避免了回调地狱。

Fetch特征如下：

• Fetch是基于Promise设计的。
• 不支持使用XHR，如果浏览器不支持Fetch则需要使用 XHR 实现。
• Fetch只对网络请求报错，对400，500都当做成功的请求，需要封装去处理。
• Fetch 请求默认是不带 cookie 的，需要设置 fetch(url, {credentials: 'include'})。
• Fetch不支持abort，因为Fetch返回的是一个promise，不支持超时控制，使用setTimeout及Promise.reject的实现的超时控制并不能阻止请求过程继续在后台运行，造成了量的浪费。
• 当前IE9, Firefox, Chrome基本已经内置Fetch的全局方法。
• 如果不支持则用 XHR 实现，只要引入一个 polyfill 就可以了， github/fetch的源码实现。
• https://github.com/github/fetch/blob/master/fetch.js

// 摘抄代码片段
export function fetch(input, init) {
  return new Promise(function(resolve, reject) {
    var request = new Request(input, init)

    if (request.signal && request.signal.aborted) {
      return reject(new DOMException('Aborted', 'AbortError'))
    }

    var xhr = new XMLHttpRequest()

    function abortXhr() {
      xhr.abort()
    }

    xhr.onload = function() {
      var options = {
        status: xhr.status,
        statusText: xhr.statusText,
        headers: parseHeaders(xhr.getAllResponseHeaders() || '')
      }
      options.url = 'responseURL' in xhr ? xhr.responseURL : options.headers.get('X-Request-URL')
      var body = 'response' in xhr ? xhr.response : xhr.responseText
      setTimeout(function() {
        resolve(new Response(body, options))
      }, 0)
    }

    xhr.onerror = function() {
      setTimeout(function() {
        reject(new TypeError('Network request failed'))
      }, 0)
    }

    xhr.ontimeout = function() {
      setTimeout(function() {
        reject(new TypeError('Network request failed'))
      }, 0)
    }

    xhr.onabort = function() {
      setTimeout(function() {
        reject(new DOMException('Aborted', 'AbortError'))
      }, 0)
    }

    function fixUrl(url) {
      try {
        return url === '' && global.location.href ? global.location.href : url
      } catch (e) {
        return url
      }
    }

    xhr.open(request.method, fixUrl(request.url), true)

    if (request.credentials === 'include') {
      xhr.withCredentials = true
    } else if (request.credentials === 'omit') {
      xhr.withCredentials = false
    }

    if ('responseType' in xhr) {
      if (support.blob) {
        xhr.responseType = 'blob'
      } else if (
        support.arrayBuffer &&
        request.headers.get('Content-Type') &&
        request.headers.get('Content-Type').indexOf('application/octet-stream') !== -1
      ) {
        xhr.responseType = 'arraybuffer'
      }
    }

    if (init && typeof init.headers === 'object' && !(init.headers instanceof Headers)) {
      Object.getOwnPropertyNames(init.headers).forEach(function(name) {
        xhr.setRequestHeader(name, normalizeValue(init.headers[name]))
      })
    } else {
      request.headers.forEach(function(value, name) {
        xhr.setRequestHeader(name, value)
      })
    }

    if (request.signal) {
      request.signal.addEventListener('abort', abortXhr)

      xhr.onreadystatechange = function() {
        // DONE (success or failure)
        if (xhr.readyState === 4) {
          request.signal.removeEventListener('abort', abortXhr)
        }
      }
    }

    xhr.send(typeof request._bodyInit === 'undefined' ? null : request._bodyInit)
  })
}

fetch.polyfill = true

if (!global.fetch) {
  global.fetch = fetch
  global.Headers = Headers
  global.Request = Request
  global.Response = Response
}

fetch的Requset对象等同于 XMLHttpRequest.send()
所以并不能确定Fetch底层使用的技术是什么，因为是浏览器厂商做的原生支持。

4、umi-request

umi-request是一个网络请求库，基于 Fetch 封装, 旨在为开发者提供一个统一的api调用方式, 简化使用, 并提供诸如缓存, 超时, 字符编码处理, 错误处理等常用功能。
支持的功能如下：

• url 参数自动序列化
• post 数据提交方式简化
• response 返回处理简化
• api 超时支持
• api 请求缓存支持
• 支持处理 gbk
• 类 axios 的 request 和 response 拦截器(interceptors)支持
• 统一的错误处理方式

5、wx-request

不支持Promise方式调用

wx.request({
  url: 'your-url', 
  data: {
    a: '',
  },
  header: {
    'content-type': 'application/json' 
  },
  success (res) {
    console.log(res.data)
  }
})