一、目的
模拟后端接口
二、发请求
1. install
npm install axios
2. 配置
> src/utils/request.js
import axios from 'axios'; // axios 导入包
const service = axios.create({}); // axios 简单配置
// /api/user/id token
service.interceptors.request.use(
config => {
return config
}
) // axios 请求拦截
service.interceptors.response.use(
response => {
const { data } = response
// if (data.status == 200) {
// } else if (data.status == 403) {
// }
return data;
}
) // axios 响应拦截
export default service
- [axios官网](https://www.axios-http.cn/docs/example).
3. 对接口发起请求
> src/api/index.js
import request from '@/utils/request'
export const getUsers = () => request({
url: '/api/users',
method: 'get'
})
- axios发起请求的代码都维护在api下。
三、Mock模拟响应
1. install
npm install mockjs
2. 配置
> src/mock/index.js
import Mock from 'mockjs'
// mall 相关
Mock.mock(
'/api/users',
'get',
function() {
return Mock.mock({
"status": "200",
"msg": "请求成功",
"data|3": [{
"name": "@cname", // Mock.Random.cname(),
"age": "@integer(20,50)"
}]
})
}
)
- [MockJS官网](http://mockjs.com/examples.html).
- [MockJs github 官网文档](https://github.com/nuysoft/Mock/wiki).
3. 把 mock 导入main.js
导入才会执行，数据才会成功。
> main.js
import '@/mock'
- 三、请求成功且 mock 成功
1. About.vue
> src/views/About.vue
<template>
<!-- axios & mock-验证 -->
<div v-for="(item) in list" :key="item.name">
<span>{{item.name}}</span>
<span>{{item.age}}</span>
</div>
</template>
<script>
import { getUsers } from '@/api'
import { onMounted, reactive, toRefs } from 'vue'
export default {
setup(){
const data = reactive({
list: []
})
onMounted(()=>{
getUsers().then(res=>{
console.log(res)
data.list = res.data
})
})
const dataAsRefs = toRefs(data)
return dataAsRefs
}
}
</script>
- 四、优化 mock 代码
1. example 模块化
> src/mock/example.js
import Mock from 'mockjs'
export default {
getUsers: () => {
return Mock.mock({
"status": "200",
"msg": "请求成功",
"data|3": [{
"name": "@cname", // Mock.Random.cname(),
"age": "@integer(20,50)"
}]
})
}
}
2. mock 入口文件配置
> src/mock/index.js
import Mock from 'mockjs'
import example from './example'
// mall 相关
Mock.mock('/api/users', 'get', example.getUsers)
export default Mock;
