vue中axios的极简封装使用

最新推荐文章于 2023-03-21 21:15:10 发布

2223811201

最新推荐文章于 2023-03-21 21:15:10 发布

阅读量138

点赞数

分类专栏： vue项目技术文章标签： vue ajax

本文链接：https://blog.csdn.net/qq_43626318/article/details/117258557

版权

vue项目技术专栏收录该内容

6 篇文章 0 订阅

订阅专栏

本文档展示了如何对 Axios 进行简单封装，并在 Vue.js 应用中使用。通过设置基础 URL、请求和响应拦截器，实现错误处理和数据转换，提供了获取设备列表、更新设备和删除设备的 API 函数。这些函数接收前端传入的参数，与后台进行交互，并处理返回的数据。同时，代码中还包含了错误提示和状态码检查。

摘要由CSDN通过智能技术生成

axios的超级简单封装使用

/* eslint-disable no-param-reassign */
import axios from 'axios';
import { Message } from 'element-ui';
import qs from 'qs';

const baseURL = process.env.NODE_ENV === 'development' ? '/api' : '';

const http = axios.create({
	baseURL,
	timeout: 5000,
	transformRequest: [
		function(data) {
			return qs.stringify(data);
		}
	]
});

// http request 拦截器
http.interceptors.request.use(
	(config) => {
		config.headers = {
			'Content-Type': 'application/x-www-form-urlencoded; charset=UTF-8'
		};
		return config;
	},
	(err) => {
		return Promise.reject(err);
	}
);

// http response 拦截器
http.interceptors.response.use(
	(response) => {
		if (response.status < 400) {
			if (response.data.status === 0) {
				return Promise.resolve(response.data.data);
			}
			return Promise.reject(response.data.message);
		}
		Message.error('网络故障');
		return Promise.reject();
	},
	(error) => {
		return Promise.reject(error.response.status);
	}
);

export default http;
export { baseURL };

上面的代码是一整个文件的内容直接复制即可使用！
下面的内容便是如何使用代码分为两个文件代码内容
第一部分，再次建立一个单独的文件来写代码

import http from './http';
// 获取终端列表
export function getDeviceListAPI(
	pageNum,
	pageSize,
	name,
	ip,
	groupId,
	onlineStatus
) {
	return http.post('/deviceManager/getDeviceList', {
		name,
		ip,
		groupId,
		onlineStatus,
		pageSize,
		pageNum
	});
}
// 修改编辑设备
export function updateDeviceAPI(deviceId, name, groupId) {
	console.log(deviceId);
	return http.post('/deviceManager/updateDevice', {
		deviceId,
		name,
		groupId
	});
}
// 删除设备
export function deleteDeviceAPI(deviceIds) {
	console.log(deviceIds);
	return http.post('/deviceManager/deleteDevice', { deviceIds });
}

```javascript

```javascript
在这里插入代码片

函数内容后面的括号中的单词就是前端需要给后台的参数代词（代替名称而已随便写但是要根据后台来写）


```javascript
import {
	getDeviceListAPI,
	// eslint-disable-next-line import/named
	deleteDeviceAPI,
	updateDeviceAPI
} from '../../api/deviceManager';

需要在vue文件中引入上面代码的文件并注册函数名称千万别写错了

	deleteend() {
			const vm = this;
			vm.delects = false;
			const deviceIds = vm.delectId;
			vm.checkBoxDataIds = vm.delectId;
			deleteDeviceAPI(deviceIds)
				.then((data) => {
					console.log(data);
					vm.getList();
					// this.tableData = data.list;
				})
				.catch((err) => {
					if (typeof err === 'string') {
						this.$message.error(err);
					}
				});
		},
		deleteDeviceAPI是我们注册的函数名称，它后面括号中的内容就是要给后台的参数，而then后面的就是后台返回给我们的内容！。then是成功后返回的，.catch则是失败返回的。
		大家直观实用自己的东西和重要的，我多余的代码就不用看了。
		乱花渐欲迷人眼啊！！！！
		希望大家做好人生规划，不要只知道职业规划。职业也只是我们人生中的沧海一粟！