Vue 中 axios 的超详细介绍

鼠扑 · 2025-3-16 11:36:56

马上注册，结交更多好友，享用更多功能，让你轻松玩转社区。

您需要登录才可以下载或查看，没有账号？立即注册

x

一、axios 的根本概念和安装

1.1 什么是 axios

Axios 是一个基于 promise 的 HTTP 库，可以用来发送网络请求。它可以在浏览器和 node.js 中使用，本质上是对原生 XMLHttpRequest 的封装，符合最新的 ES 规范，支持 Promise API，能够拦截请求和响应，转换请求和响应数据，取消请求，自动转换 JSON 数据等。
1.2 安装 axios

在 Vue 项目中，可以通过 npm 安装 axios：

npm install axios

复制代码

二、axios 的根本使用

2.1 GET 请求

GET 请求用于获取数据，请求指定的信息，返回实体对象。可以携带参数，有两种方式：
方式一：直接在 URL 中携带参数

axios.get("http://localhost:3000/list?id=1").then(
(res) => {
console.log(res.data);
},
(err) => {
console.log(err);
}
);

复制代码

方式二：使用 params 配置对象

axios
.get("http://localhost:3000/list", {
params: {
id: 2,
},
})
.then((res) => {
console.log(res.data);
})
.catch((err) => {
console.log(err);
});

复制代码

2.2 POST 请求

POST 请求用于向指定资源提交数据，例如表单提交或文件上传。

axios
.post("http://localhost:3000/list", {
name: "蜘蛛精",
age: 200,
address: "盘丝洞",
})
.then((res) => {
console.log(res.data);
})
.catch((err) => {
console.log(err);
});

复制代码

2.3 PUT 请求

PUT 请求用于更新数据，从客户端向服务器传送的数据代替指定的文档的内容。会把更新的数据完全替代原数据，如果只修改了部门的数据，原数据其他内容都会丢失。

axios
.put("http://localhost:3000/list/1", {
name: "玉皇大帝",
})
.then((res) => {
console.log(res.data);
})
.catch((err) => {
console.log(err);
});

复制代码

2.4 PATCH 请求

PATCH 请求用于对已知资源举行局部更新。

axios
.patch("http://localhost:3000/list/2", {
name: "王母娘娘",
})
.then((res) => {
console.log(res.data);
})
.catch((err) => {
console.log(err);
});

复制代码

2.5 DELETE 请求

DELETE 请求用于请求服务器删除指定的数据。

axios
.delete("http://localhost:3000/list/1")
.then((res) => {
console.log(res.data);
})
.catch((err) => {
console.log(err);
});

复制代码

三、axios 的配置

3.1 全局配置

全局配置是对所有请求都见效的配置，例如设置全局的超时时长和根本 URL：

axios.defaults.timeout = 2000;
axios.defaults.baseURL = "http://localhost:3000";

复制代码

3.2 实例配置

在项目中，可以创建多个 axios 实例，每个实例可以有不同的配置：

// 创建实例时配置
let instance = axios.create({
baseURL: "http://localhost:3000",
timeout: 2000,
});
// 创建实例后配置
let instance2 = axios.create();
instance2.defaults.timeout = 2000;
instance2.defaults.baseURL = "http://localhost:3000";

复制代码

3.3 请求配置

请求配置是针对单个请求的配置，例如设置请求的超时时长：

axios
.get("http://localhost:3000/list", {
timeout: 2000,
})
.then((res) => {
console.log(res.data);
})
.catch((err) => {
console.log(err);
});

复制代码

四、axios 的拦截器

拦截器用于在网络请求时，在发起请求大概响应时对操作举行处理，例如发送请求时添加网页加载的动画，或认证 token，逼迫用户先登录再请求数据；响应的时间，可以结束网页加载的动画，大概对响应的数据举行处理。
4.1 请求拦截器

axios.interceptors.request.use(
(config) => {
// 发生请求前的一系列的处理
console.log("开启加载动画");
console.log("认证是否有 token，如果没有，要去登录");
return config; // 拦截后的放行
},
(err) => {
// 请求错误处理
return Promise.reject(err);
}
);

复制代码

4.2 响应拦截器

axios.interceptors.response.use(
(response) => {
// 数据回来前的一系列的处理
console.log("关闭加载动画");
console.log("对数据进行一些处理");
return response.data; // 拦截后的放行，返回响应对象中的数据
},
(err) => {
// 响应错误处理
return Promise.reject(err);
}
);

复制代码

五、Vue 中 axios 的使用

5.1 在 Vue 原型上配置 $axios

在 Vue 项目的 main.js 文件中引入 axios，并将其放到 Vue 原型上，如许所有 Vue 实例（vm，vc）上都会有 axios：

import axios from "axios";
Vue.prototype.$axios = axios;

复制代码

5.2 在组件中使用 axios

在组件中，可以通过 this.$axios 来发送请求：

<template>
<div>
<button @click="getDate">点击发送请求</button>
</div>
</template>
<script>
export default {
name: "App",
methods: {
async getDate() {
let res = await this.$axios.get("http://localhost:3000/list");
console.log(res.data);
},
},
};
</script>

复制代码

六、封装 axios

为了提高代码的可维护性和复用性，可以对 axios 举行封装。
6.1 封装 request.js

在 src/utils 目录下创建 request.js 文件，封装 axios：

import axios from "axios";
const request = axios.create({
baseURL: "http://localhost:3000", // 设置基地址
timeout: 2000, // 请求超时：当 2s 没有响应就会结束请求
});
// 添加请求拦截器
request.interceptors.request.use(
function (config) {
// 发请求前做的一些处理，数据转化，配置请求头，设置 token,设置 loading 等，根据需求去添加
config.headers = {
"Content-Type": "application/x-www-form-urlencoded", // 配置请求头
};
return config; // 拦截后的放行
},
function (error) {
// 对请求错误做些什么
return Promise.reject(error);
}
);
// 添加响应拦截器
request.interceptors.response.use(
function (response) {
// 对响应数据做点什么
console.log("关闭请求数据动画");
console.log("对数据进行处理");
return response.data; // 只要响应对象中的数据
},
function (error) {
// 对响应错误做点什么
return Promise.reject(error);
}
);
export default request;

复制代码

6.2 在组件中使用封装后的 request

<template>
<div>
<button @click="getList">获取列表数据</button>
</div>
</template>
<script>
import request from "../utils/request";
export default {
name: "ShowList",
methods: {
async getList() {
let res = await request.get("/list");
console.log(res);
},
},
};
</script>

复制代码

七、二次封装

为了进一步提高代码的可维护性和复用性，可以将请求再次举行封装，创建 API 服务。
7.1 创建 API 服务

在 src/apis 目录下创建 showList.js 文件，导出请求函数：

import request from "@/utils/request";
// 请求 list 数据
export function getListInfo1() {
return request.get("/list");
}
// 请求 user 数据
export function getUserInfo1() {
return request.get("/user");
}

复制代码

7.2 在组件中使用 API 服务

<template>
<div>
<button @click="getList1">获取列表数据</button>
<button @click="getUser1">获取用户数据</button>
</div>
</template>
<script>
import { getListInfo1, getUserInfo1 } from "../apis/showList";
export default {
name: "ShowList",
methods: {
async getList1() {
let res = await getListInfo1();
console.log(res);
},
async getUser1() {
let res = await getUserInfo1();
console.log(res);
},
},
};
</script>

复制代码

八、处理跨域问题

在 Vue 项目中，通常会使用署理服务器来解决跨域问题。可以在 vue.config.js 文件中配置署理：

const { defineConfig } = require("@vue/cli-service");
module.exports = defineConfig({
devServer: {
proxy: {
"/api": {
target: "http://localhost:8000",
pathRewrite: { "^/api": "" },
ws: true,
changeOrigin: true,
},
},
},
});

复制代码

在组件中发送请求时，地址必要修改如下：

axios.get('/api/user').then(
response => {
console.log('服务器返回的数据：', response.data);
},
error => {
console.log('错误信息', error.message);
}
)

复制代码

九、总结

在 Vue 项目中使用 axios 发送网络请求，可以大大提高开发效率和代码的可维护性。通过封装 axios 和配置署理服务器，可以解决跨域问题，而且使代码更加简洁和复用性更高。在实际开发中，可以根据项目需求进一步扩展和优化这些功能。

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。

		自动登录	找回密码
密码			立即注册

Vue 中 axios 的超详细介绍

马上注册，结交更多好友，享用更多功能，让你轻松玩转社区。

0 个回复

快速回复

楼主热帖

标签云

浏览过的版块