航栈
发布
技术实践

关于axios，ajax，fetch的一点区别

15年开发那时候经常听到jQuery的声音，ajax更是常谈话题，有时还经常跟同事比较看谁的代码写的更短。时间过去了4年之久，很少看到jQu

羊先生的头像
羊先生2020.02.14 · 14 分钟阅读 · 75 阅读
关于axios，ajax，fetch的一点区别封面
文章正文还需 14 分钟

15年开发那时候经常听到jQuery的声音，ajax更是常谈话题，有时还经常跟同事比较看谁的代码写的更短。时间过去了4年之久，很少看到jQuery，而更多的是看到大家的话题是抛弃jQuery拥抱axios和fetch，新型肺炎疫情严重，在家没事就写写文章，掌握更多细节方面的知识

Ajax

Ajax带来的最大影响就是页面可以无刷新的请求数据。以往，页面表单提交数据，在用户点击完”submit“按钮后，页面会强制刷新一下，体验十分不友好

传统web请求方式

在15年那时候有网站，经常会看到，用户提交一堆信息，结果有一个错误，后端返回，然后整个信息都没了😥😥

image.png

使用ajax后

有网络资料显示ajax最先的使用的地方说是在谷歌应用于的谷歌地图上，因为谷歌地图一下全加载又显的太浪费资源用户也很慢，如是出现一个问题能不能做到，用户鼠标滑到哪里那里的地图就加载？然后这就是所谓的异步加载

image.png

实现一个Ajax请求

使用原生的js还是比较繁琐，实际工程中建议使用jQuery之类的库，封装的ajax请求方法非常好用，且解决了浏览器兼容性的问题

js 复制代码 
var request = new XMLHttpRequest(); // 创建XMLHttpRequest对象

//ajax是异步的，设置回调函数
request.onreadystatechange = function () { // 状态发生变化时，函数被回调
    if (request.readyState === 4) { // 成功完成
        // 判断响应状态码
        if (request.status === 200) {
            // 成功，通过responseText拿到响应的文本:
            return success(request.responseText);
        } else {
            // 失败，根据响应码判断失败原因:
            return fail(request.status);
        }
    } else {
        // HTTP请求还在继续...
    }
}

// 发送请求:
request.open('GET', '/api/categories');
request.setRequestHeader("Content-Type", "application/json") //设置请求头
request.send();//到这一步，请求才正式发出

jQuery.ajax

js 复制代码 
$.ajax({
   type: 'POST',
   url: url,
   data: data,
   dataType: dataType,
   success: function () {},
   error: function () {}
});

其实jquery ajax使用起来已经是很方便了，那为什么现在还会被慢慢抛弃呢？主要原因有以下几点：

  • 要使用jquery ajax必须引入jquery整个大文件，不是很划算
  • jquery ajax本身是针对MVC设计模式的编程，与当前流行的基于MVVM模式的vue、react等框架不符合
  • jquery ajax本质是基于XHR的封装，而XHR本身架构不是很清晰，目前已采用fetch代替方案
  • 随着前端基于MVVM模式的Vue和React新一代框架的兴起，以及ES6等新规范的制定，以及npm包管理工具的兴起，像Jquery这种大而全的JS库注定是要走向低潮的

axios

首先需要知道：axios不是一种新的技术。

axios 是一个基于Promise 用于浏览器和 nodejs 的 HTTP 客户端，本质上也是对原生XHR的封装，只不过它是Promise的实现版本，符合最新的ES规范

axios特点：

  • 基于 promise 的异步 ajax 请求库，支持promise所有的API
  • 浏览器端/node 端都可以使用，浏览器中创建XMLHttpRequests
  • 支持请求／响应拦截器
  • 支持请求取消
  • 可以转换请求数据和响应数据，并对响应回来的内容自动转换成 JSON类型的数据
  • 批量发送多个请求
  • 安全性更高，客户端支持防御 XSRF，就是让你的每个请求都带一个从cookie中拿到的key, 根据浏览器同源策略，假冒的网站是拿不到你cookie中得key的，这样，后台就可以轻松辨别出这个请求是否是用户在假冒网站上的误导输入，从而采取正确的策略

axios常用语法

  • axios(config): 通用/最本质的发任意类型请求的方式
  • axios(url[, config]): 可以只指定 url 发 get 请求
  • axios.request(config): 等同于 axios(config)
  • axios.get(url[, config]): 发 get 请求
  • axios.delete(url[, config]): 发 delete 请求
  • axios.post(url[, data, config]): 发 post 请求
  • axios.put(url[, data, config]): 发 put 请求
  • axios.defaults.xxx: 请求的默认全局配置
  • axios.interceptors.request.use(): 添加请求拦截器
  • axios.interceptors.response.use(): 添加响应拦截器
  • axios.create([config]): 创建一个新的 axios(它没有下面的功能)
  • axios.Cancel(): 用于创建取消请求的错误对象
  • axios.CancelToken(): 用于创建取消请求的 token 对象
  • axios.isCancel(): 是否是一个取消请求的错误-
  • axios.all(promises): 用于批量执行多个异步请求
  • axios.spread(): 用来指定接收所有成功数据的回调函数的方法

axios为什么既能在浏览器环境运行又能在服务器(node)环境运行？

js 复制代码 
var defaults.adapter = getDefaultAdapter();
function getDefaultAdapter () {
	var adapter;
    if (typeof XMLHttpRequest !== 'undefined') {
    	// 浏览器环境
        adapter = require('./adapter/xhr');
    } else if (typeof process !== 'undefined') {
    	// node环境
        adapter = require('./adapter/http');
    }
   return adapter;
}

上面几行代码，可以看出：XMLHttpRequest 是一个 API，它为客户端提供了在客户端和服务器之间传输数据的功能；process 对象是一个 global （全局变量），提供有关信息，控制当前 Node.js 进程。原来作者是通过判断XMLHttpRequest和process这两个全局变量来判断程序的运行环境的，从而在不同的环境提供不同的http请求模块，实现客户端和服务端程序的兼容

更多详细用法

可以参考我在思否发表的一篇vue+axios+promise实际开发用法

fetch

fetch是前端发展的一种新技术产物

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

这种功能以前是使用 XMLHttpRequest实现的。Fetch提供了一个更好的替代方法，可以很容易地被其他技术使用，例如 Service Workers。Fetch还提供了单个逻辑位置来定义其他HTTP相关概念，例如CORS和HTTP的扩展。

在使用fetch的时候需要注意：

当接收到一个代表错误的 HTTP 状态码时，从 fetch()返回的 Promise 不会被标记为 reject， 即使该 HTTP 响应的状态码是 404 或 500。相反，它会将 Promise 状态标记为 resolve （但是会将 resolve 的返回值的 ok 属性设置为 false ），仅当网络故障时或请求被阻止时，才会标记为 reject。

默认情况下，fetch 不会从服务端发送或接收任何 cookies, 如果站点依赖于用户 session，则会导致未经认证的请求（要发送 cookies，必须设置 credentials 选项）

一个使用fetch获取数据的例子

js 复制代码 
fetch('http://example.com/movies.json')
  .then(function(response) {
    return response.json();
  })
  .then(function(myJson) {
    console.log(myJson);
  });

因为同源策略的约束，浏览器发送的请求是不能随便跨域的，一定要借助JSONP或者跨域头来协助跨域，而Fetch可以直接设置mode为no-cors来实现跨域访问，如下所示

js 复制代码 
fetch('http://localhost:6888/test_get',{
    method: 'GET',
    mode: 'cors',
}).then(res => {
    return res.json();
}).then(json => {
    console.log('获取的结果', json.data);
    return json;
}).catch(err => {
    console.log('请求错误', err);
})

fetch特点

  • 不基于XHR，是ES新规范的实现方式
  • 更加底层，提供更丰富的API
  • fetch只对网络请求报错，对404，500都当做成功的请求
  • fetch默认不会带cookie，需要添加配置项
  • fetch没有办法原生监测请求的进度，而XHR可以

Fetch还是一个新时代的半成品，很多地方并不完善，但是也有它的优势所在，总的来说，就是Fetch技术还需要时间的沉淀，目前还没有达到axios的性能

总结

如果你是直接拉到底部的，就只要记住这个结论就可以啦，目前只需要熟练使用Axios就可以啦，Jquery.ajax如果你是在已有的项目上开发，就直接用已有项目的请求方式，如果是新开的项目建议使用Axios，Fetch虽然符合前端潮流，但是目前还尚不成熟，没有Axios使用起来便利

更多文章

fetch 跨域请求
axios, ajax和fetch的比较
axios 特点