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，程序之路，让咱们一起摸索，共同进步。