fetch

• 原生js，基于Promise，不涉及ajax

• 存在于window上，window.fetch

• XMLHttpRequest的替代品

参数

• 请求地址

• 请求配置对象，选填，可填属性如下，主要关注method，header，body

• 参考

• method 字符串，请求方式，默认GET

• header 对象，请求头

• body 请求体内容，类型与请求头里的Content-Type匹配

• mode 字符串，请求模式，有以下三种

  • cors 默认值，会在请求头中加入origin和referer

  • no-cors 不会在请求头中加入origin和referer，跨域时可能出现问题

  • same-origin 请求必须在同一个域中，跨域则会报错

• credentials 如何携带凭据cookie，有以下三种

  • omit 默认值，不携带cookie

  • same-origin 请求同源地址时携带cookie

  • include 请求任何地址都携带cookie

• cache 配置缓存模式

  • 参考

返回值

• 返回值为一个Promise对象

  • 收到服务器返回结果后，无论服务器返回的是什么结果，该Promise都会进入resolved状态，

  • 当网络发生错误，服务器未能返回数据时，该Promise进入rejected状态

• 该Promise对象的resolve函数的参数为一个Response对象，可使用await直接拿到，属性如下

  • 参考

  • ok 当响应的状态码在200-299之间，则为true，否则为false

  • status 响应状态码

  • 以下方法均为异步，所以可配合await使用，因为 Responses 对象被设置为了 stream 的方式，所以它们只能被读取一次，也就是说这些方法只能执行一次

  • text() 处理文本格式的Ajax响应，拿到一个被解析为 USVString 格式的 Promise 对象

  • json()处理JSON格式的Ajax响应，拿到一个被解析为JSON格式的 Promise 对象

  • blob() 处理二进制格式文件的Ajax响应，例如图片，电子表格等，拿到一个被解析为Blob格式的 Promise 对象

  • redirect() 重定向至另一个URL，她会创建一个新的Promise，来解决重定向的URL响应

来颗栗子

• 假设请求一切顺利

async function getData() {
    const url = "xxxx";

    const result = await fetch(url)  fetch执行完会返回一个Promise对象P1，该Promise对象的resolve函数的参数为一个Response对象
        .then((response) => {  通过参数拿到该Response对象
            response = response.json();  处理
            return response;  返回
        })  then执行结束返回了一个新的Promise对象P2
        .then((resp) => {  P2的resolve函数的参数为P1的resolve函数的返回值response
            return resp.data;  返回要拿到的数据
        });  then执行结束又返回了一个新的Promise对象P3
        await拿到P3的resolve函数的参数，也就是P2的resolve函数的返回值resp.data

    return result;
}

Request

• new Request(请求地址，请求配置)

• 除了通过传入请求地址和请求配置对象的方式，还可以通过直接传入一个Request对象的方式来使用fetch

• 而实际上使用第一种方式时，fetch内部就是为我们创建了一个Request对象

文件上传

• 流程

  • 客户端将文件数据发送给服务器

  • 服务器保存上传的文件数据至服务器端

  • 服务器响应给客户端一个文件的访问地址

• 请求方式：由于文件一般都比较大，所以使用POST

• 请求的表单格式：multipart/form-data

• 请求体中需传入的键值对：键为服务器要求名称，值为文件数据

• 一般通过HTML5提供的FormData来构建请求体

  • const formData = new FormData();

  • formData.append("img", inp.file[0]); 添加键值对