Javascript

[JS每N日一练] fetch、axios、jquery的ajax用法及区别

本文主要是介绍[JS每N日一练] fetch、axios、jquery的ajax用法及区别,对大家解决编程问题具有一定的参考价值,需要的程序猿们随着小编来一起学习吧!

文章目录

    • 用法
      • jQuery
      • fetch
      • axios
    • 简写
      • jQuery
      • axios
    • 文章小结
    • 参考资料

用法

jQuery

// 基本用法无参数get请求
$.ajax({
    url: url,
    success:function(result){
        console.log(result);
    }
}
// 需指定方法则增加method字段
$.ajax({
    url:url,
    method:"POST",
    success:function(result){
	console.log(result);
    }
}
// 有参数,则增加data字段,有请求头则增加headers字段,有错误处理增加error字段
// 默认是按照表单提交post方法,data中虽然是json但是提交时转成表单
$.ajax({
    url:url,
    data:{a:10},
    success:function(result){
    	console.log(result);
    },
    error:function(xhr,status,error){
    	console.log(error);
    }
});
// data在post下是表单格式,在get下是querystring格式
// 通过以下方法指定为json格式[json格式本质就是body里是json字符串,头里是application/json]
$.ajax({
    url:url,
    headers:{ contentType: "application/json"},
    method:"POST",
    data:JSON.stringify({a:10}),
    success:function(result){
	console.log(result);
    }
});

fetch

// fetch的post表单数据用法
fetch(url,{
    headers:{
         'content-type': "application/x-www-form-urlencoded"
    },
    method:"POST",
    body:"a=12&b=33",
})
.then(res=>res.json())
.then(data=>console.log(res))
.catch(e=>{})
// fetch的post json数据用法
fetch(url,{
    headers:{
         'content-type': "application/json"
    },
    method:"POST",
    body:JSON.stringify({a:100}),
})
.then(res=>res.json())
.then(data=>console.log(res))
.catch(e=>{})

axios

// axios默认是json类型的提交
axios({
    url: url,
    method:"POST",
    data:{a:12}
})
.then(res=>console.log(res.data))
// 如果想改成form则需要修改headers和data格式
axios({
    url:url,
    method:"POST",
    headers:{"Content-Type":"application/x-www-form-urlencoded"},
    data:"a=12&b=23"
})
.then(res=>console.log(res.data))

简写

jQuery

jQuery的get和post可以简写:

$.get(url,data,callback)  // querystring格式
$.post(url,data,callback) // x-www-form-urlencoded格式

axios

axios的get/post/put/delete等等都可以简写

axios.post(url,data).then(callback)

文章小结

Jquery Ajax:

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

Fetch:

  • fetch号称是AJAX的替代品,是在ES6出现的,使用了ES6中的promise对象。
  • Fetch是基于promise设计的。Fetch的代码结构比起ajax简单多了,参数有点像jQuery ajax。
  • 一定记住fetch不是ajax的进一步封装,而是原生js。Fetch函数就是原生js,没有使用XMLHttpRequest对象。

axios:

  • axios不是原生JS的,需要进行安装
  • 它不带可以在客户端使用,也可以在nodejs端使用。Axios也可以在请求和响应阶段进行拦截。
  • 同样也是基于promise对象的。
  • 客户端支持防止CSRF
  • 提供了一些并发请求的接口(重要,方便了很多的操作)

总之:推荐使用axios,主流而且功能强大。

参考资料

  • 【ajax科普】【前端】fetch、axios、jquery的ajax用法 https://www.bilibili.com/video/BV14t411P7tc
  • Jquery ajax, Axios, Fetch区别之我见 https://segmentfault.com/a/1190000012836882
  • https://blog.csdn.net/jiang7701037/article/details/79717310
  • qq群:夜猫逐梦技术交流裙/953949723
    逐梦中原技术交流QQ群

**ps:**文章中内容仅用于技术交流,请勿用于违规违法行为。

这篇关于[JS每N日一练] fetch、axios、jquery的ajax用法及区别的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!