在前端开发中，使用Ajax进行数据交互是很常见的需求。而axios是一种流行的JavaScript库，用于发送HTTP请求，并提供了许多强大的功能和特性。将axios进行全局封装的主要目的是为了简化代码、提高开发效率、统一处理请求和响应，以及增强代码的可维护性和可扩展性。
以下是一些使用axios进行全局封装的好处：
代码复用：通过全局封装axios，可以避免在每个请求中都编写重复的代码。可以将公共配置、拦截器和错误处理等逻辑放在封装的部分中，并在需要发送请求的地方进行调用，从而实现代码的复用。
统一处理请求和响应：全局封装的axios可以在发送请求之前和接收响应之后进行拦截和处理。可以在请求拦截器中添加统一的请求头、请求参数处理等逻辑，而在响应拦截器中可以对返回的数据进行统一的处理，例如格式化、错误处理等。这样可以确保在整个应用中请求和响应的处理逻辑是一致的。
错误处理：通过全局封装axios，可以集中处理请求过程中的错误。可以在拦截器中捕获错误并进行统一处理，例如统一的错误提示、重试机制、跳转到登录页等。这样可以简化开发过程中对错误的处理，并提高代码的健壮性。
可扩展性：全局封装的axios可以方便地进行扩展。可以根据实际需求添加自定义的拦截器、认证机制、缓存策略等。这样可以根据项目的具体情况来定制和增强axios的功能。
总而言之，通过对axios进行全局封装，可以提高开发效率、减少重复代码、统一处理请求和响应、简化错误处理，并增强代码的可维护性和可扩展性。这样可以让前端开发更加高效、规范和可靠。
安装axios
npm i axios
步骤
import axios from "axios"
2.创建实列
const service= axios.create({
baseURL:api.baseURL,//请求地址
timeout:10000,//超时时间
headers:{//请求头参数
'Content-Type': 'application/json',
}
})
3.创建请求和响应的拦截器
请求拦截器就是在用户请求发起之前的一些操作，如设置token判断请求参数地址等
响应则是请求完成之后的一些操作如错误提示,响应数据处理等
service.interceptors.request.use(config=>{//请求拦截器
// console.log(config)
config.headers={
"Authorization":getToken()//读取token
}
return config
},err=>{
console.log(err)
return Promise.reject(err)
})
service.interceptors.response.use(response => {//响应拦击器
// 对响应数据做些什么
console.log(router.currentRoute)
let pathName = router.currentRoute
if(pathName.name!='login'){
if(response.data.status==1){
Message({
type:"error",
message:response.data.msg
})
}
}
return response.data;
}, error => {
// 对响应错误做些什么
console.log(error);
return Promise.reject(error);
});
4.导出请求
export default{
get(url,params){
return service ({
method:"get",
url,
params,
})
},
post(url,data){
console.log(data)
return service ({
method:"post",
url,
data:data
})
}
}
5.全据挂载
import http from './util/http';
Vue.prototype.$http = http
在mian.js导入封装的文件并使用Vue.prototype挂载到全局
使用:
this.$http.post(url, this.form).then(res => {
console.log(res)
})
如果创建实例的时候写了url,url只需要写后缀/url/xx
