fetch初步理解

2.16

fetch基本知识

前备知识

xhr

一个用于与服务器交互的对象，可以保证在不刷新页面的情况下请求特定的URL ，返回数据，不影响用户操作。可以获取任何类型的数据，支持多种协议（http等），这让它变得不安全。

const xhr=new XMLHttpRequest()新建一个对象。

xhr.open(url,method,async,user,password)初识化请求，后面三个参数为可选的。

async可以设置请求是否异步，默认是异步的。

user password都是用于认证的

xhr.send()发送请求

示例

var xhr = new XMLHttpRequest();
//onload属性是请求成功时触发，也可以用load事件
xhr.onload = function () {
    // 输出接收到的文字数据
    document.getElementById("demo").innerHTML=xhr.responseText;
}
 //onerror属性是请求错误时触发，也可以用error事件
xhr.onerror = function () {
    document.getElementById("demo").innerHTML="请求出错";
}
 
// 发送异步 GET 请求
xhr.open("GET", "https://www.runoob.com/try/ajax/ajax_info.txt", true);
xhr.send();

promise

一个用于返回异步请求最终完成（或者失败）以及结果值的对象。

只有三种状态，待定（pending）：初识状态。

​ 已兑现（fulfiled）：操作成功

​ 已拒绝（rejected）：操作失败。

示例

const promiseA = new Promise( (resolutionFunc,rejectionFunc) => {
    //新建了一个Promise对象，
    //语法：new Promise(executor)
    //executor是一个函数，与对象自动联系起来，在构造Promise对象时就会被Promise的构造函数执行
    //executor介绍
    function(resolutionFunc, rejectionFunc){
      // 通常是一些异步操作
      resolutionFunc 被敲定时调用（成功时）
      rejectionFunc 被拒绝时调用
    }


});

function myAsyncFunction(url) {
  return new Promise((resolve, reject) => {//返回一个Promise对象
    const xhr = new XMLHttpRequest()
    xhr.open("GET", url)
    xhr.onload = () => resolve(xhr.responseText)//请求成功时，responseText请求响应的东西 是一个DOMString对象。
    xhr.onerror = () => reject(xhr.statusText)//请求失败时，statusText请求的状态码
    xhr.send()
  });
}

http

超文本传输协议，用于传输超媒体文档(如html)的应用层协议。

正文

fetch是一个获取资源的方式，返回的是Promise对象，。用来替代xhr，

缺点：不能取消，不能设置超时，兼容性差，不能获取进度

headers

可以修改http的请求头，append追加新的值，set覆盖原来的值

const headers=new Headers() headers.append('Content-Type', 'text/plain');

request

请求类，实例化这个请求类可以表示http请求中的请求

const request = new Request('/api/request', { method: 'GET', headers, });

response

一个响应类，返回一次响应成功的数据

body

使用语法

Promise<Response> fetch(input[, init]);

input一般是一个request对象

init 一个配置项对象

例如

var myInit = { method: 'GET',
               headers: myHeaders,//请求头
               mode: 'cors',//请求的模式
               cache: 'default' };//请求的cache模式