对比AJAX,fetch方法更省心丨技术开发分享录

对比AJAX,fetch方法更省心

{{ detail.nickname }}

转载 翻译 {{ formatTime(detail.create_time) }} 字数 {{ detail.content && detail.content.length }} 阅读 {{ detail.read_num }} {{ formatTag(v) }}

"Fetch API 提供了一个 JavaScript 接口,用于访问和操纵 HTTP 管道的一些具体部分,例如请求和响应。它还提供了一个全局 fetch() 方法,该方法提供了一种简单,合理的方式来跨网络异步获取资源。\n\n如果一直使用ajax/axios腻歪了,可以尝试下`fetch()`方法。\n\n## 一、fetch与ajax的区别\n\n1. 当接收到一个代表错误的 HTTP 状态码时,从 `fetch()` 返回的 `Promise` 不会被标记为 `reject`, 即使响应的 HTTP 状态码是 404 或 500。相反,它会将 `Promise` 状态标记为 `resolve` (但是会将 resolve 的返回值的 ok 属性设置为 false ),仅当网络故障时或请求被阻止时,才会标记为 `reject`。\n2. `fetch()` 可以接受跨域 `cookies`;你也可以使用 `fetch()` 建立起跨域会话。\n3. `fetch` 不会发送 `cookies`。除非你使用了`credentials` 的初始化选项。(自 2017 年 8 月 25 日以后,默认的 `credentials` 政策变更为 `same-origin`。Firefox 也在 61.0b13 版本中进行了修改)\n\n\n## 二、请求json数据\n\n```\nfetch('http://example.com/movies.json')\n  .then(function(response) {\n    return response.json();\n  })\n  .then(function(myJson) {\n    console.log(myJson);\n  });\n```\n\n## 三、post提交数据\n\n```\npostData('http://example.com/answer', {answer: 42})\n  .then(data => console.log(data)) // JSON from `response.json()` call\n  .catch(error => console.error(error))\n\nfunction postData(url, data) {\n  return fetch(url, {\n    body: JSON.stringify(data), // must match 'Content-Type' header\n    cache: 'no-cache', // *default, no-cache, reload, force-cache, only-if-cached\n    credentials: 'same-origin', // include, same-origin, *omit\n    headers: {\n      'user-agent': 'Mozilla/4.0 MDN Example',\n      'content-type': 'application/json'\n    },\n    method: 'POST', // *GET, POST, PUT, DELETE, etc.\n    mode: 'cors', // no-cors, cors, *same-origin\n    redirect: 'follow', // manual, *follow, error\n    referrer: 'no-referrer', // *client, no-referrer\n  })\n  .then(response => response.json()) // parses response to JSON\n}\n```\n\n## 四、发送带凭据的请求\n\n```\nfetch('https://example.com', {\n  credentials: 'include'\n})\n```\n\n- include:包含凭据\n- same-origin:同源发送凭据\n- omit:不发送凭据\n\n## 五、上传json数据\n\n```\nvar url = 'https://example.com/profile';\nvar data = {username: 'example'};\n\nfetch(url, {\n  method: 'POST', // or 'PUT'\n  body: JSON.stringify(data), // data can be `string` or {object}!\n  headers: new Headers({\n    'Content-Type': 'application/json'\n  })\n}).then(res => res.json())\n.catch(error => console.error('Error:', error))\n.then(response => console.log('Success:', response));\n```\n\n## 六、上传文件\n\n### 1、上传单个文件\n\n可以通过 HTML `<input type=\"file\" />` 元素,FormData() 和 fetch() 上传文件。\n\n```\nvar formData = new FormData();\nvar fileField = document.querySelector(\"input[type='file']\");\n\nformData.append('username', 'abc123');\nformData.append('avatar', fileField.files[0]);\n\nfetch('https://example.com/profile/avatar', {\n  method: 'PUT',\n  body: formData\n})\n.then(response => response.json())\n.catch(error => console.error('Error:', error))\n.then(response => console.log('Success:', response));\n```\n\n### 2、上传多个文件\n\ninput标签需要添加 `mutiple` 属性,`<input type=\"file\" mutiple/>`\n\n```\nvar formData = new FormData();\nvar photos = document.querySelector(\"input[type='file'][multiple]\");\n\nformData.append('title', 'My Vegas Vacation');\n// formData 只接受文件、Blob 或字符串,不能直接传递数组,所以必须循环嵌入\nfor (let i = 0; i < photos.files.length; i++) {\n    formData.append('photo', photos.files[i]);\n}\n\nfetch('https://example.com/posts', {\n  method: 'POST',\n  body: formData\n})\n.then(response => response.json())\n.then(response => console.log('Success:', JSON.stringify(response)))\n.catch(error => console.error('Error:', error));\n```\n\n## 七、检查请求是否成功\n\n```\nfetch('girl.jpg').then(function(response) {\n  if(response.ok) {\n    return response.blob();\n  }\n  throw new Error('Network response was not ok.');\n}).then(function(myBlob) {\n  var objectURL = URL.createObjectURL(myBlob);\n  myImage.src = objectURL;\n}).catch(function(error) {\n  console.log('There has been a problem with your fetch operation: ', error.message);\n});\n```\n\n## 八、自定义请求对象\n\n这里通过使用 `Request()` 构造函数来创建一个 `request` 对象,然后再作为参数传给 `fetch()`\n\n```\nvar myHeaders = new Headers();\n\nvar myInit = { method: 'GET',\n               headers: myHeaders,\n               mode: 'cors',\n               cache: 'default' };\n\nvar myRequest = new Request('girl.jpg', myInit);\n\nfetch(myRequest).then(function(response) {\n  return response.blob();\n}).then(function(myBlob) {\n  var objectURL = URL.createObjectURL(myBlob);\n  myImage.src = objectURL;\n});\n```\n\n## 九、header操作\n\n### 1、多名值对\n\n```\nvar content = \"Hello World\";\nvar myHeaders = new Headers();\nmyHeaders.append(\"Content-Type\", \"text/plain\");\nmyHeaders.append(\"Content-Length\", content.length.toString());\nmyHeaders.append(\"X-Custom-Header\", \"ProcessThisImmediately\");\n```\n\n### 2、对象字面量\n\n```\nvar myHeaders = new Headers({\n  \"Content-Type\": \"text/plain\",\n  \"Content-Length\": content.length.toString(),\n  \"X-Custom-Header\": \"ProcessThisImmediately\",\n});\n```\n\n### 3、内空操作\n\n```\n// 判断\nconsole.log(myHeaders.has(\"Content-Type\")); // true\nconsole.log(myHeaders.has(\"Set-Cookie\")); // false\n\n// 设置与追加\nmyHeaders.set(\"Content-Type\", \"text/html\");\nmyHeaders.append(\"X-Custom-Header\", \"AnotherValue\");\n\nconsole.log(myHeaders.get(\"Content-Length\")); // 11\nconsole.log(myHeaders.getAll(\"X-Custom-Header\")); // [\"ProcessThisImmediately\", \"AnotherValue\"]\n\n// 删除\nmyHeaders.delete(\"X-Custom-Header\");\nconsole.log(myHeaders.getAll(\"X-Custom-Header\")); // [ ]\n```\n\n## 十、Response 对象\n\n```\nvar myBody = new Blob();\n\naddEventListener('fetch', function(event) {\n  event.respondWith(new Response(myBody, {\n    headers: { \"Content-Type\" : \"text/plain\" }\n  });\n});\n```\n\n- Response.status — 整数(默认值为200)为response的状态码。\n- Response.statusText — 字符串(默认值为\"OK\"),该值与 HTTP 状态码消息对应。\n- Response.ok — 如上所示,该属性是来检查response的状态是否在 200 - 299(包括200 和 299)这个范围内。该属性返回一个布尔值 (en-US)。\n\n## 十一、Body\n\n不管是请求还是响应都能够包含 body 对象。body 也可以是以下任意类型的实例。\n\n- ArrayBuffer\n- ArrayBufferView (Uint8Array等)\n- Blob/File\n- string\n- URLSearchParams\n- FormData\n\nBody 类定义了以下方法(这些方法都被 Request 和Response所实现)以获取 body 内容。这些方法都会返回一个被解析后的Promise (en-US)对象和数据。\n\n- arrayBuffer()\n- blob()\n- json()\n- text()\n- formData()"
PS:写作不易,如要转裁,请标明转载出处。

如果此篇对您有帮助,可小额赞助,以兹鼓励!

猜你想看