1、安装Axios
npm install axios
2、封装一个api.ts
import axios from 'axios'; const api = axios.create({ baseURL:'http://localhost:8080', timeout: 1000 }); export default api
3、VUE项目配置main.ts全局引用
import { createApp } from 'vue' import './style.css' import App from './App.vue' import axios from './request/api.ts' import './' const app = createApp(App); app.mount('#app'); app.config.globalProperties.$axios=axios; //配置axios的全局引用
4、安装mockjs
npm install mockjs
5、配置mockjs
在src文件夹下新建index.js设置为mockjs的配置文档
// src/mock/index.js import Mock from 'mockjs' //导入mockjs //使用Mock下面提供的mock方法进行需要模拟数据的封装 //参数1，是需要拦截的完整请求地址，参数2，是请求方式，参数3，是请求的模拟数据 const testData = Mock.mock('http://localhost:8080/getdata','get',{ status:200, //请求成功状态码 dataList:[1,2,3,4,5,6,7,8,9,10] //模拟的请求数据 }) //导出 export default testData
6、在APP.vue调用api
<script setup lang="ts"> import { reactive } from 'vue' import api from "./request/api" //数据 const testData = reactive({ list: [] }); //测试请求方法 const getData = function () { api({ url: '/getdata', method: 'get' }).then(res => { alert('请求成功!'); testData.list = res.data.dataList; }); } </script>
