axios 封装

一、

封装 axios 可以帮助你更好地管理 HTTP 请求，包括错误处理、请求拦截、响应拦截、取消请求、设置默认配置等。以下是一个简单的 axios 封装示例：

javascript复制代码

	import axios from 'axios';
	import { Message } from 'element-ui'; // 假设你使用的是 Element UI 作为 UI 库
	// 创建一个 axios 实例
	const service = axios.create({
	baseURL: process.env.VUE_APP_BASE_API, // url = base url + request url
	// withCredentials: true, // 跨域请求时发送 cookies
	timeout: 5000 // 请求超时时间
	});
	// 请求拦截器
	service.interceptors.request.use(
	config => {
	// 在发送请求之前做些什么
	// 例如，添加 token 到 headers
	// if (store.getters.token) {
	// config.headers['X-Token'] = store.getters.token
	// }
	return config;
	},
	error => {
	// 对请求错误做些什么
	console.log(error); // for debug
	return Promise.reject(error);
	}
	);
	// 响应拦截器
	service.interceptors.response.use(
	response => {
	// 对响应数据做点什么
	// 例如，处理返回的状态码
	const res = response.data;
	if (res.code !== 200) {
	Message({
	message: res.message || 'Error',
	type: 'error',
	duration: 5 * 1000
	});
	// 50008: 非法的请求
	if (res.code === 50008) {
	// 跳转到登录页
	// router.push('/login');
	}
	return Promise.reject(new Error(res.message || 'Error'));
	}
	return res;
	},
	error => {
	console.log('err' + error); // for debug
	Message({
	message: error.message,
	type: 'error',
	duration: 5 * 1000
	});
	return Promise.reject(error);
	}
	);
	// 导出
	export default service;

在这个示例中，我们创建了一个 axios 实例，并设置了默认的配置（如 baseURL 和 timeout）。然后，我们添加了两个拦截器：一个请求拦截器和一个响应拦截器。

• 请求拦截器：在请求发送之前，你可以修改请求的配置（如添加 headers）。在这个示例中，我们只是简单地返回了配置。
• 响应拦截器：在响应返回之后，你可以对响应数据进行处理。在这个示例中，我们检查了返回的状态码，如果状态码不是 200，则显示一个错误消息，并拒绝 Promise。如果状态码是 50008（这通常表示未登录或登录已过期），你可以跳转到登录页面。

注意：这个示例假设你正在使用 Vue.js 和 Element UI，但你可以轻松地将其修改为你正在使用的任何框架或库。

二、

axios 是一个基于 Promise 的 HTTP 客户端，用于浏览器和 node.js。它使得发送 HTTP 请求变得非常简单。以下是如何使用 axios 的基本步骤：

1. 安装 axios

如果你在使用 Node.js，你可以通过 npm 来安装 axios：

bash复制代码

npm install axios

在浏览器中，你可以通过 CDN 引入：

html复制代码

<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>

2. 发送 GET 请求

javascript复制代码

	const axios = require('axios'); // 在 Node.js 中
	axios.get('https://api.example.com/data')
	.then(function (response) {
	// 处理响应数据
	console.log(response.data);
	console.log(response.status);
	console.log(response.statusText);
	console.log(response.headers);
	console.log(response.config);
	})
	.catch(function (error) {
	// 处理错误
	console.log(error);
	});

3. 发送 POST 请求

javascript复制代码

	axios.post('https://api.example.com/submit', {
	firstName: 'Fred',
	lastName: 'Flintstone'
	})
	.then(function (response) {
	console.log(response);
	})
	.catch(function (error) {
	console.log(error);
	});

4. 发送请求时配置参数

你可以在发送请求时配置各种参数，如 headers、timeout 等：

javascript复制代码

	axios({
	method: 'post',
	url: 'http://example.com',
	timeout: 1000, // 设置请求超时时间
	headers: {'X-Custom-Header': 'foobar'}, // 自定义请求头
	data: {
	firstName: 'Fred',
	lastName: 'Flintstone'
	}
	})
	.then(function (response) {
	// 处理响应数据
	})
	.catch(function (error) {
	// 处理错误
	});

5. 取消请求

你还可以使用 CancelToken 来取消请求：

javascript复制代码

	const CancelToken = axios.CancelToken;
	let cancel;
	axios.get('/user/12345', {
	cancelToken: new CancelToken(function executor(c) {
	// An executor function receives a cancel function as a parameter
	cancel = c;
	})
	});
	// 取消请求
	cancel();

6. 拦截器

axios 提供了请求和响应拦截器，允许你在请求被发送到服务器之前或响应被处理之前对其进行修改。

javascript复制代码

	// 添加请求拦截器
	axios.interceptors.request.use(function (config) {
	// 在发送请求之前做些什么
	return config;
	}, function (error) {
	// 对请求错误做些什么
	return Promise.reject(error);
	});
	// 添加响应拦截器
	axios.interceptors.response.use(function (response) {
	// 对响应数据做点什么
	return response;
	}, function (error) {
	// 对响应错误做点什么
	return Promise.reject(error);
	});

7. 其他功能

axios 还提供了许多其他功能，如批量请求、使用 FormData 发送文件等。你可以查阅其官方文档以获取更多信息。