fetch使用，ajax替代方案

liaorio 发布于2019-08-23 18:23 / 2396人阅读

摘要：设置通过属性或者方法都可以属性形式传一个多维数组或者对象字面量方法形式坑当接收到一个代表错误的状态码时，从返回的不会被标记为，即使该响应的状态码是或。

fetch简介

Fetch 提供了一个 JavaScript接口，用于访问和操纵HTTP管道的部分，例如请求和响应。它还提供了一个全局 fetch()方法，该方法提供了一种简单，合理的方式来跨网络异步获取资源。

这种功能以前是使用 XMLHttpRequest实现的，Fetch提供了一个更好的替代方法

Fetch API 是基于 Promise 设计，使用了Promises 来处理结果/回调。旧浏览器不支持 Promise，需要使用 polyfill es6-promise 。

简单实现

    fetch("http://192.168.43.169:8099/someInfo",{
        method: "post",
    })
    .then(res=>{
        console.log(response)     // 包含响应结果的promise，只是一个 HTTP 响应，而不是真的JSON
        return response.json();          
    })
    .then(res=>{
       console.log(res)     //js格式的json对象
    })

async await实现更方便

    const fetchRequest = async () => {
        let response = await fetch("http://192.168.43.169:8099/teacher/resume", {
            method: "post",
        })
        let data = await response.json()
        console.log(data);    //js格式的json对象
    }
    fetchRequest()

Response 对象

属性：

status：整数(默认值为200) 为response的状态码

statusText：字符串(默认值为"OK"),该值与HTTP状态码消息对应.

ok：如上所示, 该属性是来检查response的状态是否在200-299(包括200,299)这个范围内.该属性返回一个Boolean值.

方法：处理包含返回结果的promise对象的数据

例如  response.json()

处理包含json结果的promise对象

clone() - 创建一个新的 Response 克隆对象.

error() - 返回一个新的,与网络错误相关的 Response 对象.

redirect() - 重定向,使用新的 URL 创建新的 response 对象..

arrayBuffer() - Returns a promise that resolves with an + ArrayBuffer.

blob() - 返回一个 promise, resolves 是一个 Blob.

formData() - 返回一个 promise, resolves 是一个 FormData 对象.

json() - 返回一个 promise, resolves 是一个 JSON 对象.

text() - 返回一个 promise, resolves 是一个 USVString (text).

Request对象

创建request对象

    request = new Request()

属性：

method：支持 GET, POST, PUT, DELETE, HEAD

url：请求的 URL

headers：对应的 Headers 对象

referrer：请求的 referrer 信息

mode：可以设置 cors, no-cors, same-origin

credentials：设置 cookies 是否随请求一起发送。可以设置: omit, same-origin

redirect：follow, error, manual

integrity：subresource 完整性值(integrity value)

cache：设置 cache 模式 (default, reload, no-cache)

    let request = new Request("http://192.168.43.169:8099/teacher/resume",{
        method: "post",
        headers: new Headers({
            "Content-Type": "text/plain"
        })
    })
    
    fetch(request)
    .then(res=>{
        console.log(res);
        return res.json();
    })
    .then(res=>{
       console.log(res)
    })

header

创建header对象

    let headers = new Headers();

headers方法：

Headers.append()：给现有的header添加一个值, 或者添加一个未存在的header并赋值.

Headers.delete()：从Headers对象中删除指定header.

Headers.entries()：以迭代器的形式返回Headers对象中所有的键值对.

Headers.get()：以 ByteString 的形式从Headers对象中返回指定header的全部值.

Headers.has()：以布尔值的形式从Headers对象中返回是否存在指定的header.

Headers.keys()：以迭代器的形式返回Headers对象中所有存在的header名.

Headers.set()：替换现有的header的值, 或者添加一个未存在的header并赋值.

Headers.values()：以迭代器的形式返回Headers对象中所有存在的header的值.

Headers.getAll()：用于返回具有给定名称的 Headers 对象中所有值的数组; 这个方法现在已经从规范中删除了，Headers.get() 方法现在返回所有的值而不是一个。

设置header通过属性或者方法都可以

属性形式：传一个多维数组或者对象字面量

    Header = new Headers({
      "Content-Type": "text/plain",
      "Content-Length": content.length.toString(),
      "X-Custom-Header": "ProcessThisImmediately",
    });

方法形式：

    var Header = new Headers();
    Header.append("Content-Type", "text/plain");
    Header.append("Content-Length", content.length.toString());
    Header.append("X-Custom-Header", "ProcessThisImmediately");

fetch坑

当接收到一个代表错误的 HTTP 状态码时，从 fetch()返回的 Promise 不会被标记为 reject，即使该 HTTP 响应的状态码是 404 或 500。相反，它会将 Promise 状态标记为 resolve （但是会将 resolve 的返回值的 ok 属性设置为 false ），仅当网络故障时或请求被阻止时，才会标记为 reject。

Fetch 请求默认是不带 cookie 的，需要设置 fetch(url, {credentials: "include"})

不能中断，没有 abort、terminate、onTimeout 或 cancel 方法Fetch 和 Promise 一样，一旦发起，不能中断，也不会超时，只能等待被 resolve 或 reject。

GPU云服务器云服务器 webrtc的替代方案堡垒机替代解决方案 ajax使用方法 js ajax跨域解决方案

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/105139.html

Jquery ajax, Axios, Fetch区别之我见

摘要：我们都知道因为同源策略的问题，浏览器的请求是可能随便跨域的一定要有跨域头或者借助，但是，中可以设置为不跨域，如下所示这样之后我们会得到一个为的返回。免费帮忙内推阿里等各大IT公司的岗位，有兴趣可以带简历加微信angeltune 引言前端技术真是一个发展飞快的领域，我三年前入职的时候只有原生XHR和Jquery ajax，我们还曾被JQuery 1.9版本版本以下不支持大文件请求这个...

YanceyOfficial 2019-08-22 13:49 评论0 收藏0
全面分析前端的网络请求方式

摘要：请求默认会携带同源请求的，而跨域请求则不会携带，设置的的属性为将允许携带跨域。类型请求成功后的回调函数。另外，同样提供了在环境下的支持，可谓是网络请求的首选方案。当网络故障时或请求被阻止时，才会标记为，如跨域不存在，网络异常等会触发。一、前端进行网络请求的关注点大多数情况下，在前端发起一个网络请求我们只需关注下面几点：传入基本参数（url，请求方式）请求参数、请求参数类型设...

Edison 2019-08-23 16:27 评论0 收藏0
只知道ajax？你已经out了

摘要：所以本文将介绍两个目前常用的获取服务器数据的库和。随着作者尤雨溪发布消息，不再继续维护并推荐大家使用开始，进入了很多人的目光。脱离了，是基于设计。如果要详细了解的应用，推荐阅读教程和规范。欢迎大家前往腾讯云+社区，获取更多腾讯海量技术实践干货哦~ 本文由前端林子发表于云+社区专栏随着前端技术的发展，请求服务器数据的方法早已不局限于ajax、jQuery的ajax方法。各种js库已如雨后...

Steven 2019-04-23 13:10 评论0 收藏0
传统 Ajax 已死，Fetch 永生

摘要：结果证明，对于以上浏览器，在生产环境使用是可行的。后面可以跟对象，表示等待才会继续向下执行，如果被或抛出异常则会被外面的捕获。，，都是现在和未来解决异步的标准做法，可以完美搭配使用。这也是使用标准一大好处。只允许外部传入成功或失败后的回调。 showImg(https://cloud.githubusercontent.com/assets/948896/10188666/bc9a53...

fai1017 2019-08-21 10:41 评论0 收藏0
JavaScript fetch接口

摘要：的案例下面我们来写第一个获取后端数据的例子通过获取百度的错误提示页面返回一个对象是一个对象是最终的结果请求请求初步完成了，这个时候就要来认识一下请求如何处理了。 JavaScript fetch接口如果看网上的fetch教程，会首先对比XMLHttpRequest和fetch的优劣，然后引出一堆看了很快会忘记的内容(本人记性不好)。因此，我写一篇关于fetch的文章，为了自己看着方便...

Sanchi 2019-08-29 16:33 评论0 收藏0