如何在vue项目中使用mock.js，搭配axios使用

问题描述：

一个简单的mock.js在vue3项目中的使用方式，包括简单的请求封装。

实现效果：

// 创建一个vue项目
安装
npm install mockjs
npm install axios

//创建一个文件夹，假如叫Mock
// 在Mock中新建一个common.js
import Mock from 'mockjs'
// 定义生成10条用户数据
export const userList = Mock.mock({
  'list|10': [{
    "id|+1": 1,
    name: '@name',
    'age|18-30': 1,
    time: '@datetime(yyyy-MM-dd HH:mm:ss)'
  }]
})

//在Mock中新建一个index.js
// mock/index.js
import Mock from 'mockjs'
import { userList } from "./common.js"
// 根据id获取用户信息
Mock.mock(/^\/api\/users(?:\?id=\d+)?$/, 'get', ({ url }) => {
    // 获取？后面的参数
    const query = url.split('?')[1]
    let data = userList.list
    if (query) {
        const queryStr = new URLSearchParams(query)
        const id = queryStr.get('id')
        data = userList.list.find(item => item.id === Number(id))
    }
    // 解析参数
    return {
        code: 0,
        data,
    }
})
// 新增一个用户
Mock.mock('/api/users/update', 'post', ({ body }) => {
    let data = userList.list
    if (body) {
        const user = {
            id: userList.list.length + 1,
            ...JSON.parse(body),
            time: Mock.mock('@datetime(yyyy-MM-dd HH:mm:ss)')
        }
        data.push(user)
    }
    return {
        code: 0,
        data,
    }
});

// 创建一个文件夹api
//在api中新建一个http.js
import axios from "axios";
let http = axios.create({
    BASE_URL: '',
    timeOut: 10000,
})
let LoadingInstance
http.interceptors.request.use((config) => {
    // let token = XXX  // 获取token 进行验证
    // //定义请求或响应中媒体类型的信息
    // config.headers['Content-Type'] = 'application/json;charset=UTF-8'
    // 在发送请求之前做些什么
    // console.log('request', config)
    return config;
}, (error) => {
    // 对请求错误做些什么
    // console.log('requesterror', error)
    return Promise.reject(error);
});

// 添加响应拦截器
http.interceptors.response.use((response) => {
    // 对响应数据做点什么
    // console.log('response', response)
    const { status, data = {}, config = {} } = response
    return Promise.resolve(response.data);
}, (error) => {
    // 对响应错误做点什么
    const { status, data = {}, config = {} } = error.response
    switch (status) {
        case 400:
            break;
        default:
            break;
    }
    // console.log('responseerror', error)
    return Promise.reject(error);
});

//封装一个get请求
const getHttp = (url, params) => {
    return http.get(url,
        {
            params,
            headers: {
                "Content-Type": "application/x-www-form-urlencoded"
            }
        }

    )
}
//封装一个post请求
const postHttp = (url, data) => {
    return http.post(url, data, {
        // headers: {
        //     "Content-Type": "application/x-www-form-urlencoded"
        // }
    })
}

export {
    getHttp as $get,
    postHttp as $post,
}

//在APP.vue中使用
<script>
import { $get, $post } from "./api/http.js";
import "./Mock/index.js";
export default defineComponent({
  name: "App",
  setup(props, context) {
    function getList(params) {
      console.log("运行了getList");
      $get("/api/users",params).then((res) => {
        console.log(res, "结果");
      });
    }
    function updateList() {
      console.log("运行了updateList",);

      let obj = {
        name: 'luck',
        age:16
      }
      $post("/api/users/update", obj).then((res) => {
        console.log(res, "结果");
      });
    }
    onMounted(() => {
      updateList();
      getList({id:1});
    });
    return {
      getList,
      updateList,
    };
  },
});
</script>