数据请求的四种方式

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

你可能感兴趣的:(JavaScript)