Fetch API

fetch()是 XMLHttpRequest 的升级版，用于在 JavaScript 脚本里面发出 HTTP 请求

浏览器原生提供这个对象

fetch()的功能与 XMLHttpRequest 基本相同，但有三个主要的差异

1. fetch()使用 Promise，不使用回调函数，因此大大简化了写法，写起来更简洁
2. fetch()采用模块化设计，API 分散在多个对象上（Response 对象、Request 对象、Headers 对象），更合理一些；相比之下，XMLHttpRequest 的 API 设计并不是很好，输入、输出、状态都在同一个接口管理，容易写出非常混乱的代码
3. fetch()通过数据流（Stream 对象）处理数据，可以分块读取，有利于提高网站性能表现，减少内存占用，对于请求大文件或者网速慢的场景相当有用。XMLHTTPRequest 对象不支持数据流，所有的数据必须放在缓存里，不支持分块读取，必须等待全部拿到后，再一次性吐出来

基本用法

fetch()接受一个 URL 字符串作为参数，默认向该网址发出 GET 请求，返回一个 Promise 对象

xxxxxxxxxx
fetch(url)
  .then(...)
  .catch(...)

完整网络请求

xxxxxxxxxx
fetch('http://iwenwiki.com/api/blueberrypai/getChengpinDetails.php')
    .then(response => response.json())
    .then(json => console.log(json))
    .catch(err => console.log('Request Failed', err));

支持的请求参数

xxxxxxxxxx
fetch("http://iwenwiki.com/api/blueberrypai/login.php", {
    method: "POST",
    headers: {
        "Content-type": "application/x-www-form-urlencoded; charset=UTF-8",
    },
    body: "user_id=iwen@qq.com&password=iwen123&verification_code=crfvw"
}).then(res => {
    return res.json()
}).then(data => {
    console.log(data);
})

实时效果反馈

1. 下列代码，划横线处应该填写的代码是：

xxxxxxxxxx
fetch("http://iwenwiki.com/api/blueberrypai/login.php", {
    ___: "POST",
    headers: {
        "Content-type": "application/x-www-form-urlencoded; charset=UTF-8",
    },
    body: "user_id=iwen@qq.com&password=iwen123&verification_code=crfvw"
}).then(res => {
    return res.json()
}).then(data => {
    console.log(data);
})

A type

B method

C post

D get

答案

1=>B