前言
HTTP请求是现代Web开发中前后端沟通的基础。在开发过程中,开发者面临同步与异步请求的选择、跨域问题的挑战以及选择合适的HTTP库等问题。同步请求简单却往往阻塞用户界面,而异步请求能提高效率但增加复杂性。跨域问题则源自浏览器的同源政策,常常需要特定的解决方案。
在众多HTTP库中,axios因其简单易用和功能丰富而受到欢迎。它支持Promise,适合异步请求,同时内置了请求和响应拦截器、请求取消和JSON数据处理等功能。
本文将讨论HTTP请求的原理、同步与异步请求的利弊、跨域问题的解决方法,以及如何高效使用Axios框架。希望读者能更好理解HTTP请求并在开发中灵活应用。
▋Http请求
http超文本传输协议,属于应用层协议,传输的内容是超文本内容(网页内容)
例如:在网页上点击超链接,提交表单都可以向后端发送一个http请求
一次http请求中包含:请求行 请求头 请求体
请求行:包含请求方式(get/post) 请求的资源地址......... 浏览器自动发送
请求头:包含客户端的一些环境信息(浏览器的版本 客户端ip........)
请求体:包含的是post请求向后端发送数据
get请求和post请求
get请求:主要用于从后端获取数据,也可以向后端传输少量的数据
-->发送的数据在请求地址中包含,不在请求体中,发送的数量会有限制,也不安全(超链接发送默认的是get请求)
post请求:表单 method=“post” 主要是从前端向后端发送数据的
-->数据不在地址栏中,在请求体中,可以发送大量数据且相对get方式更安全
▐ 一次响应的流程
▋同步请求
- 当网页与后端交互时,前端不能在进行其他操作.
- 服务器端相应回来的内容,会把整个浏览器的内容覆盖掉
同步请求,当后端往前端返回数据会在一个新的网页呈现
▋异步请求
- 我们同时做多件事情(前端与服务器交互,不影响前端网页其他操作)
- 使用js中提供的XML HttpRequest对象实现发送起步请求和接受服务器响应
简单理解:同步请求只可以做一件事情,异步请求可以同时做多件事情
▐ 如何实现异步请求
原始的方法是在前端用一个js的对象:XML httpRequest 发送请求并接受响应,但是由于原始方法十分麻烦,所以axios封装这个方法,我们现在一般使用axios异步框架来实现异步请求
原始方法
//创建请求对象 var httpobj = new XMLHttpRequest(); httpobj.open("get","http://127.0.0.1:8088/dormSever/check?account="+account);//请求封装 httpobj.send()//发送请求 //执行回调函数 接受响应结果 httpobj.onreadystatechange = function(){ document.getElementById("msg").innerHTML = httpobj.responseText;//后端相应的内容 }
axios框架下面会详细介绍
🖇️axios下载地址:axios-js.com
▌跨域问题
☞什么是跨域?
- 跨域是指从一个域名的网页去请求另外一个域名的资源
- 跨域的严格一点的定义是:只要协议,域名,端口有任何一个的不同,就被当作是跨域
- 所谓同源是指:域名,协议,端口均相同,只要有一个不同,就是跨域
☞为什么要跨域?
例如:腾旭公司有许多产品,但是所有产品都可以使用微信登录,这里就存在跨域.我们不可能研发一个产品就研发一个登录方式.
我们有时需要在A域中访问B域,从而接受B域的响应(这就是跨域)
☞浏览器为什么要阻止跨域访问?
为了安全,不能让其他服务器的内容肆意的响应到自己的服务中
☞ 如何解决跨域问题?
前端与后端均可解决 这里以后端为例
解决方法:在数据向前端响应的时候,从而告诉前端这段数据是安全的即可.
➱具体操作如下:
在后端添加一个过滤器,这样后端在向前端响应时,告诉浏览器我们本次响应是安全的
package com.kid.dormServer.filter;
import javax.servlet.*;
import javax.servlet.annotation.WebFilter;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;
@WebFilter(urlPatterns = "/*")
public class CorsFilter implements Filter {
public void doFilter(ServletRequest servletRequest, ServletResponse servletResponse, FilterChain filterChain)
throws IOException, ServletException {
System.out.println("跨域过滤器");
HttpServletResponse httpResponse = (HttpServletResponse) servletResponse;
HttpServletRequest httpRequest = (HttpServletRequest) servletRequest;
//允许携带Cookie时不能设置为* 否则前端报错
httpResponse.setHeader("Access-Control-Allow-Origin", httpRequest.getHeader("origin"));//允许所有请求跨域
httpResponse.setHeader("Access-Control-Allow-Methods", "*");//允许跨域的请求方法GET, POST, HEAD 等
httpResponse.setHeader("Access-Control-Allow-Headers", "*");//允许跨域的请求头
httpResponse.setHeader("Access-Control-Allow-Credentials", "true");//是否携带cookie
filterChain.doFilter(servletRequest, servletResponse);
}
}
▋axios框架
axios框架是来实现发送异步请求的
原始的前端项目
- 在官网中将axios.min.js 文件下载到桌面,拖到js文件夹下并导入即可
- 文件地址
https://unpkg.com/axios/dist/axios.min.js
在vue项目中我们可以直接使用指令安装( npm install axios)
感谢大家的观看,本次分享就到这里。希望我的内容能够对您有所帮助。创作不易,欢迎大家多多支持,您的每一个点赞都是我持续更新的最大动力!如有不同意见,欢迎在评论区积极讨论,让我们一起学习、共同进步!如果有相关问题,也可以私信我,我会认真查看每一条留言。期待下次再见!
希望路飞的笑容可以治愈努力路途中的你我!
博主vx:Dreamkid05 --->欢迎大家和博主讨论问题