在 Vue.js 中，编写接口需要遵循以下步骤：创建一个 Axios 实例，指定 baseURL、timeout 和 headers；使用 Axios 实例发送 get()、post()、put() 或 delete() 请求；处理响应，检查 response.status 并访问 response.data 或 response.error；使用异步处理错误，通过 catch() 捕捉请求错误；创建多个 Axios 实例以便连接到不同的 API。
Vue.js 中如何编写接口？
在 Vue.js 中编写接口通常涉及以下步骤：
1. 创建一个 Axios 实例
import axios from "axios";
const api = axios.create({
baseURL: "https://example.com/api",
timeout: 10000,
headers: { "Content-Type": "application/json" },
});-
baseURL是 API 的基础 URL。 -
timeout设置请求的超时时间。 -
headers指定发送到 API 的请求头。
2. 使用 Axios 实例发送请求
立即学习“前端免费学习笔记（深入）”；
魔法映像企业网站管理系统
下载
技术上面应用了三层结构，AJAX框架，URL重写等基础的开发。并用了动软的代码生成器及数据访问类，加进了一些自己用到的小功能，算是整理了一些自己的操作类。系统设计上面说不出用什么模式，大体设计是后台分两级分类，设置好一级之后，再设置二级并选择栏目类型，如内容，列表，上传文件，新窗口等。这样就可以生成无限多个二级分类，也就是网站栏目。对于扩展性来说，如果有新的需求可以直接加一个栏目类型并新加功能操作
// 获取数据
api.get("/users").then((response) => {
// 处理响应数据
});
// 发送数据
api.post("/users", { name: "John Doe" }).then((response) => {
// 处理响应数据
});
// 更新数据
api.put("/users/1", { name: "John Smith" }).then((response) => {
// 处理响应数据
});
// 删除数据
api.delete("/users/1").then((response) => {
// 处理响应数据
});-
get(),post(),put(), 和delete()方法用于发送相应的 HTTP 请求。 - 请求的 URL 将添加到
baseURL后面。 - 可以通过向请求中传递一个对象来发送数据。
3. 处理响应
api.get("/users").then((response) => {
if (response.status === 200) {
// 请求成功，处理响应数据
} else {
// 请求失败，处理错误
}
});-
response.status属性包含服务器响应的 HTTP 状态码。 - 如果请求成功，则响应数据可以通过
response.data访问。 - 如果请求失败，则错误信息可以通过
response.error访问。
4. 使用异步处理错误
api.get("/users").catch((error) => {
// 处理请求错误
});- 使用
catch()方法来捕捉并处理请求错误。 - 错误对象包含有关错误的详细信息。
5. 使用多个 Axios 实例
const api1 = axios.create({ baseURL: "https://example1.com/api" });
const api2 = axios.create({ baseURL: "https://example2.com/api" });- 可以创建多个 Axios 实例来连接到不同的 API。
- 每个实例可以具有自己的配置和请求处理逻辑。
