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 请求、设置请求头等,可以根据需求进行深入学习和使用。