vue ts axios封装

原创

mob649e81583204 2024-02-10 03:20:37 ©著作权

©著作权归作者所有：来自51CTO博客作者mob649e81583204的原创作品，请联系作者获取转载授权，否则将追究法律责任

Vue ts axios封装

在开发Vue项目时，经常需要与后端进行数据交互。为了简化代码的编写和提高开发效率，我们可以将常用的网络请求封装成一个插件，方便在项目中复用。本文将介绍如何使用Vue和TypeScript来封装axios，并使用这个封装后的库进行网络请求。

安装依赖

首先，我们需要安装一些依赖。在Vue项目的根目录下打开终端，执行以下命令：

npm install axios typescript

其中，axios是一个基于Promise的HTTP客户端，用于发送网络请求；typescript是一种静态类型检查的JavaScript的超集，可以提供更好的代码提示和类型检查。

创建API封装

在src目录下创建一个api目录，并在该目录下创建一个api.ts文件。这个文件将包含我们封装的axios实例和API接口。

import axios, { AxiosRequestConfig, AxiosResponse } from 'axios';

// 创建axios实例
const api = axios.create({
  baseURL: 'http://localhost:3000',
  timeout: 10000
});

// 请求拦截器
api.interceptors.request.use((config: AxiosRequestConfig) => {
  // 在发送请求之前做些什么
  return config;
}, (error: any) => {
  // 对请求错误做些什么
  return Promise.reject(error);
});

// 响应拦截器
api.interceptors.response.use((response: AxiosResponse) => {
  // 对响应数据做些什么
  return response.data;
}, (error: any) => {
  // 对响应错误做些什么
  return Promise.reject(error);
});

// 导出api实例
export default api;

这里我们使用axios.create方法创建了一个axios实例，并设置了基本的配置项，如baseURL和timeout。然后通过请求拦截器和响应拦截器来对请求和响应进行处理。

创建API接口

在api目录下创建一个example.ts文件，用于定义API接口。

import api from './api';

// 示例接口
export function getExample(): Promise<any> {
  return api.get('/example');
}

这里我们导入了之前创建的api实例，并定义了一个getExample方法，用于发送GET请求。

在组件中使用

在Vue组件中，我们可以通过调用API接口来发送网络请求。例如，在Home.vue组件中，我们可以这样使用：

<template>
  <div>
    <button @click="getData">获取数据</button>
    <div>{{ data }}</div>
  </div>
</template>

<script lang="ts">
import { defineComponent, ref } from 'vue';
import { getExample } from '../api/example';

export default defineComponent({
  name: 'Home',
  setup() {
    const data = ref('');

    const getData = async () => {
      try {
        const response = await getExample();
        data.value = response.data;
      } catch (error) {
        console.error(error);
      }
    };

    return {
      data,
      getData
    };
  }
});
</script>

这里我们通过调用getExample方法来获取数据，并将结果赋值给data变量。在模板中显示data的值。