zoukankan      html  css  js  c++  java
  • axios,fetch,ajax区别

    Jquery中的ajax

    1 $.ajax({
    2 type:"get",
    3 url:"",
    4 async:true,
    5 data:{},
    6 dataType:"",
    7 success:function(){
    8 }
    9 });

    type 以什么样的方式获取数据,是get或post
    url 必填项,规定把请求发送到哪个 URL。
    axync true/false,默认是tue异步请求,false同步。异步请求$.ajax执行后,才会继续执行ajax后面的脚本,服务器返回数据之后,才会触发success的成功回调,即单个线程。同步请求:所有的请求都为同步。
    data 可选。像服务器发送请求时一起过去的参数。一般是post请求时携带的用户名或者id。
    dataType 可选。规定预期的服务器响应的数据类型。
    默认执行智能判断(xml、json、script 或 html)。

    success 可选。执行成功时返回的数据。
     

      

     优缺点:

    是基于XHR原生开发的,目前已有的fetch可替代。本身是针对mvc的编程模式,不太适合目前mvvm的编程模式。jQuery本身比较大,如果单纯的使用ajax可以自己封装一个,不然会影响性能体验。

     axios解析

    axios({
    method: 'post',
    url: '',
    data: {}
    })
    .then(function (data) {
    console.log(data);
    }
    特点:

    从浏览器中创XMLHttpRequest请求。

    node.js中创建http请求。

    自动转换为json数据类型

    支持promise API ,提供了一些并发请求的接口。

    是vue全家桶技术之一,在vue中需要使用npm install axios --save-dev来安装依赖。

    fetch解析

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

    脱离了xhr。

    是es规范里新的实现方式。

    更加底层,提供了丰富的API。

    .fetch没有办法原生监测请求的进度,而XHR可以。

     总结
    ajax是最早出现发送后端请求的技术,属于原生js范畴,核心是使用XMLHttpRequest对象,使用较多并有先后顺序的话,容易产生回调地狱。

    fetch号称可以代替ajax的技术,是基于es6中的Promise对象设计的,参数和jQuery中的ajax类似,它并不是对ajax进一步封装,它属于原生js范畴。没有使用XMLHttpRequest对象。

    axios不是原生js,使用时需要对其进行安装,客户端和服务器端都可以使用,可以在请求和相应阶段进行拦截,基于promise对象。

  • 相关阅读:
    thinkPHP5.0 获取域名
    tp5 composer在packagist引入验证码
    使用build.php快速搭建前后台
    __construct()和__initialize()
    mysql 如何给SQL添加索引
    mysql如何查看SQL语句的执行时间
    thinkPHP自带的图片批量打包扩展ZipArchive
    sizeof和strlen
    Uboot中汇编指令
    Uboot代码分析
  • 原文地址:https://www.cnblogs.com/bgd150809324/p/11353553.html
Copyright © 2011-2022 走看看