前端发送请求你真的懂了吗?(Ajax、Fetch、Axios)

Ajax、axios、fetch

1. Ajax

• 含义：异步js和xml

• 作用：通过js向服务器发送请求来加载数据

• xml是早期Ajax使用的数据格式，目前数据格式都是JSON

• 可以选择的方案:

  1. XMLHTTPRequrst(xhr) ×

  2. Fetch √

  3. 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进行加密

  使用步骤：

  1. 安装 yarn add jsonwebtoken

  2. 引入jwt const jwt = require('jsonwebtoken')

  3. 创建一个对象obj

  4. 使用jwt进行加密 const token = jwt.sign(obj, "hellohellojowuo", {expiresIn: “1h”`

     })

  5. 服务器收到客户端的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.js http 模块, 而在客户端 (浏览端) 则使用 XMLHttpRequests。

• 官网件[Axios API | Axios 中文文档 | Axios 中文网 (axios-http.cn)](https://www.axios-http.cn/docs/api_intro)

• 注意点：

  1. axios默认只会在响应状态为2xx时才会调用then

  2. axios的默认配置在实例也同样生效，但axios实例可以单独修改默认配置

  3. 拦截器只对当前实例有效

     // 添加请求拦截器
     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);
       });