<div id="content_views" class="markdown_views prism-tomorrow-night">
<svg xmlns="http://www.w3.org/2000/svg" style="display: none;">
<path stroke-linecap="round" d="M5,0 0,2.5 5,5z" id="raphael-marker-block" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);"></path>
</svg>
<h3><a name="t0"></a><a id="1_0"></a>1、需求说明</h3>
在使用Vue.js框架开发前端项目时，会经常发送ajax请求服务端接口，在开发过程中，需要对axios进一步封装，方便在项目中的使用。
2、Vue项目结构
在本地创建Vue项目，目录结构如下：
- public 静态资源文件
- src
|- assets 静态资源目录
|- components 公共组件目录
|- http axios封装目录
|- router 路由管理目录
|- store 状态管理目录
|- views 视图组件目录
|- App.vue 根组件
|- main.js 入口文件
- package.json npm配置文件
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
在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'
}
- 1
- 2
- 3
- 4
- 5
- 6
/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
})
}
<span class="token keyword">return</span> result
}
export default http
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
- 36
- 37
- 38
- 39
- 40
- 41
- 42
- 43
- 44
- 45
- 46
- 47
- 48
- 49
- 50
- 51
- 52
- 53
- 54
- 55
- 56
- 57
- 58
- 59
在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')
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
在App.vue根组件中测试axios请求，示例代码如下：
<template>
<div>
<button @click="getDate">发送请求</el-button>
</div>
</template>
<script>
export default {
methods: {
getDate(){
this.$http({
method: 'get',
url: 'users_find'
}).then(res=>{
console.log(res)
})
<span class="token punctuation">}</span>
}
}
</script>
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
这里需要有 http://localhost:3000/users/find 接口，不然请求会失败！
4、效果演示
启动Vue项目，在浏览器中访问Vue项目的地址，我的地址是 http://localhost:8080，点击按钮发送请求，获取的结果如下图所示。
到此，在Vue项目中就完成了简单的axios封装，你也可以根据自己的实际需求对axios进行封装，本文只是提供参考。
</div>