前端原生API调用方法

目录

一、前端API调用

[1. XMLHttpRequest (XHR)](#1. XMLHttpRequest (XHR))

[2. Fetch API](#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);
    }

}

然后我们启动。

三、调用API

xhr调用的

fetch调用的

几乎就没有区别

控制台

我们看看控制台

所以我们原生的调用就有这么两种办法,而且大家在平时用F12的时候也没少看到,我们网络的筛选方案里就有个Fetch/XHR

所以我们开发的时候也是注意是给新浏览器用的还是给全部浏览器用的

四、页面跳转(重定向)

这个其实很简单,我们想要重定向直接修改window.location.href这个属性就可以了

相关推荐
abigale039 分钟前
webpack+vite前端构建工具 -11实战中的配置技巧
前端·webpack·node.js
一头生产的驴11 分钟前
java整合itext pdf实现自定义PDF文件格式导出
java·spring boot·pdf·itextpdf
YuTaoShao18 分钟前
【LeetCode 热题 100】73. 矩阵置零——(解法二)空间复杂度 O(1)
java·算法·leetcode·矩阵
zzywxc78721 分钟前
AI 正在深度重构软件开发的底层逻辑和全生命周期,从技术演进、流程重构和未来趋势三个维度进行系统性分析
java·大数据·开发语言·人工智能·spring
专注API从业者28 分钟前
构建淘宝评论监控系统:API 接口开发与实时数据采集教程
大数据·前端·数据库·oracle
Joker`s smile32 分钟前
Chrome安装老版本、不同版本,自制便携版本用于前端调试
前端·chrome
九丝城主34 分钟前
2025使用VM虚拟机安装配置Macos苹果系统下Flutter开发环境保姆级教程--上篇
服务器·flutter·macos·vmware
weixin_4166399735 分钟前
爬虫工程师Chrome开发者工具简单介绍
前端·chrome·爬虫
我是如子啊40 分钟前
【解决“此扩展可能损坏”】Edge浏览器(chrome系列通杀))扩展损坏?一招保留数据快速修复
前端·chrome·edge
灵性花火40 分钟前
Qt的前端和后端过于耦合(0/7)
开发语言·前端·qt