欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

数据请求的四种方式

程序员文章站 2022-05-15 18:25:18
...

ajax 原生数据请求
ajax自然不必说,最早出现的发送后端请求技术,隶属于原始js中,核心使用XMLHttpRequest对象,多个请求之间如果有先后关系的话,就会出现回调地狱。
后面ajax封装可以使用基于promise来封装

jquery中的ajax 数据请求
是jQuery框架中的发送后端请求技术,由于jQuery是基于原始的基础上做的封装,所以,jquery Ajax自然也是原始ajax的封装

fetch 数据请求

  1. fetch是原生javascript提供的,我们可以直接向全局变量一样使用
  2. fetch也是Promise
  3. fetch返回的结果是没有进行封装的,是直接暴露的
  4. 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