当前位置：首页 > article >正文

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

article 2024/11/13 18:44:50

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); // 处理错误信息
  });

引入 axios 库：通过 import 语句引入 axios 库。
定义接口地址：定义一个常量 API_URL，代表后端接口的地址。
发送 GET 请求：通过 axios.get() 方法，向后端发送 GET 请求，请求地址为 API_URL。该方法返回一个 Promise 对象。
处理响应数据：使用 Promise 的 then() 方法处理返回的响应数据。response.data 表示服务端返回的数据。
处理错误信息：使用 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); // 处理错误信息
  });

定义接口地址：定义一个常量 API_URL，代表后端接口的地址。
发送 GET 请求：通过 fetch() 方法，向后端发送 GET 请求，请求地址为 API_URL。该方法返回一个 Promise 对象。
处理响应数据：使用 Promise 的 then() 方法处理返回的响应数据。response.json() 将响应体解析为 JSON 格式的数据，返回一个 Promise 对象。在第二个 then() 方法中，可以处理解析后的数据。
处理错误信息：使用 Promise 的 catch() 方法处理请求失败或返回错误信息的情况。

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

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(); // 发送请求

定义接口地址：定义一个常量 API_URL，代表后端接口的地址。
创建 XMLHttpRequest 对象：通过 new XMLHttpRequest() 创建 XMLHttpRequest 对象。
配置请求方法和地址：使用 xhr.open() 方法配置请求的方法、地址和是否异步。
处理响应数据：在 xhr.onload 回调函数中，可以通过 xhr.status 判断请求是否成功，然后使用 xhr.responseText 获取返回的响应数据。根据接口返回的数据格式进行处理。
处理错误信息：在 xhr.onerror 回调函数中，可以处理请求出错的情况。
发送请求：通过 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 {
      id
      name
    }
  }
`; // GraphQL 查询语句

request(API_URL, query)
  .then(data => {
    console.log(data); // 处理返回数据
  })
  .catch(error => {
    console.error(error); // 处理错误信息
  });

引入 graphql-request 库：使用 require('graphql-request') 引入 request 方法。
定义接口地址：定义一个常量 API_URL，代表 GraphQL 接口的地址。
定义查询语句：使用模板字符串定义一个 GraphQL 查询语句，这里的查询语句是一个获取用户列表的示例。
发送请求：通过 request() 方法发送 GraphQL 请求，传递接口地址和查询语句作为参数。该方法返回一个 Promise 对象。
处理响应数据：使用 Promise 的 then() 方法处理返回的响应数据，在回调函数中可以处理解析后的数据。
处理错误信息：使用 Promise 的 catch() 方法处理请求失败或返回错误信息的情况。

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

查看全文

http://www.kler.cn/a/149609.html