vue项目引入axios,vue3.0axios封装
本文主要介绍了vue项目中axios的封装要求。axios是一个轻量级的HTTP客户端，基于XMLHttpRequest服务执行HTTP请求，支持丰富的配置。以下详细内容，有需要的朋友可以参考一下。
一.导言封装后1。封装步骤2。封装目标3。用新的axios 4封装API4。axios的封装
目录
Axios是一个轻量级的HTTP客户端，基于XMLHttpRequest服务执行HTTP请求，支持丰富的配置、Promise、浏览器和Node.js从Vue2.0开始，你们就宣布取消vue-resource的官方推荐，转而推荐axios。现在axios已经成为大多数Vue开发者的首选。(如果你还不熟悉axios，可以在这里查看它的API。)
在封装之前，让我们看看在没有封装的实际项目中，axios请求是什么样子的。
大概是长这样：
axios( http://localhost:3000/data ，{
方法：“GET”，
超时：1000，
withCredentials: true，
标题：{
“内容类型”:“应用程序/json”，
授权： xxx ，
},
transform request:[function(data，headers) {
返回数据；
}],
//其他请求配置.
})。然后((数据)={
//todo:真实的业务逻辑代码
console.log(数据)；
}，(err)={
if (err.response.status===401) {
//处理授权错误
}
if (err.response.status===403) {
//处理服务器禁止的错误
}
//其他错误处理.
console . log(err)；
});
可以看到，在这段代码中，页面代码的逻辑只在第15行，顶部的一大块请求配置代码和底部的一大块响应错误处理代码几乎与页面的功能无关，而且这些内容在每个请求中都几乎相同，甚至有些部分完全相同。
一、简介
二、封装后
封装的本质是在要封装的内容之外添加各种东西，然后作为一个新的整体呈现给用户，从而达到扩展和易用的目的。
封装axios需要做的就是提前配置好axios上所有HTTP请求共享的配置，保留必要的参数和接口，然后作为新的axios返回。
目录结构如下(由Vue-cli 3.0 生成)：
-公共/
-模拟/
-db.json #我新创建的界面模拟数据
- src/
-资产/
-组件/
-路由器/
-商店/
-视图/
-家。某视频剪辑软件
- App.vue
- main.js
-主题.风格
- package.json
.
1.封装步骤
在主页上，启动一个axios请求就像调用一个只有几个参数的方法一样简单，这样我就可以专注于业务代码。
1. 将 axios 封装到一个独立的文件
在src下，创建utils/http.js文件cd src。
mkdir utils
触摸http.js
axios //src/utils/http.js简介
从“axios”导入axios；
创建一个类//src/utils/http.js
//.
新类别{
}
为不同的环境配置不同的请求地址。根据process.env.NODE_ENV配置不同的baseURL，这样项目只需要执行相应的打包命令，就可以自动切换不同环境下的请求主机地址。
//src/utils/http.js
//.
const getBaseUrl=(env)={
让base={
生产：“/”，
开发：“http://localhost:3000”，
测试：“http://本地主机：3001”，
}[env]；
如果(！基础){
base=“/”；
}
返回基地；
};
新类别{
构造函数(){
this . base URL=getbase URL(process . ENV . node _ ENV)；
}
}
配置超时属性，我一般设置为10秒。
//src/utils/http.js
//.
新类别{
构造函数(){
//.
this.timeout=10000
}
}
允许携带凭据的widthCredentials属性设置为true。
//src/utils/http.js
//.
新类别{
构造函数(){
//.
this.withCredentials=true
}
}
为此类的实例创建方法请求。在请求方法中，创建一个新的axios实例，接收请求配置参数，处理参数，添加配置，并返回axios实例(一个promise对象)的请求结果。
您也可以使用默认导出的axios实例，而不创建它，然后将所有配置放在它上面，但这样整个项目将共享一个axios实例。虽然这对于大多数项目来说已经足够了，但是有些项目中不同服务地址的请求和响应结构可能是完全不同的，此时共享一个实例是无法支持的。因此，为了使封装更加通用和灵活，我将使用axios的create方法，以便每个请求都是一个新的axios实例。
//src/utils/http.js
//.
新类别{
//.
请求(选项){
//每个请求都会创建一个新的axios实例。
const instance=axios . create()；
Const config={//将用户传递的参数与公共配置合并。
.选项，
baseURL: this.baseURL，
timeout: this.timeout，
with credentials:this . with credentials，
};
//配置拦截器，支持根据不同的URL配置不同的拦截器。
this.setInterceptors(instance，options . URL)；
返回实例(配置)；//返回axios实例的执行结果
}
}
因为拦截器的配置内容很多，所以封装成一个内部函数。
配置拦截器在发送请求之前对请求参数所做的所有修改都在这里统一配置。比如添加令牌证书、设置语言、设置内容类型、指定数据格式等。完成后，请记住返回到此配置，否则整个请求将不会发出。
我将在这里配置一个令牌。
//src/utils/http.js
//.
新类别{
//.
//这里的url允许你为需要特殊处理的接口路径设置不同的拦截器。
setInterceptors=(实例，url)={
instance . interceptors . Request . use((config)={//请求拦截器
//配置令牌
config . headers . authorization token=local storage . getitem( authorization token ) ；
返回配置；
}，err=promise . reject(err)；
}
//.
}
配置响应拦截器，在请求的then或catch处理之前预处理响应数据。比如过滤响应数据，更重要的是对各种响应错误码的统一错误处理，以及断网处理等等。
这里我来判断403和断线。
//src/utils/http.js
//.
新类别{
//.
setInterceptors=(实例，url)={
//.
instance . interceptors . response . use((response)={//响应拦截器
//todo:你要根据业务需要预处理响应结果的东西都放在这里。
console . log()；
返回响应；
}，(err)={
If (err.response) {//响应错误代码处理
开关(err.response.status) {
案例“403”:
//todo:处理程序服务器禁止错误
打破；
//todo:处理程序其他状态代码
默认值：
打破；
}
返回promise . reject(err . response)；
}
如果(！Window.navigator.online) {//断网处理
//todo:跳转到脱机页面
return-1；
}
返回promise . reject(err)；
});
}
//.
}
另外，在拦截器里，还适合放置loading等缓冲效果：在请求拦截器中显示加载，在响应拦截器中删除加载。这样，所有的请求都有一个统一的加载效果。
默认情况下导出一个新实例//src/utils/http.js。
//.
导出默认的new new axios()；
最后完整的代码如下：
//src/utils/http.js
从“axios”导入axios；
const getBaseUrl=(env)={
让base={
生产：“/”，
开发：“http://localhost:3000”，
测试：“http://本地主机：3001”，
}[env]；
如果(！基础){
base=“/”；
}
返回基地；
};
新类别{
构造函数(){
this . base URL=getbase URL(process . ENV . node _ ENV)；
this.timeout=10000
this.withCredentials=true
}
//这里的url允许你为需要特殊处理的接口路径设置不同的拦截器。
setInterceptors=(实例，url)={
instance . interceptors . request . use((config)={
//在此添加加载
//配置令牌
config . headers . authorization token=local storage . getitem( authorization token ) ；
返回配置；
}，err=promise . reject(err)；
instance . interceptors . response . use((response)={
//移除此处的加载
//todo:你要根据业务需要预处理响应结果的东西都放在这里。
返回响应；
}，(err)={
If (err.response) {//响应错误代码处理
开关(err.response.status) {
案例“403”:
//todo:处理程序服务器禁止错误
打破；
//todo:处理程序其他状态代码
默认值：
打破；
}
返回promise . reject(err . response)；
}
如果(！Window.navigator.online) {//断网处理
//todo:跳转到脱机页面
return-1；
}
返回promise . reject(err)；
});
}
请求(选项){
//每个请求都会创建一个新的axios实例。
const instance=axios . create()；
Const config={//将用户传递的参数与公共配置合并。
.选项，
baseURL: this.baseURL，
timeout: this.timeout，
with credentials:this . with credentials，
};
//配置拦截器，支持根据不同的URL配置不同的拦截器。
this.setInterceptors(instance，options . URL)；
返回实例(配置)；//返回axios实例的执行结果
}
}
导出默认的new new axios()；
Axios包装现已完成80%。我们还需要进一步把axios和interface结合起来，封装一层，这样才能达到我一开始设定的封装目标。
2.封装目标
在src目录下创建一个新的api文件夹。HTTP请求中涉及的所有接口都集中在这个目录中进行管理。创建一个新的home.js我们需要按照一定的规则对接口进行分类，一类接口对应一个js文件。这种分类可以按页面划分，也可以按模块划分等。为了让演示更直观，这里我按页来分。根据你的实际需要。使用新的axios封装API(修复url的值并合并用户传递的参数)，然后按名称导出这些函数。//src/api/home.js
从“@/utils/http”导入axios
export const fetch data=options=axios . request({
.选项，
URL:“/data”，
});
导出默认值{ }；
在api目录下新建一个index.js，在这个文件中汇总导出其他文件的接口。
//src/api/index.js
导出*自。/home ；
这一层将我们新的axios封装成一个更加简洁和语义化的接口方法。
现在我们的目录结构长这样：
-公共/
-模拟/
-db.json #接口模拟数据
- src/
-API/#所有接口都集中在这个目录下。
-home . js #主页中涉及的接口都封装在这里。
-index . js #项目中所有接口调用的入口
-资产/
-组件/
-路由器/
-商店/
-实用工具/
-http.js # axios封装在这里。
-视图/
-家。某视频剪辑软件
- App.vue
- main.js
-主题.风格
- package.json
.
3. 使用新的 axios 封装API
现在，当我们要发送HTTP请求时，只需引入api下的index.js文件，就可以调用任何接口，我们使用封装的axios。
//src/views/Home.vue
模板
div class=home
h1这是主页/h1
/div
/模板
脚本
//@是/src的别名
从“@/api/index”导入{ fetch data }；
导出默认值{
姓名：家，
已安装(){
FetchData() //axios请求在这里。然后((数据)={
console.log(数据)；
})。catch((err)={
console . log(err)；
});
},
};
/脚本
Axios请求封装在fetchData函数中，页面请求不需要任何axios API。就像调用一个简单的Promise函数来静默地发起请求以获得响应一样简单。而且你只需要专注于页面中的业务功能，而不被其他的事情所干扰。
关于vue项目中axios的封装请求的这篇文章到此为止。有关axios在vue中封装的更多信息，请搜索我们以前的文章或继续浏览下面的相关文章。希望大家以后能多多支持我们！
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。