[前端笔记028]rest API和ajax(xhr/fetch)

本文链接：https://blog.csdn.net/qq_29589765/article/details/129352896

前言

本笔记参考视频，李立超:BV1Gg411z7fA p9 -p20

服务器结构模型

传统MVC，model，数据模型；view，视图用来呈现；controller，控制器，复杂加载数据，并选择视图来呈现数据
传统的服务器直接为客户端返回一个html页面，无法适应多端场景
现在的结构，将渲染视图功能从服务器剥离出来，服务器只负责向客户端返回数据，渲染视图的工作由客户端自行完成，实现了前后端分离
rest，表示层状态传输，一种服务器的设计风格，主要特点是服务器只返回数据，一般为json。
rest，请求方法，建议用途
1. GET 查询，加载数据
2. POST 新建或添加数据
3. PUT 添加或修改
4. PATCH 修改数据
5. DELETE 删除数据
6. OPTION 浏览器自动发送，检查请求的一些权限
API也叫Endpoint端点，由请求的方法与请求的路径约束，如GET /user
传统返回时使用render+模板的方式返回，现在直接返回状态+数据，res.send()
app.get/post/delete/put…
postman，软件，可以向服务器发送各种请求，方便测试API
express.json()为解析json格式请求体的中间件
要编写统一的API，即路由名字统一，功能统一(get等用途固定统一)，返回的结果统一
使用/路由名/:id来处理单个请求
res.status(403).send()，请求返回的状态码的统一规定https://restfulapi.net/ 这里查。

ajax

是在js中向服务器发送的请求加载数据的技术，意为异步JS和XML
可以选择的方案，XMLHTTPRequest (xhr)、Fetch和Axios，前两者浏览器原生支持，Axios是第三方封装xhr的
CORS错误，跨域资源共享错误：只要两个网站的协议、域名和端口号有一个不同，就算跨域；通过AJAX请求时，浏览器为了服务器安全会阻止JS读取服务器返回的数据
解决的方案，在服务器中设置允许跨域的头，将设置响应头作为一个中间件引用可以对整个服务器起作用；res.setHeader(“设置的内容”，“设置的值”)，origin/methods/headers分别设置允许访问的域名/请求方式/传递的请求头，其中域名只能设置一个，设置为*或者具体的值，需要设置多个时进行动态设置
xhr方式：

const xhr = new XMLHttpRequest() //创建xhr对象
xhr.responseType = "json" //设置响应的类型，转换响应字符串的方式1，此时xhr.response直接为对象
//因为是异步的，所以绑定一个load事件
xhr.onload = function(){
	//状态判断
	if(xhr.status === 200){
		// 转换响应字符串的方式2
		const res = JSON.parse(xhr.response)
	}
}
xhr.open("GET","服务器地址")  //设置请求的信息
xhr.send() //发送请求

Fetch方式：xhr升级版，采用Promise API，解决异步回调函数问题，作用和AJAX一样

fetch("请求地址",{具体的可选设置，mdn查看，不写默认get方式})
	.then(res => {
		//判断状态码
		//读取数据，res.json()可以直接读取json格式的数据,切转化为了promise对象
		return res.json()
		//状态异常抛出到catch
		throw new Error("")
	})
	.then(res => {
		//使用数据，渲染页面
	})
	.catch(err =>{ 处理错误信息})

发送post请求时，在fetch的可选设置中设置，method/headers（指定数据的类型"Content-type":“application/json”）/body（数据JSON.stringify(对象)）
fetch中止ajax请求，创建AbortController对象，并在fetch的可选设置中将signal设置为对象.signal；需要中止时，调用对象.abort()中止请求
可以使用await代替then的写法：

// 注意await需要写在异步函数中，且一定要try catch
onclick= async ()=>{
	try{
	const res = await fetch("请求地址",{具体的可选设置，mdn查看，不写默认get方式})
	const data = await res.json()
	}catch(e){
	}
}