ajax和fetch (前后端交互的媒介）

ajax

步骤：
1.创建一个xmlhttprequest实例
2.发出http请求
3.接收服务器传回来的数据
4.更新网页上面的数据

优缺点：

• 本身是针对MVC的编程,不符合现在前端MVVM的浪潮

• 基于原生的XHR开发，XHR本身的架构不清晰，已经有了fetch的替代方案

• JQuery整个项目太大，单纯使用ajax却要引入整个JQuery非常的不合理（采取个性化打包的方案又不能享受CDN服务）

<script>
    let xhr = new XMLHttpRequest();
    xhr.onreadystatechange = function(){
    
        // 0 表示实例方法已经生成，open方法未调用
        // 1 表示open已调用，但是send未调用
        // 2 表示send已调用，并且返回了头信息和状态码，但是未返回数据体
        // 3表示已开始接收数据体，但是未接收完
        // 4 表示已经完整的接收了数据体
        
        if (xhr.readystate === 4){
            if (xhr.status === 200){
            
                // 200 服务器正常
                // 301 永久移动
                // 302 暂时移动
                // 304 未修改
                // 307 暂时重定向
                // 401 未授权
                // 403 禁止访问
                // 404 未发现指定网址
                // 500 服务器错误
                
                console.log(xhr.responseText)
            }else{
                console.log(xhr.statusText)
            }
        }

    }
    xhr.onerror = function(){
        console.error(xhr.statusText)
    }
    xhr.open("GET",url,true)
    xhr.send(null)

fetch

它的API是基于Promise设计的，旧版本的浏览器不支持 Promise，需要使用 polyfill es6-promise

优缺点：

• 符合关注分离，没有将输入、输出和用事件来跟踪的状态混杂在一个对象里

• 更好更方便的写法

• 更加底层，提供的API丰富（request, response）

• 脱离了XHR，是ES规范里新的实现方式

1）fetchtch只对网络请求报错，对400，500都当做成功的请求，需要封装去处理

3）fetch不支持abort，不支持超时控制，使用setTimeout及Promise.reject的实现的超时控制并不能阻止请求过程继续在后台运行，造成了量的浪费

4）fetch没有办法原生监测请求的进度，而XHR可以

fetch(url).then(res=>{return(res.json())}).then(console.log(myjson))

fetch采用了Promise的异步处理机制

ES6 Promises使用一个Promise对象来代表一个异步操作，

Promise包含如下三种状态：

fulfilled：操作成功，then()方法的onFulfilled函数被调用。
rejected：操作失败，then()方法的onRejected函数被调用。
pending：初始状态，可能触发fulfilled或rejected状态中的一种。

最后

以上就是沉默蜗牛为你收集整理的ajax和fetch (前后端交互的媒介）的全部内容，希望文章能够帮你解决ajax和fetch (前后端交互的媒介）所遇到的程序开发问题。

如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。