vue axios封装类方法

最新推荐文章于 2024-08-08 11:02:08 发布

“负拾捌”

最新推荐文章于 2024-08-08 11:02:08 发布

阅读量3.4k

点赞数

文章标签： axios封装

本文链接：https://blog.csdn.net/qq_49438920/article/details/124389638

版权

这篇博客介绍了如何在Node.js环境中通过npm安装axios，并创建一个工具目录，包括config.js、request.js和api.js三个文件。config.js用于设置不同环境的baseURL，request.js封装了axios请求，包括配置拦截器和公共配置。api.js则定义了具体的API请求方法，方便各组件调用。通过这种方式，可以实现请求的统一管理和环境切换。

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

1.下载axios

npm i axios

2.新建utils工具目录

在这里插入图片描述

3.创建config.js、、request.js、api.js

一、config.js用于配置不同环境下的baseURL（开发环境或者打包环境）

//config.js
export default {
	baseUrl: {
		dev: '',
		pro: ''
	}
}

二、request.js用于封装axios方法（配置拦截器、配置公共配置）

//request.js
import axios from "axios"
import config from './config.js'

//判断环境来获取不同的url
const baseUrl = process.env.NODE_ENV === 'development' ? config.baseUrl.dev : config.baseUrl.pro

class axiosRequest {
	constructor(baseUrl) {
		this.baseUrl = baseUrl
	}
	getConfig() {//公共基础配置
		const config = {
			baseURL: this.baseUrl,
			header: {}
		}
		return config
	}
	interceptor(instance) {//给实例配置拦截器
		// 添加请求拦截器
		instance.interceptors.request.use(function(config) {
			// 在发送请求之前做些什么
			return config;
		}, function(error) {
		 // 对请求错误做些什么
			return Promise.reject(error);
		});

		// 添加响应拦截器
		instance.interceptors.response.use(function(response) {
			// 对响应数据做点什么
			return response;
		}, function(error) {
			// 对响应错误做点什么
			// console.log(error)
			return Promise.reject(error);
		});
	}
	request(options) {//新建实例并配置实例并可传参
		const instance = axios.create() //新建axios实例
		options = {...this.getConfig(),...options} //参数（baseURL、其他参数）
		this.interceptor(instance) //给axios实例添加拦截器
		return instance(options) //给axios实例添加参数
	}

}

export default new axiosRequest(baseUrl) //暴露实例

三、api.js用于存放各个不同的接口请求方法

//api.js
import http from './request.js'
//用于存放各种专门的获取api的函数
//之后哪个组件需要使用axios就直接调用此js文件的方法
export const getData = () => {
	return  http.request({
		url: '/home/getData'
	})
}