1. 1. 浏览器中的HTTP请求方式
  2. 2. AJAX
  3. 3. Axios
  4. 4. Fetch
Ajax, Axios, Fetch
Web基础
, , ,

浏览器中的HTTP请求方式

以上操作都会让浏览器向服务器发出HTTP请求，这些请求通常会触发浏览器的刷新和跳转。

AJAX

AJAX是“Asynchronous JavaScript And XML”的缩写，是JS中异步发出HTTP请求的方式，实现了无刷新的请求。其中我们最熟悉的便是Jquery ajax，它的主要原理就是基于原生XHR的封装。

1
2
3
4
5
6
7
8
$.ajax({
	type: 'POST',
  url: url,
  data: data,
  dataType: dataType,
  success: function () {},
  error: function () {}
})
1
2
3
4
5
6
7
8
9
10
11
12
13
14
// ajax 的简单封装
function sendAjax (opt) {
  let xhr = new XMLHttpRequest()
  xhr.open(opt.type, opt.url)
  xhr.onreadystatechange = () => {
    if (xhr.readyState === 4 && xhr.status === 200) {
      const data = xhr.response
      opt.success(data)
    } else {
      opt.error()
    }
  }
  xhr.send()
}

对于嵌套请求，AJAX有个难以回避的问题，就是“回调地狱”。随着JS语言的发展，我们有了回避“回调地狱”的解决方法——Promise。

Axios

1
2
3
4
5
6
7
axios.get('http://link.com')
  .then(res => {
    // success
  })
  .catch(error => {
    // error
  })

Axios是基于Promise的HTTP 库，可以用在浏览器和 node.js 中。特色：

  • 从浏览器中创建 XMLHttpRequests
  • 从 node.js 创建 http 请求
  • 支持 Promise API
  • 拦截请求和响应
  • 转换请求数据和响应数据
  • 取消请求
  • 自动转换 JSON 数据
  • 客户端支持防御 XSRF
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
// 基于Promise，对XMLHttpRequest进行封装
function sendAjax (opt) {
  let xhr = new XMLHttpRequest()
  return new Promise ((resolve, reject) => {
    xhr.open(opt.type, opt.url)
    xhr.onreadystatechange = () => {
      if (xhr.readyState === 4 && xhr.status === 200) {
        const data = xhr.response
        resolve(data)
      } else {
        reject()
      }
    }
    xhr.send()
  })
}

Fetch

1
2
3
4
5
6
7
fetch('http://link.com')
  .then(res => {
    // success
  })
  .catch(error => {
    // error
  })

Fetch API 提供了一个 JavaScript 接口，用于访问和操纵 HTTP 管道的一些具体部分，例如请求和响应。它还提供了一个全局 fetch() 方法，该方法提供了一种简单，合理的方式来跨网络异步获取资源。

Fetch是基于Promise设计的，并且脱离了XHR，是一种更理想的替代方法。

当然，在使用上，还是存在一些缺陷的，例如：

  • 只对网络请求报错，对400，500都当做成功的请求，需要封装去处理
  • 默认不会带cookie，需要添加配置项
  • 不支持abort，不支持超时控制，使用setTimeout及Promise.reject的实现的超时控制并不能阻止请求过程继续在后台运行，造成了流量的浪费
  • 没有办法原生监测请求的进度，而XHR可以

Fetch参考资料：

传统 Ajax 已死，Fetch 永生

fetch没有你想象的那么美

fetch使用的常见问题及解决方法

Previous post
Next post