zoukankan      html  css  js  c++  java
  • [异步请求]ajax、axios、fetch之间的详细区别以及优缺点

    1.jQuery ajax 

    $.ajax({
       type: 'POST',
       url: url,
       data: data,
       dataType: dataType,
       success: function () {},
       error: function () {}
    });

    优缺点:

    • 本身是针对MVC的编程,不符合现在前端MVVM的浪潮
    • 基于原生的XHR开发,XHR本身的架构不清晰,已经有了fetch的替代方案
    • JQuery整个项目太大,单纯使用ajax却要引入整个JQuery非常的不合理(采取个性化打包的方案又不能享受CDN服务)

    2.axios

    axios({
        method: 'post',
        url: '/user/12345',
        data: {
            firstName: 'Fred',
            lastName: 'Flintstone'
        }
    })
    .then(function (response) {
        console.log(response);
    })
    .catch(function (error) {
        console.log(error);
    });

    优缺点:

    • 从 node.js 创建 http 请求
    • 支持 Promise API
    • 客户端支持防止CSRF
    • 提供了一些并发请求的接口(重要,方便了很多的操作)

    3.fetch

    try {
      let response = await fetch(url);
      let data = response.json();
      console.log(data);
    } catch(e) {
      console.log("Oops, error", e);
    }

    优缺点:

    优点:

      • 符合关注分离,没有将输入、输出和用事件来跟踪的状态混杂在一个对象里
      • 更好更方便的写法
      • 更加底层,提供的API丰富(request, response)
      • 脱离了XHR,是ES规范里新的实现方式

    缺点:

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

    转自:https://blog.csdn.net/twodogya/article/details/80223508

  • 相关阅读:
    Django 基础
    Ajax介绍
    jquery里操作table表格的各种方法
    DJANGO 学生管理系统项目创建流程 -- 一对多管理及多对多管理
    ZIP() 函数
    DJANGO ORM操作
    DJANGO 学生管理系统项目创建流程 -- 单表管理
    Scrapy
    Django 基础二
    MySQL 5.7 弱密码限制
  • 原文地址:https://www.cnblogs.com/vickylinj/p/10888607.html
Copyright © 2011-2022 走看看