fetch前后端通信

fetch

 前后端通信:ajax。

4步走:

let xhr=new XMLHttpRequest()

xhr.open('get','http://xxx')

xhr.onreadystatechange

xhr.send()

常用库:

jQuery -> 回调地狱

axios

fetch:网络获取资源

与Ajax的不同:

  1. 网络故障或请求被阻止时,才会标记为reject。
  2. 默认是不带cookie

response分析

headers: 

keys/values/entries:迭代器。可用for of

body:

可读流。buffer格式和流文件操作相关的api。

设计得不完善的地方:

fetch前后端通信_第1张图片

断开请求:

const controller=new AbortController;

针对不同情况做不同提示:

 error:对象;code:20 / status error

fetch前后端通信_第2张图片fetch前后端通信_第3张图片

fetch前后端通信_第4张图片

fetch前后端通信_第5张图片

fetch前后端通信_第6张图片

二次封装

扩展一下:

isPlainObject

isPlainObject的解释-CSDN博客

https://www.cnblogs.com/hahazexia/p/10237663.html

https://www.5axxw.com/wenku/tb/1003469g.html

二次封装:

  • 参数处理:

参数合并:和默认的配置项进行合并

参数校验:类型判断&默认一个对象

fetch前后端通信_第7张图片

拼上params和body

application/x-www-form-urlencoded、application/json、multipart/form-data

fetch前后端通信_第8张图片

fetch前后端通信_第9张图片

fetch前后端通信_第10张图片

你可能感兴趣的:(javascript,前端)