猿创征文｜基于Axios的二次封装基础模板-可直接CV

基于Axios的二次封装基础模板-可直接CV

https://blog.csdn.net/weixin_42974827/article/details/126673483

• 处理了 根据请求方法 判断 参数（param，data）名称使用

import Axios from 'axios'

//创建axios实例
const Request = Axios.create({
	// 配置公共请求地址
	baseURL:'http://gmall-h5-api.atguigu.cn/api',
	// 请求超时时间
	timeout:'5000'
});

//请求拦截器
Request.interceptors.request.use(
	//错误处理
	err=>{
		console.log('请求错误',err)
		//记得一定要返回 err
		return err
	}
)

// 响应拦截器 - 包含响应成功 响应失败
Request.interceptors.response.use(
	// 响应成功 - 处理状态码与返回的信息
	(res) => {
		// 取出响应结果
		const data = res.data
		// 判断响应码
		if(data.code != 200){
			alert(data.message+'_响应错误'+'_详情见控制台')
			console.log(data)
			return Promise.reject(new Error(data.message))
		}
		return res
	},

	// 响应失败
	err => new Promise(new Error(err))
)


// Request	
// 直接暴露一个匿名函数, 三个重要参数
// 根据请求方法 判断 参数名称使用
export default ({method,url,data}) => {
	return Request({
		method,
		url,
		// 若 method为post 则用 data,否则用param
		[method.toLowerCase() === "get"? 'param' : 'data' ]:data
	})
} 

进一步的封装

增加了

• token统一配置
• 响应码分类处理

见资源（js文件）

Sam9029-资源-基本Axios的二次封装

---

🦖博主Sam9029 的Axios及网络基础专栏 其他文章

🐸Axios的介绍与作用 - 大白话_Sam9029的博客-CSDN博客

🐸(Aixos的引入与基本使用_Sam9029的博客-CSDN博客

🐸基于Axios的二次封装基础模板-可直接CV_Sam9029的博客-CSDN博客

**🐱‍🐉🐱‍🐉恭喜你，都看到这了，求赞，求收藏，求评论不过分吧**