• js fetch


    Ajax是基于XMLHttpRequest 封装的网络请求API. XMLHttpRequest 并不是专为Ajax而设计的. 虽然各种框架对 XHR 的封装已经足够好用, 但我们可以做得更好。更好用的API是 fetch 。下面简单介绍 window.fetch 方法, 在最新版的 Firefox 和 Chrome 中已经提供支持。

    XMLHttpRequest

    使用XHR的方式大致如下:

    // 获取 XHR 非常混乱!
    if (window.XMLHttpRequest) { // Mozilla, Safari, ...
      request = new XMLHttpRequest();
    } else if (window.ActiveXObject) { // IE
      try {
        request = new ActiveXObject('Msxml2.XMLHTTP');
      } 
      catch (e) {
        try {
          request = new ActiveXObject('Microsoft.XMLHTTP');
        } 
        catch (e) {}
      }
    }
    
    // 打开连接, 发送数据.
    request.open('GET', 'https://davidwalsh.name/ajax-endpoint', true);
    request.send(null);

    我们可以看出, XHR 其实是很杂乱的; 当然, 通过 JavaScript 框架可以很方便地使用XHR。

    fetch 的基本使用

    // url (必须), options (可选)
    fetch('/some/url', {
        method: 'get'
    }).then(function(response) {
    
    }).catch(function(err) {
        // 出错了;等价于 then 的第二个参数,但这样更好用更直观 :(
    });

     fetch API 也使用了Promise来处理结果/回调

    自定义请求头信息极大地增强了请求的灵活性。我们可以通过 new Headers() 来创建请求头:

    // 创建一个空的 Headers 对象,注意是Headers,不是Header
    var headers = new Headers();
    
    // 添加(append)请求头信息
    headers.append('Content-Type', 'text/plain');
    headers.append('X-My-Custom-Header', 'CustomValue');
    
    // 判断(has), 获取(get), 以及修改(set)请求头的值
    headers.has('Content-Type'); // true
    headers.get('Content-Type'); // "text/plain"
    headers.set('Content-Type', 'application/json');
    
    // 删除某条请求头信息(a header)
    headers.delete('X-My-Custom-Header');
    
    // 创建对象时设置初始化信息
    var headers = new Headers({
        'Content-Type': 'text/plain',
        'X-My-Custom-Header': 'CustomValue'
    });

    可以使用的方法包括: append, has, get, set, 以及 delete 。需要创建一个 Request 对象来包装请求头:

    var request = new Request('/some-url', {
        headers: new Headers({
            'Content-Type': 'text/plain'
        })
    });
    
    fetch(request).then(function() { /* handle response */ });

     

    Request 简介

    Request 对象表示一次 fetch 调用的请求信息。传入 Request 参数来调用 fetch, 可以执行很多自定义请求的高级用法:

    • method - 支持 GETPOSTPUTDELETEHEAD
    • url - 请求的 URL
    • headers - 对应的 Headers 对象
    • referrer - 请求的 referrer 信息
    • mode - 可以设置 corsno-corssame-origin
    • credentials - 设置 cookies 是否随请求一起发送。可以设置: omitsame-origin
    • redirect - followerrormanual
    • integrity - subresource 完整性值(integrity value)
    • cache - 设置 cache 模式 (defaultreloadno-cache)

    Request 的示例如下:

    var request = new Request('/users.json', {
        method: 'POST', 
        mode: 'cors', 
        redirect: 'follow',
        headers: new Headers({
            'Content-Type': 'text/plain'
        })
    });
    
    // 使用!
    fetch(request).then(function() { /* handle response */ });

    只有第一个参数 URL 是必需的。在 Request 对象创建完成之后, 所有的属性都变为只读属性. 请注意, Request 有一个很重要的 clone 方法, 特别是在 Service Worker API 中使用时 —— 一个 Request 就代表一串流(stream), 如果想要传递给另一个 fetch 方法,则需要进行克隆。

    fetch 的方法签名(signature,可理解为配置参数), 和 Request 很像, 示例如下:

    fetch('/users.json', {
        method: 'POST', 
        mode: 'cors', 
        redirect: 'follow',
        headers: new Headers({
            'Content-Type': 'text/plain'
        })
    }).then(function() { /* handle response */ });

    Response 简介

    Response 代表响应, fetch 的 then 方法接收一个 Response 实例, 当然你也可以手动创建 Response 对象 —— 比如在 service workers 中可能会用到. Response 可以配置的参数包括:

    • type - 类型,支持: basiccors
    • url
    • useFinalURL - Boolean 值, 代表 url 是否是最终 URL
    • status - 状态码 (例如: 200404, 等等)
    • ok - Boolean值,代表成功响应(status 值在 200-299 之间)
    • statusText - 状态值(例如: OK)
    • headers - 与响应相关联的 Headers 对象.
    // 在 service worker 测试中手动创建 response
    // new Response(BODY, OPTIONS)
    var response = new Response('.....', {
        ok: false,
        status: 404,
        url: '/'
    });
    
    // fetch 的 `then` 会传入一个 Response 对象
    fetch('/')
        .then(function(responseObj) {
            console.log('status: ', responseObj.status);
        });

    Response 提供的方法如下:

    • 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).

    处理 JSON响应

    假设需要请求 JSON —— 回调结果对象 response 中有一个json()方法,用来将原始数据转换成 JavaScript 对象:

    fetch('https://davidwalsh.name/demo/arsenal.json').then(function(response) { 
        // 转换为 JSON
        return response.json();
    }).then(function(j) {
        // 现在, `j` 是一个 JavaScript object
        console.log(j); 
    });

    当然这很简单 , 只是封装了 JSON.parse(jsonString) 而已, 但 json 方法还是很方便的。

    处理基本的Text / HTML响应

    JSON 并不总是理想的请求/响应数据格式, 那么我们看看如何处理 HTML或文本结果:

    fetch('/next/page')
    .then(function(response) {
        return response.text();
    }).then(function(text) { 
        // 
    })

    处理Blob结果

    如果你想通过 fetch 加载图像或者其他二进制数据, 则会略有不同:

    fetch('flowers.jpg')
        .then(function(response) {
          return response.blob();
        })
        .then(function(imageBlob) {
          document.querySelector('img').src = URL.createObjectURL(imageBlob);
        });

    fetch 是个很实用的API , 当前还不允许取消请求, 这使得很多程序员暂时不会考虑它。

    新的 fetch API 比起 XHR 更简单也更智能。毕竟,它就是专为AJAX而设计的, 具有后发优势. 而我已经迫不及待地使用了, 即使现在兼容性还不是那么好!IE并不兼容fetch, 我在项目中也遇到这个问题在引用的fetch的地方引用 isomorphic-fetch 解决。

    默认不带 cookie

    原文链接:https://juejin.im/entry/574512b7c26a38006c43567c

  • 相关阅读:
    angular笔记_6
    angular笔记_5(全选/反选)
    angular笔记_4(函数)
    angular笔记_3
    angular笔记_2
    常用Sql语句
    IIS服务器环境下某路径下所有PHP接口无法运行报500.19错误
    #前端#文字、图像等元素居中方式之
    nginx如何设置禁止访问文件或文件夹
    git克隆和上传项目
  • 原文地址:https://www.cnblogs.com/syhx/p/9934123.html
Copyright © 2020-2023  润新知