前端请求后端的几种方式

前端请求后端的几种方式

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

前端如何调用后端的服务（前端如何请求后端）

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)
      }

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