Vue项目中封装axios统一管理http请求

1、需求说明

在使用Vue.js框架开发前端项目时&＃xff0c;会经常发送ajax请求服务端接口&＃xff0c;在开发过程中&＃xff0c;需要对axios进一步封装&＃xff0c;方便在项目中的使用。

2、Vue项目结构

在本地创建Vue项目&＃xff0c;目录结构如下&＃xff1a;

- public 静态资源文件- src|- assets 静态资源目录|- components 公共组件目录|- http axios封装目录|- router 路由管理目录|- store 状态管理目录|- views 视图组件目录|- App.vue 根组件|- main.js 入口文件- package.json npm配置文件


在Vue项目中创建 http目录 作为axios的管理目录&＃xff0c;在 http目录 下两个文件&＃xff0c;分别是

• /http/index.js 封装axios方法的文件
• /http/api.js 统一管理接口的文件

3、代码示例

/http/api.js文件代码如下&＃xff1a;

export default {&＃39;users_add&＃39;: &＃39;/users/add&＃39;,&＃39;users_find&＃39;: &＃39;/users/find&＃39;,&＃39;users_update&＃39;: &＃39;/users/update&＃39;,&＃39;users_delete&＃39;: &＃39;/users/delete&＃39;
}


/http/index.js文件代码如下&＃xff1a;

import axios from &＃39;axios&＃39;
import api from &＃39;./api&＃39;//创建axios实例对象
let instance &＃61; axios.create({baseURL: &＃39;http://localhost:3000&＃39;, //服务器地址timeout: 5000 //默认超时时长
})//请求拦截器
instance.interceptors.request.use(config&＃61;>{//此处编写请求拦截的代码&＃xff0c;一般用于弹出加载窗口console.log(&＃39;正在请求……&＃39;)return config
},err&＃61;>{console.error(&＃39;请求失败&＃39;,err)
})//响应拦截器
instance.interceptors.response.use(res&＃61;>{//此处对响应数据做处理console.log(&＃39;请求成功&＃xff01;&＃39;)return res //该返回对象会传到请求方法的响应对象中
},err&＃61;>{// 响应错误处理console.log(&＃39;响应失败&＃xff01;&＃39;,err)// return Promise.reject(err);
})//封装axios请求方法&＃xff0c;参数为配置对象
//option &＃61; {method,url,params} method为请求方法&＃xff0c;url为请求接口&＃xff0c;params为请求参数
async function http(option &＃61; {}) {let result &＃61; nullif(option.method &＃61;&＃61;&＃61; &＃39;get&＃39; || option.method &＃61;&＃61;&＃61; &＃39;delete&＃39;){//处理get、delete请求await instance[option.method](api[option.url],{params: option.params}).then(res&＃61;>{result &＃61; res.data}).catch(err&＃61;>{result &＃61; err})}else if(option.method &＃61;&＃61;&＃61; &＃39;post&＃39; || option.method &＃61;&＃61;&＃61; &＃39;put&＃39;){//处理post、put请求await instance[option.method](api[option.url],option.params).then(res&＃61;>{result &＃61; res.data}).catch(err&＃61;>{result &＃61; err})}return result
}export default http


在main.js入口文件中引入封装好的 /http/index.js 文件&＃xff0c;示例代码如下&＃xff1a;

import Vue from &＃39;vue&＃39;
import App from &＃39;./App.vue&＃39;
import router from &＃39;./router&＃39;
import store from &＃39;./store&＃39;
import http from &＃39;./http&＃39;Vue.config.productionTip &＃61; false
Vue.prototype.$http &＃61; httpVue.use(Elementui)new Vue({router,store,render: h &＃61;> h(App)
}).$mount(&＃39;#app&＃39;)


在App.vue根组件中测试axios请求&＃xff0c;示例代码如下&＃xff1a;

<template><div><button &＃64;click&＃61;"getDate">发送请求</el-button></div>
</template><script>
export default {methods: {getDate(){this.$http({method: &＃39;get&＃39;,url: &＃39;users_find&＃39;}).then(res&＃61;>{console.log(res)})}}
}
</script>


这里需要有 http://localhost:3000/users/find 接口&＃xff0c;不然请求会失败&＃xff01;

4、效果演示

启动Vue项目&＃xff0c;在浏览器中访问Vue项目的地址&＃xff0c;我的地址是 http://localhost:8080&＃xff0c;点击按钮发送请求&＃xff0c;获取的结果如下图所示。

到此&＃xff0c;在Vue项目中就完成了简单的axios封装&＃xff0c;你也可以根据自己的实际需求对axios进行封装&＃xff0c;本文只是提供参考。