Vue3和TypeScript封装Axios以及使用Mock.js详解
Vue3是目前前端开发中的一个热门框架，它提供了丰富的工具和API，使得我们可以更加高效地开发前端页面。与此同时，为了提升代码的可维护性和可读性，我们通常会使用TypeScript进行编写，其中Axios是常用的发起HTTP请求的第三方库，而Mock.js则是用于生成模拟数据的工具。
在本文中，我们将讲解如何在Vue3中使用TypeScript对Axios进行封装，并且结合Mock.js实现开发中数据请求与模拟数据的应用。
为什么要封装Axios
使用Axios时，我们会发现每次使用的方式大概是相同的。如下图所示，我们用Axios向后台请求获取数据。
import axios from 'axios';
axios.get('/api/data').then((response) => {
console.log(response.data);
}).catch((err) => {
console.log(err);
});
在实际开发中，我们往往需要对Axios进行一定程度的封装，例如：
- 统一处理接口地址前缀
- 统一处理错误请求响应
- 支持统一的Token验证
- 未登录自动跳转登录页等
以上这些需求，都可以通过对Axios进行封装来轻松实现。而使用TypeScript则可以增加代码的可维护性和可读性，使得我们开发过程中的问题更容易被发现和解决。
TypeScript基本语法
在编写本文之前我们假设读者对TypeScript比较熟悉，如果您对TypeScript缺乏基础，那么您可以先去学习一下TypeScript的基本语法。在这里，我们只简单提及类型和接口。
类型
在TypeScript中，我们可以定义类型，例如：
const num: number = 100;
const str: string = "hello world";
const bool: boolean = false;
如果在定义时没有指定类型，TypeScript可以通过变量的值自动推断类型：
const num = 100; // 类型为number
const str = "hello world"; // 类型为string
const bool = false; // 类型为boolean
接口
TypeScript的接口类似于Java中的接口，用于定义类或对象应该具有的属性。例如：
interface Person {
name: string;
age: number;
}
const person: Person = {
name: "Tom",
age: 18
};
上述代码定义了一个Person接口，它包含两个属性name和age。同时我们也定义了一个person对象，它具有Person接口的属性。
Axios封装
在Vue3中使用TypeScript对Axios进行封装时，我们可以先创建一个config.ts文件，用于存放Axios相关配置项。
import axios from 'axios';
axios.defaults.baseURL = 'http://localhost:3000'
axios.defaults.timeout = 5000;
axios.defaults.headers.post['Content-Type'] = 'application/json';
export default axios;
在上述代码中，我们创建了一个名为config.ts的文件，并导出了一个默认的axios对象。在这个文件中，我们对Axios进行了一定的配置：
- 统一设置接口地址前缀
- 统一设置请求超时时间
- 统一设置请求头
在导出了一个默认的axios对象之后，我们可以在其他组件中直接使用这个对象发送请求。例如：
import axios from '@/utils/config';
axios.post('/api/login', { username: 'admin', password: '123456' }).then((response) => {
console.log(response);
}).catch((err) => {
console.log(err);
})
Axios的请求拦截和响应拦截
为了更好地统一处理请求或响应，我们可以对Axios的请求和响应进行拦截。例如：
import axios from '@/utils/config';
// 请求拦截
axios.interceptors.request.use(
(config) => {
// 在每个请求中添加Token验证
config.headers.Authorization = `Bearer ${localStorage.getItem('token')}`;
return config;
},
(error) => {
return Promise.reject(error);
}
);
// 响应拦截
axios.interceptors.response.use(
(response) => {
return response;
},
(error) => {
// 统一处理错误响应
if (error.response.status === 401) {
localStorage.removeItem('token');
router.replace({ path: '/login' }).then(() => {
location.reload();
});
}
return Promise.reject(error);
}
);
我们首先使用axios.interceptors.request.use方法来对每个请求添加Token验证。在接下来的axios.interceptors.response.use中，我们处理了错误响应，并在未登录的情况下自动跳转到登录页。
使用Mock.js
Mock.js是一个生成随机数据的工具，它可以帮助我们在开发时使用模拟数据而无需等待后端提供接口。在使用Mock.js时，我们需要先在Vue3项目中安装该依赖。
npm install mockjs --save-dev
安装完成后，我们可以定义一个mock.ts文件，用于存放模拟数据。
import Mock from 'mockjs';
Mock.mock('/api/data', 'get', () => {
return {
code: 0,
message: 'ok',
data: {
id: '01',
name: 'hello world'
}
};
});
在上述代码中，我们定义了一个mock('/api/data', 'get', () => {})的接口，它表示当请求/api/data接口时，响应的方式为GET请求，并返回一个带有id、name属性的对象。
在完成了mock.ts文件的编写之后，我们需要在main.ts文件中引入该文件，以便Mock.js能够生效。例如：
import { createApp } from 'vue';
import App from './App.vue';
import './index.css';
import './utils/mock';
createApp(App).mount('#app');
在上述代码中，我们引入了mock.ts文件，并在创建Vue实例前通过createApp方法建立了应用。
至此，我们已经完成了Vue3和TypeScript封装Axios以及使用Mock.js的应用，可以在开发时获得更好的开发体验，同时也能避免因等待后端接口而导致的开发时间增长。
示例应用1
下面是一个示例应用，用于向后台/post请求数据和处理响应结果。
首先，我们创建一个名为example.ts的文件，用于定义请求和响应。
interface ExampleRequest {
name: string;
age: number;
}
interface ExampleResponse {
code: number;
message: string;
data: {
id: string;
name: string;
age: number;
};
}
在这个文件中，我们定义了两个接口，分别用于请求和响应。在接下来的代码中，我们将使用这两个接口来定义请求和响应的数据。
在/src/utils目录下，我们创建一个名为api.ts的文件，在其中定义以下内容：
import axios from './config';
import { ExampleRequest, ExampleResponse } from '@/types/example';
export function postExample(params: ExampleRequest): Promise<ExampleResponse> {
return axios.post<ExampleResponse>(`/api/example`, params);
}
在上述代码中，我们调用了config.ts文件导出的axios对象，并使用ExampleRequest和ExampleResponse来定义请求和响应的数据格式。其中，postExample方法的params参数为ExampleRequest，传递时按实际情况编写。
在Vue3组件中使用postExample方法：
import { defineComponent, ref } from 'vue';
import { postExample } from '@/utils/api';
import { ExampleRequest } from '@/types/example';
export default defineComponent({
setup() {
const request: ExampleRequest = {
name: '',
age: 0
};
const response = ref<null | ExampleResponse>(null);
function submit() {
postExample(request).then((res) => {
console.log(res);
response.value = res;
}).catch((err) => {
console.log(err);
})
}
return {
request,
response,
submit
}
}
})
在上述代码中，我们使用defineComponent方法定义了一个Vue3组件，在该组件中定义了一个request对象和一个response对象，用于存储请求和响应的数据。同时，我们定义了一个submit方法，用于发送请求，并在成功返回响应时进行一些操作，例如将响应结果打印到控制台或将响应结果存储到response对象中。
示例应用2
下面是另一个示例应用，用于通过异步await发送Get请求并处理响应结果。
首先，我们创建一个名为example.ts的文件，用于定义请求和响应。
interface ExampleResponse {
code: number;
message: string;
data: {
id: string;
name: string;
age: number;
};
}
在这个文件中，我们定义了一个接口ExampleResponse，用于规定响应的数据格式。
在/src/utils目录下，我们创建一个名为api.ts的文件，在其中定义以下内容：
import axios from './config';
import { ExampleResponse } from '@/types/example';
export function getExample(): Promise<ExampleResponse> {
return axios.get<ExampleResponse>(`/api/example`);
}
在上述代码中，我们调用了config.ts文件导出的axios对象，并使用ExampleResponse来定义返回结果格式。
在Vue3组件中使用getExample方法：
import { defineComponent, ref } from 'vue';
import { getExample } from '@/utils/api';
import { ExampleResponse } from '@/types/example';
export default defineComponent({
setup() {
const response = ref<null | ExampleResponse>(null);
async function getData() {
try {
response.value = await getExample();
console.log(response.value);
} catch (err) {
console.log(err);
}
}
return {
response,
getData
}
}
})
在上述代码中，我们使用defineComponent方法定义了一个Vue3组件，在该组件中定义了一个response对象，用于存储响应的数据。同时，我们定义了一个getData方法，使用async/await语法发送请求，并在成功返回响应时进行一些操作，例如将响应结果打印到控制台或将响应结果存储到response对象中。
至此，我们在Vue3中使用TypeScript对Axios进行封装，并结合Mock.js实现了开发中数据请求与模拟数据的应用，在实际开发中，我们可以结合实际情况进行适度修改和拓展。
本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：vue3和ts封装axios以及使用mock.js详解 - Python技术站
微信扫一扫 
支付宝扫一扫 