Vue 中 axios 的超详细介绍
一、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企服之家，中国第一个企服评测及商务社交产业平台。
页:
[1]