axios封装

最新推荐文章于 2024-04-11 10:24:18 发布

周磊磊要加油

最新推荐文章于 2024-04-11 10:24:18 发布

阅读量252

点赞数

CC 4.0 BY-SA版权

分类专栏： Vue 文章标签： post ajax vue

本文链接：https://blog.csdn.net/qq_42817182/article/details/103578969

Vue 专栏收录该内容

2 篇文章

订阅专栏

本文详细介绍了在Vue项目中如何进行axios的深度封装，包括请求拦截、响应拦截、错误处理、设置默认配置等，旨在提升开发效率和代码质量。同时，提到了如何结合Promise和async/await进行更优雅的异步处理。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

/** 
 * 封装axios
 */
import axios from 'axios';
// import store from '@/store';
// 
//设置默认地址
axios.defaults.baseURL = process.env.VUE_APP_URL
//设置请求超时
axios.defaults.timeout = 10000;
//post请求头的设置
axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded;charset=UTF-8';
//请求拦截器
axios.interceptors.request.use(
	config => {
		// 每次发送请求之前判断是否存在token，如果存在，则统一在http请求的header都加上token，不用每次请求都手动添加了
		// 即使本地存在token，也有可能token是过期的，所以在响应拦截器中要对返回状态进行判断
		const token = window.localStorage.getItem('token');
		if (token) {
			config.headers = {
				"Authorization": "Bearer " + window.localStorage.getItem('token'),
				'Content-Type': 'application/x-www-form-urlencoded'
			}
		}
		return config;
	},
	error => {
		return Promise.error(error);
	})
export default {
	get: function(url, params) {
		return new Promise((resolve, reject) => {
			axios.get(url, params)
				.then(res => {
					resolve(res.data);
				})
				.catch(err => {
					reject(err.data)
				})
		})
	},
	post: function(url, params) {
		return new Promise((resolve) => {
			axios({
					url: url,
					method: 'post',
					data: params,
					transformRequest: [
						function(data) {
							let ret = "";
							for (let key in data) {
								ret +=
									encodeURIComponent(key) +
									"=" +
									encodeURIComponent(data[key]) +
									"&";
							}
							return ret;
						}
					]
				})
				.then(res => {
					resolve(res.data);
				})
			// 				.catch(err => {
			// 					// reject(err.data)
			// 				})
		})
	}
}

参考链接：[https://juejin.im/post/5b55c118f265da0f6f1aa354]