前端请求后端的几种方式
最近参考了几篇博客,做一个个人总结
前端如何调用后端的服务(前端如何请求后端)
Get请求类型
凡是能跳转地址的都可以发起get请求
1、a标签发起请求
通过a标签的href属性,来请求后端
<a href='后端服务的链接' download="文件名">点击事件</a>
优点:最简单、便捷的方式,点击一下就到后端,如果是下载的请求,后端返回数据浏览器就能自动保存文件
缺点:无法应对复杂需求,如携带cookie值,也没有办法通过权限校验。
动态生成a标签来发起请求
function 事件函数 = () =>{ let a = document.createElement('a'); a.style.display = 'none'; a.href = '后端服务的链接'; a.download = '文件名称'; document.body.appendChild(a); a.click(); document.body.removeChild(a); }
2、事件跳转window
用标签绑定事件,事件内部跳转请求后端
<button type="button" onclick="事件函数()">按钮</button>
function 事件函数 = () => {
window.location.href = '后端服务链接'; // 方式一
window.open('后端服务链接'); // 方式二
}
通过window的方法来跳转,相当于直接在浏览器的请求地址处直接输入地址
优点:简单、任意理解**。事件跳转**的方式比a标签跳转的扩展性强
缺点:window.open()的这个效果,浏览器会打开一个空白的页面,如果请求是下载或者类似的请求,给用户的感觉不好,可以使用window.close关闭空白页面,但是不推荐这样的使用方式
3.iframe标签跳转
类似于a标签的用法,通过iframe的src属性来跳转
const downloadFile = async () => {
// 注意,直接通过iframe的src去访问后端的话,是无法实现携带cookie去做权限校验的,在这里我的axios实现了携带cookie了的,所以我得先发送一次axios请求
let res = await axiosSend();
// 其实在上面那步执行返回,数据已经保存到了response中,但是无法触发浏览器保存文件
// 接下来我们操作dom来添加一个iframe
let iframe = document.createElement('iframe');
// 防止页面上弹出一个小框
iframe.style.display = 'none';
// axios的响应格式是这样可以获取url,其他的你可以根据具体的响应结果来修改这个src,这个src由于依赖了前面的请求,所以再次发送的时候,也会携带cookie值
iframe.src = res.request.responseURL;
// 在它加载的时候我们就remove了,不要了
iframe.onload = function () {
document.body.removeChild(iframe);
}
// 将这个iframe嵌入到页面元素中
document.body.appendChild(iframe);
}
Get和Post请求均可
1、form表单提交
<form action="后端服务链接" method="GET">
<input type='submit'>按钮</input>
</form>
通过表单的形式提交
优点:在表单里支持回车提交,表单可以发送get和post请求,form表单浏览器自带的,无论是否开启js,都可以提交表单。
缺点:表单提交以后需要重新跳转新页面,或者要将跳转行为放在后端时,用表单提交更合适。
2、Ajax(Axios)提交
axios({
method: 'post',
url: url, // 请求地址
data: [], // 参数
responseType: '' // 表明返回服务器返回的数据类型
}).then(
response => {
},
err => {
reject(err)
}
优点:灵活,可指定请求类型,请求的数据和返回的数据类型等。