乐趣区

关于ajax:fetch是怎么取代ajax的

jiezi

fetch 简介

  • Fetch API 提供了一个 JavaScript 接口，用于拜访和操纵 HTTP 管道的一些具体局部，例如申请和响应。它还提供了一个全局 fetch() 办法，该办法提供了一种简略，正当的形式来跨网络异步获取资源。
  • 这种性能以前是应用 XMLHttpRequest 实现的。Fetch 提供了一个更现实的代替计划，能够很容易地被其余技术应用，例如 Service Workers (en-US)。Fetch 还提供了专门的逻辑空间来定义其余与 HTTP 相干的概念，例如 CORS 和 HTTP 的扩大。

fetch 标准与 jQuery.ajax() 次要有三种形式的不同

当接管到一个代表谬误的 HTTP 状态码时，从 fetch() 返回的 Promise 不会被标记为 reject，即便响应的 HTTP 状态码是 404 或 500。相同，它会将 Promise 状态标记为 resolve（然而会将 resolve 的返回值的 ok 属性设置为 false），仅当网络故障时或申请被阻止时，才会标记为 reject。
fetch() 能够不会承受跨域 cookies；你也能够不能应用 fetch() 建设起跨域会话。其余网站的 Set-Cookie 头部字段将会被忽视。
fetch 不会发送 cookies。除非你应用了 credentials 的初始化选项。（自 2017 年 8 月 25 日当前，默认的 credentials 政策变更为 same-origin。Firefox 也在 61.0b13 版本中进行了批改）

———— 以上不同来自官网

集体感觉它绝对比 ajax 构造要清晰，在 then 中首先是解决 response , 而后是 response 外部也提供了数据 json 格式化（response.json()）; 还有一点 它更像面向对象的编程了，一位 request/Headers 能够实例化对象, 并配置属性。
例如：


var myHeaders = new Headers();

myHeaders.append("Content-Type", "text/plain");
像 response 也提供较丰盛的 api：

非浏览器外面应用 Fetch

如果要在不反对的浏览器中应用 Fetch，能够应用 Fetch Polyfill，这个就是 typescripe 的规范，下载 npm 进行装置 fetch 环境即可应用

浏览器的兼容性

封装 fetch

调用封装的 fetch

这部分发现返回的响应体必须是个 json 格局，单纯的字符串 数值等 会呈现问题 

    // 获取列表信息
        function getList(){F_Request.getRequest('http://localhost:8080/list', null, function(data) {document.getElementById("content").innerText = JSON.stringify(data);
                console.log(data);
            }, function(error) {console.log(error);
            });
            
        }

        // 上传申请
        function uploadFile() {
            //upload 是 name 值  file 是后盾接管 参数的值
            F_Request.uploadFileRequest("upload","file", {
                userName: '李四',
                age: 15
            }, 'http://localhost:8080/uploadMul', null, function(data) {console.log("上传胜利:");
                console.log(data);
            }, function(error) {console.log("上传失败");
            });
        }

集体封装的 fetch(get 和 post 申请 曾经验证过，包含多文件上传，也有 java 的局部后盾代码)


var F_Request = {getRequest: function(url, initParams, successFunc = null, errorFunc = null) {
        /**
         * get 申请
         */
        initParams = initParams ? initParams : {};
        initParams = Object.assign(initParams, {method: "GET"});
        this.RequestData(url, initParams, successFunc, errorFunc);
    },
    postRequest: function(url, initParams, successFunc = null, errorFunc = null) {initParams = initParams ? initParams : {};
        initParams = Object.assign(initParams, {method: "POST"});
        this.RequestData(url, initParams, successFunc, errorFunc);
    },
    putRequest: function(url, initParams, successFunc = null, errorFunc = null) {
        //put 申请
        initParams = initParams ? initParams : {};
        initParams = Object.assign(initParams, {method: "PUT"});
        this.RequestData(url, initParams, successFunc, errorFunc);
    },
    uploadFileRequest: function(fileName = "upload", fileKey = "file", otherParams = {}, url, initParams,
        successFunc = null, errorFunc = null) {// 上传文件 [ 反对多个文件上传]

        var formData = new FormData();
        var photos = document.querySelector("input[name='" + fileName + "'][multiple]");

        for (var param in otherParams) {formData.append(param, otherParams[param]);
        }

        // formData 只承受文件、Blob 或字符串，不能间接传递数组，所以必须循环嵌入
        for (let i = 0; i < photos.files.length; i++) {formData.append(fileKey, photos.files[i]);
        }


        initParams = initParams ? initParams : {};
        initParams.body = formData;
        initParams.method = initParams.method ? initParams.method : "POST";

        this.postRequest(url, initParams, successFunc, errorFunc);
    },
    deleteRequest: function(url, initParams, successFunc = null, errorFunc = null) {
        /**
         * delete 申请
         */
        initParams = initParams ? initParams : {};
        initParams = Object.assign(initParams, {method: "DELETE"});
        this.RequestData(url, initParams, successFunc, errorFunc);
    },
    RequestData: function (url, initParams, successFunc = null, errorFunc = null) {

        /**
         * 申请实现办法
         */
        var defaultInitParams = {
            cache: 'no-cache', // *default, no-cache, reload, force-cache, only-if-cached
            credentials: 'same-origin', // include (发送带凭据的申请), same-origin, *omit 
            /* headers: {
                'user-agent': 'Mozilla/4.0 MDN Example',
                'content-type': 'application/json'
            }, */
            method: 'GET', // *GET, POST, PUT, DELETE, etc.
            //mode: 'cors', // no-cors, cors, *same-origin
            redirect: 'follow', // manual, *follow, error
            referrer: 'no-referrer', // *client, no-referrer
        };

        // 如果申请办法为 GET 和 HEAD 就去除 body 信息
        if (defaultInitParams.method == 'GET' || defaultInitParams.method == 'HEAD') {delete defaultInitParams.method;}

        if (initParams.method == 'GET' || initParams.method == 'HEAD') {delete initParams.method;}


        defaultInitParams = Object.assign(defaultInitParams, initParams);

        fetch(url, defaultInitParams)
            .then(function(response) {
                // 先只解决响应状态失常的
                if (response.status === 200) {return response.json();
                }
                return {error: 300};
            }).then(function(response) {
                // 并没有返回信息
                if (response.error == 300) {console.log("--- 请查看 fetch 的相干配置是否有问题 ---");
                    return;
                }

                if (typeof(successFunc) == "function") {successFunc(response);
                }

            }).catch(function(error) {if (typeof(errorFunc) == "function") {errorFunc(error)
                }
            });

    }

}

残缺代码

欢送关注我的公众号：程序员 ken，程序之路，让咱们一起摸索，共同进步。

退出移动版