前端请求后端的几种方式

前端请求后端的几种方式

最近参考了几篇博客,做一个个人总结

前端如何调用后端的服务(前端如何请求后端)

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的方法来跳转,相当于直接在浏览器的请求地址处直接输入地址

image-20220721160434503

优点:简单、任意理解**。事件跳转**的方式比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)
      }

优点:灵活,可指定请求类型,请求的数据和返回的数据类型等。


你可能感兴趣的:(前端,javascript,html)