vue3.0axios封装,vue3引入axios
本文主要介绍了axios的软件包以及vue3实用教程中环境变量的相关信息。通过示例代码非常详细，对你的学习或者工作有一定的参考价值。有需要的朋友可以参考一下。
目录
axios基本使用配置包请求添加加载环境变量摘要
axios
Axios: ajax i/o系统。可以在浏览器和节点环境中发出网络请求的第三方库。
功能特性：
在浏览器中发送XMLHttpRequests请求，在node.js中发送http请求，支持Promise API拦截请求和响应，转换请求和响应数据等等。
基本使用
获取请求
//导入的axios是实例对象。
从“axios”导入axios
//axios方法返回promise。
const RES=await axios . get( https://http bin . org/get ，{
//传递查询参数
参数：{
名字：“克劳斯”
}
})
//服务器实际返回的数据放在data属性中
console.log(res.data)
发布请求
const RES=await axios . post( https://http bin . org/post ，{
数据：{
名字：“克劳斯”
}
})
请求请求
//axios的所有请求本质上都是调用Axios的request方法。
const res=await axios.request({
网址： https://httpbin.org/post ，
方法： post ，
数据：{
名字：“克劳斯”
}
})
全部
Axios.all本质上是Promise.all
const res=await axios.all([
axios . get( https://http bin . org/get ，{
参数：{
名字：“克劳斯”
}
}),
axios . post( https://http bin . org/post ，{
数据：{
名字：“克劳斯”
}
})
])
interseptor
//拦截器必须在请求和响应之前注册。
//请求拦截器use方法的两个参数——分别对应resolve和reject。
resolve方法的参数是请求的配置选项。
reject方法的参数是错误的对象。
axios.interceptors.request.use(
配置={
console.log(配置)
返回配置
},
err=console.error(err)
)
//响应拦截器use方法的两个参数——分别对应于resolve和reject
resolve方法的参数是响应体
reject方法的参数是错误的对象。
axios . interceptors . response . use(
res={
返回结果数据
},
err=console.error(err)
)
配置
//以下都是全局配置
Axios的所有全局配置都可以在属性defaults下设置。
//基本请求公共路径
axios . defaults . base URL= http://http bin . org
//超时时间
axios.defaults.timeout=10000
//需要传递的自定义请求标头
axios.defaults.headers={}
//本地配置
爱可信。get(/get ，{
参数：{
名字：“克劳斯”，
年龄：18岁
},
//本地配置可以覆盖全局配置
超时：5000，
邮件头：{}
})。然后((res)={
console.log(res.data)
})
封装
如果把axios直接引入到每一个需要发出网络请求的页面中，会导致以下问题：
每个页面都需要介绍axios，导致axios和逻辑耦合太强。如果以后需要修改，需要在每一个使用axios的页面中修改。
非常麻烦而且容易出错。
在页面请求的时候，我们会传递很多公共的配置，比如BASE_URL，TOKEN等。
因此，我们需要重新封装我们的网络请求，它通常放在src下的service或api文件夹中。
type.ts
从“axios”导入{ AxiosRequestConfig，AxiosResponse }
//自定义您自己的拦截器类型
导出接口拦截器{
requestInterceptor？(config:AxiosRequestConfig)=AxiosRequestConfig PromiseAxiosRequestConfig，
requestInterceptorCatch？(err: any)=any，
responseInterceptor？(RES:axios response)=axios response PromiseAxiosResponse，
responseInterceptorCatch？(err: any)=any，
}
//通过接口继承扩展Axios的axiosRequestConfig类型
导出接口配置扩展AxiosRequestConfig{
截击机？拦截器
}
环境ts
//在引入使用之前，将一些相关的配置配置为常量。
//将配置和调用解耦，如果需要修改，直接修改常量的值。
导出常量超时=10000
导出const BASE _ URL= https://http bin。org/
index.ts
从导入Api ./api
导入{
BASE_URL，
超时时间
}来自 env/env
常量api=新Api({
baseURL: BASE_URL，
超时：超时，
//不同的实例可能有不同的拦截器
//所以我们将拦截器封装成一个扩展属性进行传入
//拦截器：{
//requestInterceptor: config={
//console.log(请求成功)
//返回配置
//},
//requestInterceptorCatch:err=console。错误(err)，
//响应拦截器：RES=RES . data，
//responseiinterceptorcatch:err=console。错误(err)
//}
})
导出默认美国石油学会(American Petroleum Institute)
api.ts
从" axios "导入爱可信
从“元素加”导入{ ElLoading }
从" axios "导入类型{ AxiosInstance，AxiosRequestConfig }
从""导入类型{配置} ./type
//导出的属性和方法比较多所以使用类来进行封装
//因为类具有比较好的封装性
导出默认类别{
实例：AxiosInstance
构造函数（配置：配置){
//每次创建实例的时候，都调用axios.create方法
//axios.create可以返回一个爱可信实例
//这样保证我们可以使用不同的配置创建多个爱可信实例
这个。instance=axios。创建(配置)
//如果存在实例级别的拦截器就使用拦截器
//这是针对于每一个请求特有的拦截器-实例拦截
//这里的操作也可以通过转换请求和转换响应配置项来进行实现
if (config.interceptor) {
常数{拦截器}=配置
这个。实例。截击机。请求。使用(拦截器。请求拦截器，拦截器。请求拦截器捕捉)
这个。实例。截击机。回应。使用(拦截器。回应拦截器拦截器。响应拦截器
}
this.registerGlobalInterceptor(配置)
}
//这是所有实例共有的拦截器-全局拦截
//如果存在多个拦截器，那么多个拦截器都会被执行
registerGlobalInterceptor(选项：配置){
这个。实例。截击机。请求。use(config=config，err=err)
这个。实例。截击机。回应。use(RES=RES . data，err=err)
}
请求（配置：AxiosRequestConfig) {
返回这个. instance.request(配置)
}
}
请求时添加loading
从" axios "导入爱可信
从“元素加”导入{ ElLoading }
从" axios "导入类型{ AxiosInstance，AxiosRequestConfig }
从" element-plus/es/components/loading/src/loading "导入类型{ LoadingInstance }
从""导入类型{配置} ./type
//El-加载是插件不是组件，元素加的按需引入并不能正确的引入埃尔加载的样式
//所以需要自己手动进行引入埃尔加载的样式
导入元素加/主题粉笔/El加载。 CSS
导出默认类别{
实例：AxiosInstance
加载：加载实例未定义
构造函数（配置：配置){
这个。instance=axios。创建(配置)
if (config.interceptor) {
常数{拦截器}=配置
这个。实例。截击机。请求。使用(拦截器。请求拦截器，拦截器。请求拦截器捕捉)
这个。实例。截击机。回应。使用(拦截器。回应拦截器拦截器。响应拦截器
}
this.registerGlobalInterceptor()
}
registerGlobalInterceptor() {
这个。实例。截击机。请求。使用((Config:Config)={
//?-当左侧的操作数为空或者不明确的时，返回右侧操作数，否则返回左侧操作数
如果(配置？showLoading？真){
//开启装货
这个。加载=e加载。服务({
锁：真的，
文本："正在加载.",
背景： rgba(0，0，0，0.7)，
})
}
返回配置
}，err=err)
这个。实例。截击机。回应。使用(RES={
//关闭装货
这个，装货？关闭()
//axios返回的是字符串，所以需要反序列化
返回JSON.parse(res.data)
},错误={
这个，装货？关闭()
返回错误
})
}
请求(配置：AxiosRequestConfig) {
返回this.instance.request(配置)
}
}
环境变量
在开发中，有时我们需要根据不同的环境设置不同的环境变量。有四种常见的环境：
开发环境：开发生产环境：生产测试环境：测试预发布环境：阶段配置模式1:手动切换不同环境(不推荐)
//开发环境
//const BASE _ URL= http://example . org/dev
//const BASE_NAME=Klaus
//生产环境
//const BASE _ URL= http://example . org/prod
//const BASE_NAME=Alex
//测试环境
//const BASE _ URL= http://example . org/test
//const BASE_NAME=Steven
配置模式2-根据process.env.NODE_ENV的值进行区分
//vite默认会设置自己的环境变量。
//比如MODE，PROD，DEV，SSR，BASE_URL等。
if(import . meta . env . mode=== development ){
//.做某事
}否则{
//.做别的
}
配置模式3-编写不同的环境变量配置文件。
# .env.production
#注意：vite中的所有环境变量都必须以VITE_开头
生产中的我的应用程序
# .env.development
我的应用程序正在开发中
vite打包时会根据开发环境自动注入不同的环境变量。我们可以读取这些环境变量，用在需要的地方，比如vite配置文件，src源代码等等。
//使用
console . log(import . meta . env . vite _ APP _ TITLE)
总结
这就是这篇关于vue3实用教程的封装和环境变量的文章。有关VUE 3 axios的封装和环境变量的更多信息，请搜索我们以前的文章或继续浏览下面的相关文章。希望大家以后能多多支持我们！
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。