前端原生API调用方法

embedded/2024/10/21 3:30:22/

一、前端API调用

1. XMLHttpRequest (XHR)

2. Fetch API

二、建立后端供前端调用API

三、调用API

xhr调用的

fetch调用的

控制台

四、页面跳转（重定向）

一、前端API调用

1. XMLHttpRequest (XHR)

XMLHttpRequest 是一个较老但仍然广泛使用的 API，用于发送异步 HTTP 请求。它在现代浏览器中得到了很好的支持，并且可以处理各种类型的请求（GET、POST 等）。

示例代码

javascript">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 数据等。

示例代码

javascript">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

建立一个后端项目先

然后我们修改一下配置文件

java">server:port: 11451

然后写一下controller

java">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";}
}

主启动类

java">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);}}

然后我们启动。