Vue项目中如何封装axios（统一管理http请求）

这篇文章主要给大家介绍了关于Vue项目中如何封装axios（统一管理http请求）的相关资料，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧

1、需求说明

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

2、Vue项目结构

在本地创建Vue项目，目录结构如下：

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

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

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

3、代码示例

/http/api.js文件代码如下：

 export default { 'users_add': '/users/add', 'users_find': '/users/find', 'users_update': '/users/update', 'users_delete': '/users/delete' }

/http/index.js文件代码如下：

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

在main.js入口文件中引入封装好的 /http/index.js 文件，示例代码如下：

 import Vue from 'vue' import App from './App.vue' import router from './router' import store from './store' import http from './http' Vue.config.productionTip = false Vue.prototype.$http = http Vue.use(Elementui) new Vue({ router, store, render: h => h(App) }).$mount('#app')

在App.vue根组件中测试axios请求，示例代码如下：

这里需要有 http://localhost:3000/users/find 接口，不然请求会失败！