fetch使用,ajax替代方案

更新日期: 2019-06-29阅读: 3.3k标签: fetch

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。


链接: https://fly63.com/article/detial/3921

Fetch -- http请求的另一种姿势

传统Ajax是利用XMLHttpRequest(XHR)发送请求获取数据,不注重分离的原则。而Fetch API是基于Promise设计,专为解决XHR问题而出现。fetch API看起来简单,却是js语法不断增强提高带来的改善。

JavaScript中fetch接口的用法使用

fetch就是XMLHttpRequest的一种替代方案。如果有人问你,除了Ajax获取后台数据之外,还有没有其他的替代方案?这是你就可以回答,除了XMLHttpRequest对象来获取后台的数据之外,还可以使用一种更优的解决方案fetch。

当fetch遇到302状态码,会发生什么?

当fetch遇到302状态码,会发生什么?fetch不能拦截302,浏览器会自动从302响应的头信息的重定向地址中取到数据。针对认证的情况,后端可以返回401状态码,让前端去检查返回的状态码并据此执行相应操作。

Fetch使用

Fetch API 提供了一个获取资源的接口(包括跨域请求)。任何使用 过 XMLHttpRequest 的人都能轻松上手,但新的API提供了更强大和 灵活的功能集。Fetch 提供了对 Request 和 Response (以及其他与网络请求有关的)对象的通用定义。

fetch使用的常见问题及其解决办法

fetch默认不携带cookie配置其 credentials 项,其有3个值:omit: 默认值,忽略cookie的发送;same-origin: 表示cookie只能同域发送,不能跨域发送;include: cookie既可以同域发送,也可以跨域发送

fetch API

fetch:一个获取资源的接口,类似于ajax,是基于 Promise之上设计,旧版本IE 完全不支持,须借助 polyfill来兼容,提供了对 Request 和 Response 对象的通用定义

TypeScript Fetch封装使用

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

通过fetch发送 post 请求下载文件

最近遇到一个下载的需求,由于 url 参数太长(常用的下载方法 a 标签或者 location.href 的方法都是 get 请求,get 请求参数长度有限制),无法下载,考虑了好几种方案,最终还是觉得通过 ajax 的 POST 方法进行下载,比较容易实现

Js中使用fetch进行异步请求

在 AJAX 时代,进行 API 等网络请求都是通过 XMLHttpRequest 或者封装后的框架进行网络请求。 现在产生的 fetch 框架简直就是为了提供更加强大、高效的网络请求而生,虽然在目前会有一点浏览器兼容的问题

Fetch API速查表:9个最常见的API请求

对于Fetch API我相信你已经用过它们很多次了,但是你是否还记得语法?如果能避免在旧项目中寻找半年前使用过的特定请求的语法,岂不更好?在本文中,我将列出9个最常见的Fetch API请求

点击更多...

内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!