数据请求的四种方式
程序员文章站
2022-05-15 18:25:18
...
ajax 原生数据请求
ajax自然不必说,最早出现的发送后端请求技术,隶属于原始js中,核心使用XMLHttpRequest对象,多个请求之间如果有先后关系的话,就会出现回调地狱。
后面ajax封装可以使用基于promise来封装
jquery中的ajax 数据请求
是jQuery框架中的发送后端请求技术,由于jQuery是基于原始的基础上做的封装,所以,jquery Ajax自然也是原始ajax的封装
fetch 数据请求
- fetch是原生javascript提供的,我们可以直接向全局变量一样使用
- fetch也是Promise
- fetch返回的结果是没有进行封装的,是直接暴露的
- fetch数据格式化的方式有哪些/
- json()
- text()
- blob() 格式化二进制 【 视频 图像 音频 】
fetch号称是AJAX的替代品,是在ES6出现的,使用了ES6中的promise对象。Fetch是基于promise设计的。Fetch的代码结构比起ajax简单多了,参数有点像jQuery ajax。但是,一定记住fetch不是ajax的进一步封装,而是原生js。Fetch函数就是原生js,没有使用XMLHttpRequest对象。
Vue axios 数据请求
1.axios它底层封装的Promise
2.axios会将我们请求的来的数据进行一层封装
3.axios提供的官网文档有些问题
axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded';//
new Vue({
el:'#app',
data:{
},
// 获取静态数据和动态数据的区别:静态数据获取一次,每次获取的结果是一样的;获取动态数据每次都会重新去调用获取的方法
methods: {
post(){//动态数据请求
const params=new URLSearchParams()
params.append('a',1)
params.append('b',2)
axios({
url:'http://localhost/post.php',
method:'POST',
data:params,
}).then(res=>console.log(res))
.catch(error=>console.log(error))
},
},
})
axios不是原生JS的,需要进行安装,它不但可以在客户端使用,也可以在nodejs端使用。Axios也可以在请求和响应阶段进行拦截。同样也是基于promise对象的。具体参照axios的概念
Axios的概念
axios 是一个基于 promise 的 HTTP 库,可以用在浏览器和 node.js 中。
特点:
从浏览器中创建 XMLHttpRequests
从 node.js 创建 http 请求
支持 Promise API
拦截请求和响应
转换请求数据和响应数据
取消请求
自动转换 JSON 数据
客户端支持防御 XSRF
上一篇: 前端样式汇总
下一篇: vue中style样式动态绑定