源码 https://github.com/webabcd/Html5
作者 webabcd

万象更新 Html5 - es6 进阶: fetch

示例如下:

es6\src\advanced\fetch.js

/**
 * Fetch API - es6 的异步请求接口
 *
 * 注：
 * 1、fetch() 返回的是 Promise 对象
 * 2、fetch() 的跨域请求遵循 CORS 标准
 *
 * CORS - Cross-origin resource sharing（跨域请求）
 * 所谓的跨域就是协议不同，或者域名不同，或者端口号不同
 * 为了支持跨域请求需要服务端对 response header 做如下配置
 *     Access-Control-Allow-Origin: *       // 配置允许访问的域名（默认无法跨域访问）
 *     Access-Control-Allow-Headers: *      // 配置支持的自定义的 request header
 *     Access-Control-Request-Method: *     // 配置支持的 http method（跨域时默认只支持 head, get, post）
 *     Access-Control-Expose-Headers: *     // 配置有权限获取的 response header（跨域时默认只能获取到 Cache-Control, Content-Language, Content-Type, Expires, Last-Modified, Pragma）
 */

fetch('http://localhost:42858/fetch').then(res => {
    // 可以去控制台看看这个 response 对象具体是啥
    console.log('response:', res);

    // 拿到 http 请求响应的状态码
    const { status, statusText} = res;
    console.log(`status:${status}, statusText:${statusText}`);

    // 拿到 http 请求响应的 header
    console.log("Content-Type:" + res.headers.get('Content-Type'));

    // 获取响应数据，并将其转换为文本数据（这个是异步的，返回的是一个 Promise 对象）
    // res.text();
    // 获取响应数据，并将其转换为 json 对象（这个是异步的，返回的是一个 Promise 对象）
    // res.json();
    // 获取响应数据，并将其转换为 Binary Large Object（这个是异步的，返回的是一个 Promise 对象）
    // res.blob();
    // 获取响应数据，并将其转换为 ArrayBuffer 对象（这个是异步的，返回的是一个 Promise 对象）
    // res.arrayBuffer();
}, err => {
    console.log('error:' + err);
});


fetch('http://localhost:42858/fetch').then(res => res.json()).then(json => {
    // 拿到 http 请求响应的 json 数据
    console.log('json:', json);
}, err => {
    console.log('error:' + err);
});


// 自定义 http 请求的方法，请求的数据，请求的 header
fetch('http://localhost:42858/fetch', {
    method: 'POST',
    body: '{"name":"webabcd"}',
    headers: new Headers({
        'Content-Type': 'application/json'
    })
}).then(res => res.json()).then(json => {
    console.log('json:', json);
}, err => {
    console.log('error:' + err);
});


// 通过 async/await 获取 http 请求的响应数据
(async () => {
    try {
        let res = await fetch('http://localhost:42858/fetch');
        let json = await res.json();
        console.log('json:', json);
    } catch (err) {
        console.log('error:' + err);
    }
})();

WebApi\WebApi\ApiController.cs

using Microsoft.AspNetCore.Http;
using Microsoft.AspNetCore.Mvc;
using Microsoft.AspNetCore.SignalR;
using System;
using System.Collections.Generic;
using System.IO;
using System.Linq;
using System.Text;
using System.Threading;
using System.Threading.Tasks;

namespace WebApi
{
  public class ApiController : Controller
  {
    [Route("hello")]
    public IActionResult Hello()
    {
      return Content("hello webabcd", "text/plain", Encoding.UTF8);
    }

    [Route("get_long")]
    public async Task GetLong()
    {
      Response.Headers.Add("Access-Control-Allow-Origin", "*");
      Response.Headers.Add("Access-Control-Allow-Headers", "*");
      Response.Headers.Add("Access-Control-Request-Method", "*");
      Response.Headers.Add("Access-Control-Expose-Headers", "*");

      Response.ContentType = "text/html";
      Response.StatusCode = 200;
      Response.ContentLength = 10;

      for (int i = 0; i < 10; i++)
      {
        await Task.Delay(10);

        var content = "a";
        var data = Encoding.UTF8.GetBytes(content);
        await Response.Body.WriteAsync(data, 0, data.Length);
        await Response.Body.FlushAsync();
      }
    }

    [Route("jsonp")]
    public IActionResult Jsonp(string jsoncallback)
    {
      return Content(jsoncallback + "('hello jsonp');", "text/plain", Encoding.UTF8);
    }

    [Route("redirect")]
    public IActionResult Redirect()
    {
      return Redirect("https://www.cnblogs.com/webabcd/");
    }

    [Route("fetch")]
    public IActionResult Fetch()
    {
      Response.Headers.Add("Access-Control-Allow-Origin", "*");
      Response.Headers.Add("Access-Control-Allow-Headers", "*");

      return Content("{ \"name\": \"webabcd\" }", "application/json", Encoding.UTF8);
    }
  }
}

源码 https://github.com/webabcd/Html5
作者 webabcd