axios二次封装
-
首先安装axios模块:
在终端输入npm install axios
进行安装,如果出现报错信息可能是因为axios和npm的版本不兼容,可以试下npm install --legacy-peer-deps axios --save
这个命令进行安装。在package.json文件中有axios信息时,则说明安装成功 -
配置api文件:
在src\assets\api文件夹下创建一个request.js文件用来给axios做二次封装,具体代码如下:
// 引入axios包
import axios from 'axios'
// 创建一个axios实例
const requests = axios.create({
baseURL: 'http://13.229.54.3:7000/api', // 地址前缀、基础URL:以后访问服务器默认加上这个前缀
timeout: 5000 // 超时时间
})
// 请求拦截器:在请求发过去之前要做的事情
requests.interceptors.request.use((config) => {
return config // 返回一个配置对象包括重要的header请求头
})
// 相应拦截器:请求失败或成功的反馈
requests.interceptors.response.use((res) => {
return res.data // 请求成功
}, () => {
return Promise.reject(new Error('faile')) // 请求失败
})
// 往外暴露axios
export default requests
- index.js使用
// 引入request模块
import requests from './requset'
// 向外暴露一个函数,来接收请求
export default {
// userList的请求方式
userList () {
return requests({
url: '/user',
method: 'post',
data: {
current: 1,
size: 5
}
})
},
addData () {
return requests({
url: '/user/add',
method: 'post'
})
}
}
vuex存储数据
- 在store文件夹下创建一个小仓库user.js里面存储来自服务器的数据
// 导入axios封装模块
import api from '@/assets/api/index'
// 直接向外暴露以下模块
export default {
state: {
userList: []
},
mutations: {
USERLIST (state, userList) {
state.userList = userList
}
},
actions: {
// 通过api'接口调用,向服务器发请求,获取服务器数据
async userList ({ commit }) { // userList是在mounted定义的
const result = await api.userList() // 使用引入的api函数,获取userList的地址请求
console.log(result)
commit('USERLIST', result.data) // 提交result并把返回结果赋值给USERLIST,最后再在mutats里面定义USERLIST
}
}
}
- 最后在index.js文件中引用一下
import Vue from 'vue'
import Vuex from 'vuex'
import user from './user'
Vue.use(Vuex)
export default new Vuex.Store({
state: {
},
getters: {
},
mutations: {
},
actions: {
},
modules: {
user
}
})
- 最后在组件中去使用这个vuex
<script>
import { mapState } from 'vuex'
export default {
mounted () {
// 通知vuex发请求,获取到的数据存储在仓库中,名字叫userList
this.$store.dispatch('userList')
},
computed: {
// 计算属性
...mapState({
// 定义一个userList传递接收过来的数据,在store仓库中的user标签里面的userList传过来
userList: (state) => state.user.userList
})
}
}
</script>