fetch的用法ajax,fetch使用，ajax替代方案

fetch简介

Fetch 提供了一个 JavaScript接口，用于访问和操纵HTTP管道的部分，例如请求和响应。它还提供了一个全局 fetch()方法，该方法提供了一种简单，合理的方式来跨网络异步获取资源。

这种功能以前是使用 XMLHttpRequest实现的，Fetch提供了一个更好的替代方法

Fetch API 是基于 Promise 设计，使用了Promises 来处理结果/回调。旧浏览器不支持 Promise，需要使用 polyfill es6-promise 。

简单实现

fetch("http://192.168.43.169:8099/someInfo",{

method: 'post',

})

.then(res=>{

console.log(response) // 包含响应结果的promise，只是一个 HTTP 响应，而不是真的JSON

return response.json();

})

.then(res=>{

console.log(res) //js格式的json对象

})

async await实现更方便

const fetchRequest = async () => {

let response = await fetch("http://192.168.43.169:8099/teacher/resume", {

method: 'post',

})

let data = await response.json()

console.log(data); //js格式的json对象

}

fetchRequest()

Response 对象

属性：

status：整数(默认值为200) 为response的状态码

statusText： 字符串(默认值为"OK"),该值与HTTP状态码消息对应.

ok：如上所示, 该属性是来检查response的状态是否在200-299(包括200,299)这个范围内.该属性返回一个Boolean值.

方法：处理包含返回结果的promise对象的数据

例如 response.json()

处理包含json结果的promise对象

clone() - 创建一个新的 Response 克隆对象.

error() - 返回一个新的,与网络错误相关的 Response 对象.

redirect() - 重定向,使用新的 URL 创建新的 response 对象..

arrayBuffer() - Returns a promise that resolves with an + ArrayBuffer.

blob() - 返回一个 promise, resolves 是一个 Blob.

formData() - 返回一个 promise, resolves 是一个 FormData 对象.

json() - 返回一个 promise, resolves 是一个 JSON 对象.

text() - 返回一个 promise, resolves 是一个 USVString (text).

Request对象

创建request对象

request = new Request()

属性：

method：支持 GET, POST, PUT, DELETE, HEAD

url：请求的 URL

headers： 对应的 Headers 对象

referrer：请求的 referrer 信息

mode：可以设置 cors, no-cors, same-origin

credentials：设置 cookies 是否随请求一起发送。可以设置: omit, same-origin

redirect：follow, error, manual

integrity：subresource 完整性值(integrity value)

cache：设置 cache 模式 (default, reload, no-cache)

let request = new Request("http://192.168.43.169:8099/teacher/resume",{

method: 'post',

headers: new Headers({

'Content-Type': 'text/plain'

})

})

fetch(request)

.then(res=>{

console.log(res);

return res.json();

})

.then(res=>{

console.log(res)

})

header

创建header对象

let headers = new Headers();

headers方法：

Headers.append()：给现有的header添加一个值, 或者添加一个未存在的header并赋值.

Headers.delete()：从Headers对象中删除指定header.

Headers.entries()：以 迭代器 的形式返回Headers对象中所有的键值对.

Headers.get()：以 ByteString 的形式从Headers对象中返回指定header的全部值.

Headers.has()：以布尔值的形式从Headers对象中返回是否存在指定的header.

Headers.keys()：以迭代器的形式返回Headers对象中所有存在的header名.

Headers.set()：替换现有的header的值, 或者添加一个未存在的header并赋值.

Headers.values()：以迭代器的形式返回Headers对象中所有存在的header的值.

Headers.getAll()：用于返回具有给定名称的 Headers 对象中所有值的数组; 这个方法现在已经从规范中删除了，Headers.get() 方法现在返回所有的值而不是一个。

设置header通过属性或者方法都可以

属性形式：传一个多维数组或者对象字面量

Header = new Headers({

"Content-Type": "text/plain",

"Content-Length": content.length.toString(),

"X-Custom-Header": "ProcessThisImmediately",

});

方法形式：

var Header = new Headers();

Header.append("Content-Type", "text/plain");

Header.append("Content-Length", content.length.toString());

Header.append("X-Custom-Header", "ProcessThisImmediately");

fetch坑

当接收到一个代表错误的 HTTP 状态码时，从 fetch()返回的 Promise 不会被标记为 reject， 即使该 HTTP 响应的状态码是 404 或 500。相反，它会将 Promise 状态标记为 resolve (但是会将 resolve 的返回值的 ok 属性设置为 false )，仅当网络故障时或请求被阻止时，才会标记为 reject。

Fetch 请求默认是不带 cookie 的，需要设置 fetch(url, {credentials: 'include'})

不能中断，没有 abort、terminate、onTimeout 或 cancel 方法Fetch 和 Promise 一样，一旦发起，不能中断，也不会超时，只能等待被 resolve 或 reject。