前端原生API调用方法
目录
一、前端API调用
1. XMLHttpRequest (XHR)
XMLHttpRequest 是一个较老但仍然广泛使用的 API，用于发送异步 HTTP 请求。它在现代浏览器中得到了很好的支持，并且可以处理各种类型的请求（GET、POST 等）。
示例代码
function xhrApi() {
const xhr = new XMLHttpRequest();
xhr.open('GET', 'http://localhost:11451/hello', true);
xhr.onload = function () {
if (xhr.status === 200) {
console.log(xhr.responseText);
} else {
console.error('Request failed. Returned status of ' + xhr.status);
}
};
xhr.send();
}2. Fetch API
fetch 是现代浏览器内置的一个基于 Promise 的 HTTP 请求库，用于发送网络请求。它提供了更简洁和现代的 API，并且支持更多的功能，如自动解析 JSON 数据等。
示例代码
function fetchApi() {
fetch('http://localhost:11451/hello')
.then(response => {
if (!response.ok) {
throw new Error('Network response was not ok');
}
return response.text();
})
.then(data => {
console.log(data);
})
.catch(error => {
console.error('There was a problem with the fetch operation:', error);
});
}二、建立后端供前端调用API
建立一个后端项目先
然后我们修改一下配置文件
server:
port: 11451
然后写一下controller
package com.xingzai.apitest.controller;
import lombok.extern.slf4j.Slf4j;
import org.springframework.web.bind.annotation.CrossOrigin;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.RestController;
/**
* @author 无敌の星仔<br>
* 2024/10/13 下午4:33
*/
@RestController
@Slf4j
public class ApiController {
@CrossOrigin("*")
@GetMapping("/hello")
public String hello() {
log.info("被调用了");
return "Hello world";
}
}
主启动类
package com.xingzai.apitest;
import org.springframework.boot.SpringApplication;
import org.springframework.boot.autoconfigure.SpringBootApplication;
@SpringBootApplication
public class ApiTestApplication {
public static void main(String[] args) {
SpringApplication.run(ApiTestApplication.class, args);
}
}
然后我们启动。
三、调用API
xhr调用的
fetch调用的
几乎就没有区别
控制台
我们看看控制台
所以我们原生的调用就有这么两种办法，而且大家在平时用F12的时候也没少看到，我们网络的筛选方案里就有个Fetch/XHR
所以我们开发的时候也是注意是给新浏览器用的还是给全部浏览器用的
四、页面跳转（重定向）
这个其实很简单，我们想要重定向直接修改window.location.href这个属性就可以了
原文地址：https://blog.csdn.net/XingZaiUnrivaled/article/details/142900080
免责声明：本站文章内容转载自网络资源，如本站内容侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！