前后端分离前端请求后端接口的方式

1. Ajax

        使用原生 JavaScript 或基于框架(如 Axios、jQuery.ajax)的 Ajax 技术,通过发送异步请求获取后端接口数据。可以使用 GET、POST 等 HTTP 方法发送请求,并处理返回的数据。

import axios from 'axios';const API_URL = 'http://example.com/api/data'; // 接口地址axios.get(API_URL).then(response => {console.log(response.data); // 处理返回数据}).catch(error => {console.error(error); // 处理错误信息});
  1. 引入 axios 库:通过 import 语句引入 axios 库。

  2. 定义接口地址:定义一个常量 API_URL,代表后端接口的地址。

  3. 发送 GET 请求:通过 axios.get() 方法,向后端发送 GET 请求,请求地址为 API_URL。该方法返回一个 Promise 对象。

  4. 处理响应数据:使用 Promise 的 then() 方法处理返回的响应数据。response.data 表示服务端返回的数据。

  5. 处理错误信息:使用 Promise 的 catch() 方法处理请求失败或返回错误信息的情况。

你需要将 API_URL 修改为具体的后端接口地址,并根据接口定义和数据格式对返回数据进行处理。此外,还可以通过设置请求参数、请求头信息等来进一步定制请求。

2.Fetch API

        Fetch API 是一种现代的 Web API,用于发送网络请求。它提供了一组简洁的方法(如 fetch())来发送请求和处理响应。可以使用 GET、POST 等 HTTP 方法发送请求,并使用 Promise 对象处理返回的数据。

const API_URL = 'http://example.com/api/data'; // 接口地址fetch(API_URL).then(response => response.json()).then(data => {console.log(data); // 处理返回数据}).catch(error => {console.error(error); // 处理错误信息});
  1. 定义接口地址:定义一个常量 API_URL,代表后端接口的地址。

  2. 发送 GET 请求:通过 fetch() 方法,向后端发送 GET 请求,请求地址为 API_URL。该方法返回一个 Promise 对象。

  3. 处理响应数据:使用 Promise 的 then() 方法处理返回的响应数据。response.json() 将响应体解析为 JSON 格式的数据,返回一个 Promise 对象。在第二个 then() 方法中,可以处理解析后的数据。

  4. 处理错误信息:使用 Promise 的 catch() 方法处理请求失败或返回错误信息的情况。

你需要将 API_URL 修改为具体的后端接口地址,并根据接口定义和数据格式对返回数据进行处理。此外,还可以通过设置请求参数、请求头信息等来进一步定制请求。注意,Fetch API 默认不会携带 Cookie 信息,如果需要发送 Cookie,需要在请求中设置 credentialsinclude

3.RESTful API

        RESTful API 是一种基于 HTTP 协议设计的 Web API。前端通过发送不同的 HTTP 请求(如 GET、POST、PUT、DELETE)到后端的不同资源路径来获取数据或执行操作。可以使用原生 AJAX、Fetch API 或者第三方库(如 axios)发送请求。

const API_URL = 'http://example.com/api/data'; // 接口地址const xhr = new XMLHttpRequest(); // 创建 XMLHttpRequest 对象xhr.open('GET', API_URL, true); // 配置请求方法和地址xhr.onload = function() {if (xhr.status === 200) {const responseData = JSON.parse(xhr.responseText); // 解析返回的数据console.log(responseData); // 处理返回数据} else {console.error('Request failed. Status:', xhr.status); // 处理请求失败情况}
};xhr.onerror = function() {console.error('Request failed'); // 处理请求出错情况
};xhr.send(); // 发送请求
  1. 定义接口地址:定义一个常量 API_URL,代表后端接口的地址。

  2. 创建 XMLHttpRequest 对象:通过 new XMLHttpRequest() 创建 XMLHttpRequest 对象。

  3. 配置请求方法和地址:使用 xhr.open() 方法配置请求的方法、地址和是否异步。

  4. 处理响应数据:在 xhr.onload 回调函数中,可以通过 xhr.status 判断请求是否成功,然后使用 xhr.responseText 获取返回的响应数据。根据接口返回的数据格式进行处理。

  5. 处理错误信息:在 xhr.onerror 回调函数中,可以处理请求出错的情况。

  6. 发送请求:通过 xhr.send() 方法发送请求。

你需要将 API_URL 修改为具体的后端接口地址,并根据接口定义和数据格式对返回数据进行处理。此外,还可以根据接口要求设置请求头、请求参数等。注意,使用原生 JavaScript 发送请求时需要手动处理状态码、解析数据等操作,如果对此过程不太熟悉,也可以考虑使用第三方库(如 Axios)简化请求过程。

4.GraphQL

        GraphQL 是一种查询语言和运行时环境,用于前端向后端获取数据。前端可以发送 GraphQL 查询请求到后端,具体请求的数据由前端决定,后端返回对应的结果。相比 RESTful API,GraphQL 具有更灵活的数据获取方式。

        首先,安装 graphql-request 库:

npm install graphql-request

        然后,在 JavaScript 中使用 graphql-request 库发送 GraphQL 请求:

const { request } = require('graphql-request'); // 引入库const API_URL = 'http://example.com/graphql'; // GraphQL 接口地址const query = `query {getUsers {idname}}
`; // GraphQL 查询语句request(API_URL, query).then(data => {console.log(data); // 处理返回数据}).catch(error => {console.error(error); // 处理错误信息});
  1. 引入 graphql-request 库:使用 require('graphql-request') 引入 request 方法。

  2. 定义接口地址:定义一个常量 API_URL,代表 GraphQL 接口的地址。

  3. 定义查询语句:使用模板字符串定义一个 GraphQL 查询语句,这里的查询语句是一个获取用户列表的示例。

  4. 发送请求:通过 request() 方法发送 GraphQL 请求,传递接口地址和查询语句作为参数。该方法返回一个 Promise 对象。

  5. 处理响应数据:使用 Promise 的 then() 方法处理返回的响应数据,在回调函数中可以处理解析后的数据。

  6. 处理错误信息:使用 Promise 的 catch() 方法处理请求失败或返回错误信息的情况。

你需要将 API_URL 修改为具体的 GraphQL 接口地址,并根据接口定义和查询需求构建相应的查询语句。此外,还可以在查询语句中添加变量、指令等来进一步定制请求。graphql-request 库还提供了其他方法和功能,如发送 Mutation 请求、设置请求头等,可以根据需求进行深入学习和使用。

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

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

初刷leetcode题目(8)——数据结构与算法

😶‍🌫️😶‍🌫️😶‍🌫️😶‍🌫️Take your time ! 😶‍🌫️😶‍🌫️😶‍🌫️😶‍🌫️…

VM安装Centos

文章目录 第2章 VM与Linux的安装2.1 VMWare安装2.2 CentOS安装 第3章 Linux文件与目录结构3.1 Linux文件3.2 Linux目录结构 第4章 VI/VIM编辑器4.1 是什么4.2 测试数据准备4.3 一般模式4.4 编辑模式4.5 命令模式4.6 模式间转换 第5章 网络配置和系统管理操作5.1 查看网络IP和网…

Java根据指定端口关闭进程(端口占用 Web server failed to start. Port 6061 was already in use.)

查询指定端口的pid netstat -ano | findstr 6063杀掉进程 taskkill /f /pid 36804

40.0/jdbc/Java数据连接/jar包运用增删改

目录 40.1. 回顾 40.2. 正文 40.1 为什么需要jdbc 40.2 如何连接mysql数据库 40 .3 jdbc容易出现的错误 40.4 完成删除 40.5 完成修改 40.1. 回顾 1. 自联查询: 自己连接自己的表。注意:一定要为表起别名。 2. 嵌套查询: 把一个查询的结果作为另一个查询的条件值。 3. 组…

mysql处理40w数据脚本执行慢问题

需求背景: 2张表 SS_ZYXX 1w数据,WD_GZPZ 50w数据 SS_ZYXX.id WD_GZPZ.zyxx_id 找到SS_ZYXX表有数据,关联表WD_GZPZ没有数据的SS_ZYXX表的id 处理方案 方案一: 联合查询: 下面sql,在mysql执行时间3…

随想录二刷Day24——二叉树

很久没有刷算法题了,又荒废了,习惯还得保持啊,希望能坚持一天1~2道题。 文章目录 二叉树32. 将有序数组转换为二叉搜索树33. 把二叉搜索树转换为累加树 二叉树 32. 将有序数组转换为二叉搜索树 108. 将有序数组转换为二叉搜索树 思路&…

[带余除法寻找公共节点]二叉树

二叉树 题目描述 如上图所示,由正整数1, 2, 3, ...组成了一棵无限大的二叉树。从某一个结点到根结点(编号是1的结点)都有一条唯一的路径,比如从10到根结点的路径是(10, 5, 2, 1),从4到根结点的路径是(4, 2, 1)&#x…

DBeaver连接MySQL提示“Public Key Retrieval is not allowed“问题解决方式

更新时间:2023年10月31日 11:37:53 作者:产品人小柒 dbeaver数据库连接工具,可以支持几乎所有的主流数据库.mysql,oracle.sqlserver,db2 等等,这篇文章主要给大家介绍了关于DBeaver连接MySQL提示"Public Key Retrieval is not allowed"问…

在CentOS上安装Nginx服务

配置EPEL源:首先,你需要安装EPEL源,这是一个为RHEL和CentOS提供额外软件包的存储库。你可以通过运行以下命令来安装EPEL源: sudo yum install -y epel-release sudo yum -y update安装Nginx:接下来,你可以…

Elasticsearch 聚合查询(Aggregation)详解

Elasticsearch中的聚合查询,类似SQL的SUM/AVG/COUNT/GROUP BY分组查询,主要用于统计分析场景。 实例: import org.apache.http.HttpHost; import org.elasticsearch.action.search.SearchRequest; import org.elasticsearch.action.search.…

yolov5检测(前向)输入视频输出(不在图上画标签形式的原)图片的方法,及设置每隔几帧保存的方式(不每帧保存减少重复)

这些天我忽然有个需求,要更新迭代一个场景的检测模型,甲方爸爸提供的新数据集是监控视频形式的(因为拍视频确实更加的方便),而我训练模型确实要标注好的图片形式。 根据这些条件的话,思路应该是要这样的:首先使用现有的…

记一次oracle错误处理

16:00:05 SQL> alter database open; alter database open * 第 1 行出现错误: ORA-01589: 要打开数据库则必须使用 RESETLOGS 或 NORESETLOGS 选项 16:00:49 SQL> startup ORA-01081: 无法启动已在运行的 ORACLE - 请首先关闭它 16:02:56 SQL> shutdown immediate O…

大数据平台/大数据技术与原理-实验报告--实战HDFS

实验名称 实战HDFS 实验性质 (必修、选修) 必修 实验类型(验证、设计、创新、综合) 综合 实验课时 2 实验日期 2023.10.23-2023.10.27 实验仪器设备以及实验软硬件要求 专业实验室(配有centos7.5系统的linu…

15. 三树之和(双指针)

这道题的思路是排序双指针。 对于排好序的数组,存在以下几种情况: 当元素i为正数时,其之后的数字不在存在三数之和等于0的情况了。当元素i为负数或0时,为了避免重复,依次从头遍历数组,检查当前元素i之后的…

文章解读与仿真程序复现思路——电力自动化设备EI\CSCD\北大核心《考虑碳排放分摊的综合能源服务商交易策略》

这篇文章的标题表明它将讨论一个关于综合能源服务商交易策略的主题,而在这个策略中,特别考虑了碳排放分摊的因素。以下是对标题中各关键词的解读: 综合能源服务商: 这指的是在能源领域提供多种服务的企业或组织,可能涵…

蓝桥杯day01——负二进制数相加

题目描述 给出基数为 -2 的两个数 arr1 和 arr2,返回两数相加的结果。 数字以 数组形式 给出:数组由若干 0 和 1 组成,按最高有效位到最低有效位的顺序排列。例如,arr [1,1,0,1] 表示数字 (-2)^3 (-2)^2 (-2)^0 -3。数组形式…

「江鸟中原」有关HarmonyOS-ArkTS的Http通信请求

一、Http简介 HTTP(Hypertext Transfer Protocol)是一种用于在Web应用程序之间进行通信的协议,通过运输层的TCP协议建立连接、传输数据。Http通信数据以报文的形式进行传输。Http的一次事务包括一个请求和一个响应。 Http通信是基于客户端-服…

C++之哈希

unordered系列容器的效率之所以比较高(尤其是查找),是因为它底层使用了哈希结构,即哈希表. 哈希概念 前言: 顺序结构以及平衡树中, 元素关键码与其存储位置之间没有对应的关系, 因此在查找一个元素 时, 必须要经过关键码的多次比较. 顺序查找时间复杂度为O(N), 平衡树中为树的…

ESP32-Web-Server编程- JS 基础 4

ESP32-Web-Server编程- JS 基础 4 概述 HTML 内联事件处理器,你永远不应该使用 HTML 事件处理器属性——因为那些已经过时了,使用它们是不好的做法。 在前端编程中,除了将期望发生的事件写为 JS 文件外,还可以使用一些组件自带…

java编程:⼀个⽂件中存储了本站点下各路径被访问的次数,请编程找出被访问次数最多的10个路径

题目 编程题:⼀个⽂件(url_path_statistics.txt)中存储了本站点下各路径被访问的次数 请编程找出被访问次数最多的10个路径时间复杂是多少,是否可以优化(假设路径数量为n)如果路径访问次数⽂件很⼤&#x…