Ajax、Fetch、axios完整笔记
Ajax、axios、fetch
1. Ajax
-
含义:异步js和xml
-
作用:通过js向服务器发送请求来加载数据
-
xml是早期Ajax使用的数据格式,目前数据格式都是JSON
-
可以选择的方案:
-
XMLHTTPRequrst(xhr)
×
-
Fetch
√
-
Axios(xhr的二次封装)
√
-
-
CORS(跨域资源共享) 详细可见MDN文档
——跨域请求:
- 如果两个网站的完整的域名不同(遵循同源策略),则跨域
- 跨域需要检查三个东西: 协议、域名、端口号,三个只要有一个不同,就算跨域
- 当Ajax去发送跨域请求时,浏览器为了服务器安全,会阻止JS读取到服务器的数据
——解决方案
-
在服务器中设置一个允许跨域的头
res.setHeader("Access-control-Allow-Origin","*") //允许某个端口 res.setHeader("Access-control-Allow-Origin","http://localhost:8080") //允许请求方式: Access-control-Allow-Methods res.setHeader("Access-control-Allow-Methods", "GET,POST") //允许传递的请求头: Access-control-Allow-Headers res.setHeader("Access-control-Allow-Headers", "Content-type")
1.1 xhr
- 请求格式
//创建一个新的xhr对象,xhr表示请求信息
const xhr = new XMLHttpRequest()
xhr.responseType = "json"
//可以为xhr对象绑定一个load事件,解决异步问题
xhr.onload = function() {
//xhr.response 表示响应信息
//xhr.status 表示响应状态码
if(xhr.status === 200){
//const result = JSON.parse(xhr.response)
//console.log(res.status, result.data)
console.log(xhr.response)
}
}
//设置请求信息
xhr.open("GET", "请求路径")
//发送请求
xhr.send()
//读取响应信息
1.2 fetch
- fetch 是 xhr 的升级版,采用的是Promise API
- 作用和AJAX相同,但是使用起来更加友好
- fetch原生js就支持的一种ajax请求方式
fetch("http://localhost:3030/students", {
method:'post',
headers:{
"Content-type": "application/json"
},
//通过body去发哦是那个数据时,必须通过请求头来指定数据类型
body: JSON.stringify({
name:'aaa',
age:16
})
})
.then(res => {
if(res.status === 200){
//res.json() 可以读取json格式的数据
return res.json() //Promise
}else {
throw new Error("加载失败!")
}
})
.then(res => {
console.log(res.data) //Promise内的数据
})
.catch(err => {
console.log(err)
})
-
终止请求器(服务器未返回响应状态:待处理)
//创建一个终止器:Abortcontroller const controller = new AbortController() setTimeout(()=> { controller && controller.abort() }, 3000) fetch("http://localhost:3030/students", { signal: controller.signal }) .then(res => console.log(res)) .catch(err => console.log(err))
-
将promise改写为await时,一定要写try-catch
1.3 本地存储
含义:指浏览器本身的存储空间,可以将用户的数据存储到浏览器内部
1. sessionStorage
- 存储的数据 页面一关闭就会丢失(只在当前页面生效)
sessionStorage.setItem(name,value)
存储数据(都是字符串)sessionStorage.getItem(name)
获取数据sessionStorage.removeItem(name)
删除数据sessionStorage.clear()
清空所有数据
2. localStorage
- 存储时间比较长,不主动删就不会丢失
localStorage.setItem(name,value)
存储数据(都是字符串)localStorage.getItem(name)
获取数据localStorage.removeItem(name)
删除数据localStorage.clear()
清空所有数据
1.4 token
- rest风格的服务器是无状态服务器,所以注意不要在服务器中存储用户的数据
- 服务器中不能存储用户信息,可以将用户信息发给客户端发回
- 客户端每次访问服务器时,直接将用户信息发回,服务器就可以根据用户信息来识别用户身份,数据必须进行加密后发送给客户端
保存,避免数据泄露
-
在node中,可以直接使用jsonwebtoken进行加密
使用步骤:
-
安装 yarn add jsonwebtoken
-
引入jwt
const jwt = require('jsonwebtoken')
-
创建一个对象obj
-
使用jwt进行加密
const token = jwt.sign(obj, "hellohellojowuo", {
expiresIn: “1h”`})
-
服务器收到客户端的token后 解密
try { const decodedata = jwt.vertify(token,"hellohellojowuo") console.log(decodedata) }catch(err) { //说明token解码失败,无效 console.log("无效token") }
-
-
token一般都通过请求头来发送
fetch("http://localhost:3030/students", { method:'post', headers:{ "Content-type": "application/json", //格式为"Bearer xxxxx" "authorization": `Bearer ${token}` }, //通过body去发哦是那个数据时,必须通过请求头来指定数据类型 body: JSON.stringify({ name:'aaa', age:16 }) }) .then(res => { if(res.status === 200){ //res.json() 可以读取json格式的数据 return res.json() //Promise }else { throw new Error("加载失败!") } }) .then(res => { console.log(res.data) //Promise内的数据 }) .catch(err => { console.log(err) })
-
服务器读取请求头
const token = req.get("Authorization").split(" ")[1]
1.5 Axios
-
Axios 是一个基于 promise 网络请求库,作用于
node.js
和浏览器中。 它是 isomorphic 的(即同一套代码可以运行在浏览器和node.js中)。在服务端它使用原生 node.jshttp
模块, 而在客户端 (浏览端) 则使用 XMLHttpRequests。 -
官网件
[Axios API | Axios 中文文档 | Axios 中文网 (axios-http.cn)](https://www.axios-http.cn/docs/api_intro)
-
注意点:
-
axios默认只会在响应状态为2xx时才会调用then
-
axios的默认配置在实例也同样生效,但axios实例可以单独修改默认配置
-
拦截器只对当前实例有效
// 添加请求拦截器 axios.interceptors.request.use(function (config) { config.headers["Authrization"] = `Bear ${localStorage.getItem('token')}` return config; }, function (error) { // 对请求错误做些什么 return Promise.reject(error); }); // 添加响应拦截器 axios.interceptors.response.use(function (response) { // 2xx 范围内的状态码都会触发该函数。 // 对响应数据做点什么 return response; }, function (error) { // 超出 2xx 范围的状态码都会触发该函数。 // 对响应错误做点什么 return Promise.reject(error); });
-