ES6 课程概述⑤

9-1. Fetch Api 概述

XMLHttpRequest 的问题

1. 所有的功能全部集中在同一个对象上，容易书写出混乱不易维护的代码
2. 采用传统的事件驱动模式，无法适配新的 Promise Api

Fetch Api 的特点

1. 并非取代 AJAX，而是对 AJAX 传统 API 的改进
2. 精细的功能分割：头部信息、请求信息、响应信息等均分布到不同的对象，更利于处理各种复杂的 AJAX 场景
3. 使用 Promise Api，更利于异步代码的书写
4. Fetch Api 并非 ES6 的内容，属于 HTML5 新增的 Web Api
5. 需要掌握网络通信的知识

9-2. 基本使用

请求测试地址：http://101.132.72.36:5100/api/local

使用 fetch 函数即可立即向服务器发送网络请求

<button>得到所有的省份数据</button>
<script>
  async function getProvinces() {
    const url = "http://101.132.72.36:5100/api/local";
    const resp = await fetch(url);
    const result = await resp.json();
    console.log(result);
  }

  document.querySelector("button").onclick = function () {
    getProvinces();
  };
</script>

参数

该函数有两个参数：

1. 必填，字符串，请求地址
2. 选填，对象，请求配置

请求配置对象

• method：字符串，请求方法，默认值 GET

• headers：对象，请求头信息

• body: 请求体的内容，必须匹配请求头中的 Content-Type
  get 请求放在地址 url 上面
  post

• mode：字符串，请求模式

  • cors：默认值，配置为该值，会在请求头中加入 origin 和 referer
  • no-cors：配置为该值，不会在请求头中加入 origin 和 referer，跨域的时候可能会出现问题
  • same-origin：指示请求必须在同一个域中发生，如果请求其他域，则会报错

• credentials: 如何携带凭据（cookie）

  • omit：默认值，不携带 cookie
  • same-origin：请求同源地址时携带 cookie
  • include：请求任何地址都携带 cookie

• cache：配置缓存模式

  • default: 表示 fetch 请求之前将检查下 http 的缓存.
  • no-store: 表示 fetch 请求将完全忽略 http 缓存的存在. 这意味着请求之前将不再检查下 http 的缓存, 拿到响应后, 它也不会更新 http 缓存.
  • no-cache: 如果存在缓存, 那么 fetch 将发送一个条件查询 request 和一个正常的 request, 拿到响应后, 它会更新 http 缓存.
  • reload: 表示 fetch 请求之前将忽略 http 缓存的存在, 但是请求拿到响应后, 它将主动更新 http 缓存.
  • force-cache: 表示 fetch 请求不顾一切的依赖缓存, 即使缓存过期了, 它依然从缓存中读取. 除非没有任何缓存, 那么它将发送一个正常的 request.
  • only-if-cached: 表示 fetch 请求不顾一切的依赖缓存, 即使缓存过期了, 它依然从缓存中读取. 如果没有缓存, 它将抛出网络错误(该设置只在 mode 为”same-origin”时有效).

返回值

fetch 函数返回一个 Promise 对象

• 当收到服务器的返回结果后，Promise 进入 resolved 状态，状态数据为 Response 对象
• 当网络发生错误（或其他导致无法完成交互的错误）时，Promise 进入 rejected 状态，状态数据为错误信息

9-3 Response 对象

• ok：boolean，当响应消息码在 200~299 之间时为 true，其他为 false
• status：number，响应的状态码
• text()：用于处理文本格式的 Ajax 响应
• blob()：用于处理二进制文件格式（比如图片或者电子表格）的 Ajax 响应。它读取文件的原始数据，一旦读取完整个文件，就返回一个被解决为 blob 对象的 Promise。
• json()：用于处理 JSON 格式的 Ajax 的响应。它将 JSON 数据流转换为一个被解决为 JavaScript 对象的 promise。
• redirect()：可以用于重定向到另一个 URL。它会创建一个新的 Promise，以解决来自重定向的 URL 的响应。

9-4 Request 对象

除了使用基本的 fetch 方法，还可以通过创建一个 Request 对象来完成请求（实际上，fetch 的内部会帮你创建一个 Request 对象）

new Request(url地址, 配置);

注意点：

尽量保证每次请求都是一个新的 Request 对象

9-5 Headers 对象

在 Request 和 Response 对象内部，会将传递的请求头对象，转换为 Headers

Headers 对象中的方法：

• has(key)：检查请求头中是否存在指定的 key 值
• get(key): 得到请求头中对应的 key 值
• set(key, value)：修改对应的键值对
• append(key, value)：添加对应的键值对
• keys(): 得到所有的请求头键的集合
• values(): 得到所有的请求头中的值的集合
• entries(): 得到所有请求头中的键值对的集合

9-6 文件上传

流程：

1. 客户端将文件数据发送给服务器
2. 服务器保存上传的文件数据到服务器端
3. 服务器响应给客户端一个文件访问地址

测试地址：http://101.132.72.36:5100/api/upload
键的名称（表单域名称）：imagefile

请求方法：POST
请求的表单格式：multipart/form-data
请求体中必须包含一个键值对，键的名称是服务器要求的名称，值是文件数据

HTML5 中，JS 仍然无法随意的获取文件数据，但是可以获取到 input 元素中，被用户选中的文件数据
可以利用 HTML5 提供的 FormData 构造函数来创建请求体

10-1 迭代器

背景知识

1. 什么是迭代？

从一个数据集合中按照一定的顺序，不断取出数据的过程

2. 迭代和遍历的区别？

迭代强调的是依次取数据，并不保证取多少，也不保证把所有的数据取完

遍历强调的是要把整个数据依次全部取出

3. 迭代器

对迭代过程的封装，在不同的语言中有不同的表现形式，通常为对象

4. 迭代模式

一种设计模式，用于统一迭代过程，并规范了迭代器规格：

• 迭代器应该具有得到下一个数据的能力
• 迭代器应该具有判断是否还有后续数据的能力

JS 中的迭代器

JS 规定，如果一个对象具有 next 方法，并且该方法返回一个对象，该对象的格式如下：

{value: 值, done: 是否迭代完成}

则认为该对象是一个迭代器

含义：

• next 方法：用于得到下一个数据
• 返回的对象
  • value：下一个数据的值
  • done：boolean，是否迭代完成

const arr = [1, 2, 3, 4, 5];
//迭代数组arr
const iterator = {
  i: 0, //当前的数组下标
  next() {
    var result = {
      value: arr[this.i],
      done: this.i >= arr.length,
    };
    this.i++;
    return result;
  },
};

//让迭代器不断的取出下一个数据，直到没有数据为止
let data = iterator.next();
while (!data.done) {
  //只要没有迭代完成，则取出数据
  console.log(data.value);
  //进行下一次迭代
  data = iterator.next();
}

console.log("迭代完成");

可迭代协议 与 for-of 循环

可迭代协议

概念回顾

• 迭代器(iterator)：一个具有 next 方法的对象，next 方法返回下一个数据并且能指示是否迭代完成
• 迭代器创建函数（iterator creator）：一个返回迭代器的函数

const arr1 = [1, 2, 3, 4, 5];
const arr2 = [6, 7, 8, 9];

// 迭代器创建函数  iterator creator
function createIterator(arr) {
  let i = 0; //当前的数组下标
  return {
    next() {
      var result = {
        value: arr[i],
        done: i >= arr.length,
      };
      i++;
      return result;
    },
  };
}

const iter1 = createIterator(arr1);
const iter2 = createIterator(arr2);

可迭代协议

ES6 规定，如果一个对象具有知名符号属性Symbol.iterator，并且属性值是一个迭代器创建函数，则该对象是可迭代的（iterable）

思考：如何知晓一个对象是否是可迭代的？
思考：如何遍历一个可迭代对象？

for-of 循环

for-of 循环用于遍历可迭代对象，格式如下

//迭代完成后循环结束
for (const item in iterable) {
  //iterable：可迭代对象
  //item：每次迭代得到的数据
}

展开运算符与可迭代对象

展开运算符可以作用于可迭代对象，这样，就可以轻松的将可迭代对象转换为数组。

var obj = {
  a: 1,
  b: 2,
  [Symbol.iterator]() {
    const keys = Object.keys(this);
    let i = 0;
    return {
      next: () => {
        const propName = keys[i];
        const propValue = this[propName];
        const result = {
          value: {
            propName,
            propValue,
          },
          done: i >= keys.length,
        };
        i++;
        return result;
      },
    };
  },
};

const arr = [...obj];
console.log(arr);

function test(a, b) {
  console.log(a, b);
}

test(...obj);

生成器 (Generator)

1. 什么是生成器？

生成器是一个通过构造函数 Generator 创建的对象，生成器既是一个迭代器，同时又是一个可迭代对象

2. 如何创建生成器？

生成器的创建，必须使用生成器函数（Generator Function）

3. 如何书写一个生成器函数呢？

//这是一个生成器函数，该函数一定返回一个生成器
function* method() {}

4. 生成器函数内部是如何执行的？

生成器函数内部是为了给生成器的每次迭代提供的数据

每次调用生成器的 next 方法，将导致生成器函数运行到下一个 yield 关键字位置

yield 是一个关键字，该关键字只能在生成器函数内部使用，表达“产生”一个迭代数据。

5. 有哪些需要注意的细节？

1). 生成器函数可以有返回值，返回值出现在第一次 done 为 true 时的 value 属性中
2). 调用生成器的 next 方法时，可以传递参数，传递的参数会交给 yield 表达式的返回值
3). 第一次调用 next 方法时，传参没有任何意义
4). 在生成器函数内部，可以调用其他生成器函数，但是要注意加上*号

6. 生成器的其他 API

• return 方法：调用该方法，可以提前结束生成器函数，从而提前让整个迭代过程结束
• throw 方法：调用该方法，可以在生成器中产生一个错误

set 集合

一直以来，JS 只能使用数组和对象来保存多个数据，缺乏像其他语言那样拥有丰富的集合类型。因此，ES6 新增了两种集合类型（set 和 map），用于在不同的场景中发挥作用。

set 用于存放不重复的数据

1. 如何创建 set 集合

new Set(); //创建一个没有任何内容的set集合

new Set(iterable); //创建一个具有初始内容的set集合，内容来自于可迭代对象每一次迭代的结果

2. 如何对 set 集合进行后续操作

• add(数据): 添加一个数据到 set 集合末尾，如果数据已存在，则不进行任何操作
  • set 使用 Object.is 的方式判断两个数据是否相同，但是，针对+0 和-0，set 认为是相等
• has(数据): 判断 set 中是否存在对应的数据
• delete(数据)：删除匹配的数据，返回是否删除成功
• clear()：清空整个 set 集合
• size: 获取 set 集合中的元素数量，只读属性，无法重新赋值

3. 如何与数组进行相互转换

const s = new Set([x, x, x, x, x]);
// set本身也是一个可迭代对象，每次迭代的结果就是每一项的值
const arr = [...s];

4. 如何遍历

1). 使用 for-of 循环
2). 使用 set 中的实例方法 forEach

注意：set 集合中不存在下标，因此 forEach 中的回调的第二个参数和第一个参数是一致的，均表示 set 中的每一项