前端面试题13(API请求方法)

在这里插入图片描述
在前端JavaScript中,进行API请求主要可以通过几种方式来实现,最常见的是使用XMLHttpRequest(较旧的方法)、fetch(现代浏览器推荐方法)以及使用第三方库如axiosjQuery.ajax等。

1. XMLHttpRequest

这是最早支持Ajax请求的方式,适用于所有现代浏览器和一些较老的浏览器。

function makeRequest() {
    var xhr = new XMLHttpRequest();
    xhr.onreadystatechange = function () {
        if (xhr.readyState === 4 && xhr.status === 200) {
            console.log(xhr.responseText);
        }
    };
    xhr.open("GET", "https://api.example.com/data", true);
    xhr.send();
}

2. Fetch API

Fetch API是更现代、更灵活的请求方式,它返回Promise,可以与async/await一起使用,使得异步代码更加清晰。

async function fetchData() {
    try {
        const response = await fetch("https://api.example.com/data");
        if (!response.ok) {
            throw new Error(`HTTP error! status: ${response.status}`);
        }
        const data = await response.json();
        console.log(data);
    } catch (error) {
        console.error('There was a problem with the fetch operation:', error);
    }
}

fetchData();

3. Axios

Axios是一个基于Promise的HTTP库,可同时在浏览器和node.js中使用。需要先通过npm或CDN引入。

<!-- 引入axios CDN -->
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>

<script>
axios.get("https://api.example.com/data")
    .then(response => {
        console.log(response.data);
    })
    .catch(error => {
        console.error("Error fetching data:", error);
    });
</script>

或者在模块化环境中:

import axios from 'axios';

async function getData() {
    try {
        const response = await axios.get("https://api.example.com/data");
        console.log(response.data);
    } catch (error) {
        console.error("Error fetching data:", error);
    }
}

getData();

4. jQuery.ajax

如果你的项目中已经使用了jQuery库,也可以使用其提供的.ajax()方法。

<!-- 引入jQuery -->
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>

<script>
$.ajax({
    url: "https://api.example.com/data",
    method: "GET",
    success: function(data) {
        console.log(data);
    },
    error: function(jqXHR, textStatus, errorThrown) {
        console.error("Error:", textStatus, errorThrown);
    }
});
</script>

以上就是前端JavaScript中进行API请求的几种常见方法,根据你的具体需求和项目环境选择合适的方式。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mfbz.cn/a/778225.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

springboot集成tika解析word,pdf,xls文件文本内容

介绍 Apache Tika 是一个开源的内容分析工具包&#xff0c;用于从各种文档格式中提取文本和元数据。它支持多种文档类型&#xff0c;包括但不限于文本文件、HTML、PDF、Microsoft Office 文档、图像文件等。Tika 的主要功能包括内容检测、文本提取和元数据提取。 官网 https…

开发个人Go-ChatGPT--5 模型管理 (二)

开发个人Go-ChatGPT–5 模型管理 (二) ChatGPT 这是该项目的最终效果&#xff0c;使用ollama的open-webui进行人与机器的对话功能&#xff0c;对话的后端服务则完全对接自己开发的Go项目。 如何实现呢&#xff1f;则通过这篇文章&#xff0c;一一给大家剖析后端的原理及功能…

html的作业

目录 作业题目 1.用户注册 A图 B代码 2.工商银行电子汇款单 A图 B代码 3.李白诗词 A图 B代码 4.豆瓣电影 A图 B代码 学习产出&#xff1a; 作业题目 1.用户注册 A图 B代码 <!DOCTYPE html> <html lang"zh"> <head><meta charset&qu…

常见算法和Lambda

常见算法和Lambda 文章目录 常见算法和Lambda常见算法查找算法基本查找&#xff08;顺序查找&#xff09;二分查找/折半查找插值查找斐波那契查找分块查找扩展的分块查找&#xff08;无规律的数据&#xff09; 常见排序算法冒泡排序选择排序插入排序快速排序递归快速排序 Array…

52-4 内网代理1 - 内网代理简介

一、正向连接 正向连接是指受控端主机监听一个端口,由控制端主机主动发起连接的过程。这种连接方式适用于受控主机拥有公网IP地址的情况。例如,在攻击者和受害者都具有公网IP的情况下,攻击者可以直接通过受害者的公网IP地址访问受害者主机,因此可以使用正向连接来建立控制通…

mysql5.6的安装步骤

1.下载mysql 下载地址&#xff1a;https://downloads.mysql.com/archives/community/ 在这里我们下载zip的包 2.解压mysql包到指定目录 3. 添加my.ini文件 # For advice on how to change settings please see # http://dev.mysql.com/doc/refman/5.6/en/server-configurat…

调试支付分回调下载平台证书

之前的原生代码放到webman里面&#xff0c;死活跑不通 没办法&#xff0c;只能用esayWeChat6.7 &#xff08;自行下载&#xff09; 它里面配置要用到平台证书 平台证书又要用到 composer require wechatpay/wechatpay 但是请求接口之前&#xff0c;你先要用到一个临时的平台…

ELK日志实时监控

目录 一、ELK/EFK简介 1.1 什么是ELK/EFK? 1.2 常见架构 1、Elasticsearch Logstash Kibana 2、Elasticsearch Logstash Filebeat Kibana 3、Elasticsearch Logstash Filebeat Kibana Redis 4、Elasticsearch Fluentd Filebeat Kibana 1.3 基本流程 二、…

【鸿蒙学习笔记】@Link装饰器:父子双向同步

官方文档&#xff1a;Link装饰器&#xff1a;父子双向同步 目录标题 [Q&A] Link装饰器作用 [Q&A] Link装饰器特点样例&#xff1a;简单类型样例&#xff1a;数组类型样例&#xff1a;Map类型样例&#xff1a;Set类型样例&#xff1a;联合类型 [Q&A] Link装饰器作用…

android新闻app(二)

新闻详细页&#xff1a; 历史浏览记录SQList&#xff1a; 分类&#xff1a; 历史浏览记录主体UI和详细&#xff1a; 侧边栏&#xff1a; 参考&#xff1a;浩宇开发

SSM贫困生申请管理系统-计算机毕业设计源码84308

摘要 随着教育信息化的不断推进&#xff0c;越来越多的高校开始借助信息技术手段提升贫困生申请管理的效率与准确性。为此&#xff0c;我们设计并实现了SSM贫困生申请管理系统&#xff0c;旨在通过信息化手段优化贫困生申请流程&#xff0c;提高管理效率&#xff0c;为贫困生提…

IDEA越用越卡?教你轻松解决IDEA内存占用过高问题

大家好&#xff0c;我是瑶山&#xff0c;最近IDEA越用越卡了&#xff0c;刚刚内存卡爆&#xff0c;带着整个电脑也卡的飞起&#xff0c;只能重启了电脑。 虽然重启后又恢复到了流畅&#xff0c;但是问题还是如鲠在喉&#xff0c;痛定思痛&#xff0c;还是决定处理下&#xff01…

【话题】AI是在帮助开发者还是取代他们

大家好&#xff0c;我是全栈小5&#xff0c;欢迎阅读小5的系列文章&#xff0c;这是《话题》系列文章 目录 引言AI在代码生成中的应用AI在错误检测和自动化测试中的作用对开发者职业前景的影响技能需求的变化与适应策略结论文章推荐 引言 随着人工智能&#xff08;AI&#xff…

《第一行代码》小结

文章目录 一. Android总览1. 系统架构2. 开发环境3. 在红米手机上运行4. 项目资源详解4.1 整体结构4.2 res文件4.3 build.gradle文件 二. Activity0. 常用方法小结1. 创建一个Activity 一. Android总览 1. 系统架构 应用层&#xff1a;所有安装在手机上的应用程序 应用框架层&…

恢复出厂设置手机变成砖

上周&#xff0c;许多Google Pixel 6&#xff08;6、6a、6 Pro&#xff09;手机用户在恢复出厂设置后都面临着设备冻结的问题。 用户说他们在下载过程中遇到了丢失 tune2fs 文件的错误 。 这会导致屏幕显示以下消息&#xff1a;“Android 系统无法启动。您的数据可能会被损坏…

Python学习笔记30:进阶篇(十九)pygame的使用之显示与窗口管理

前言 基础模块的知识通过这么长时间的学习已经有所了解&#xff0c;更加深入的话需要通过完成各种项目&#xff0c;在这个过程中逐渐学习&#xff0c;成长。 我们的下一步目标是完成python crash course中的外星人入侵项目&#xff0c;这是一个2D游戏项目。在这之前&#xff…

[Labview] Excel读表 输出表单中选中的单元格内容

简而言之 循环外 是读取excel文件&#xff0c;并写入labview表格 循环内 会输出表格中被选中的单元格内容 属性节点&#xff1a;编辑位置 如果需要改写单元格内容并储存替换Excel&#xff0c;可见这篇&#xff1a;[Labview] 改写表格内容并储存覆盖Excelhttps://blog.csdn.ne…

tongweb 部署软航流版签一体化应用示例 提示跨域错误CORS ERROR

目录 问题现象与描述 解决办法 原理解析 什么是CORS 浏览器跨域请求限制 跨域问题解决方法 跨域请求流程 浏览器请求分类解析 http请求方法简介 问题现象与描述 重庆软航科技有限公司提供了一套针对针对word、excel等流式文件转换成PDF版式文件并进行版式文件在线签章…

【虚幻引擎】UE4初学者系列教程开发进阶实战篇——生存游戏案例

一、课程体系 1 学前必读 2 Character类相关基础 -人物移动控制 -动画蓝图 3 常见游戏机制基础 -碰撞器、触发器 -物体使用接口 -视角切换 4其他相关设计 -背包系统 -锻造系统 -物体破碎效果 -简易种植系统 -互动物体动画 5课程结语 二、UI部分 思维导图部分 实操部分 …

Matplotlib Artist Axes

在简介里介绍了很多了&#xff0c;这里补充一点 Axes包含一个属性patch&#xff0c;是Axes对应的方框&#xff0c;可以用来设置Axes的相关属性 ax fig.add_subplot() rect ax.patch # a Rectangle instance rect.set_facecolor(green) Axes有以下方法 Axes helper metho…