vue3和ts中如何写axios

在Vue3和TypeScript中使用axios，需要先安装axios和@types/axios库，可以通过以下命令进行安装：

npm install axios @types/axios --save

然后在需要使用的组件中引入axios：

import axios from 'axios';

接下来可以使用axios发送请求，例如：

axios.get('/api/user')
  .then(response => console.log(response.data))
  .catch(error => console.log(error));

需要注意的是，由于TypeScript需要进行类型检查，我们可以为axios添加类型声明，例如：

interface User {
  id: number;
  name: string;
  email: string;
}

axios.get<User>('/api/user')
  .then(response => console.log(response.data))
  .catch(error => console.log(error));

这样就可以在接收响应数据时进行类型推断，从而避免类型错误。

相关问题

vue3和ts中如何使用Axios

在 Vue3 和 TypeScript 中使用 Axios，可以按照以下步骤进行：

1. 安装 Axios：

npm install axios

2. 在需要使用 Axios 的组件中引入 Axios：

import axios from 'axios'

3. 在组件中定义 Axios 请求的接口：

interface User {
  id: number;
  name: string;
  email: string;
}

interface ApiResponse {
  data: User[];
}

4. 在组件中使用 Axios 发送请求：

axios.get<ApiResponse>('https://example.com/api/users')
  .then(response => {
    const users = response.data.data;
    console.log(users);
  })
  .catch(error => {
    console.error(error);
  });

以上代码使用 Axios 发送 GET 请求，并在控制台输出响应数据中的用户信息。需要注意的是，我们在 Axios 的 `get` 方法中使用了泛型 `<ApiResponse>`，以指定响应数据的类型。

另外，如果你需要在整个应用程序中共享 Axios 实例，可以在 `main.ts` 中创建一个 Axios 实例，并将其作为 Vue3 的全局属性：

import { createApp } from 'vue';
import axios from 'axios';

const app = createApp(App);

app.config.globalProperties.$http = axios.create({
  baseURL: 'https://example.com/api',
});

app.mount('#app');

这样，在组件中就可以通过 `this.$http` 访问 Axios 实例了。

vue3和ts中如何封装axios

在Vue3和TypeScript中封装axios，可以按照以下步骤：

1. 安装axios和@types/axios：

npm install axios @types/axios --save

2. 在src目录下新建api目录，创建api.ts文件，定义全局的axios实例：

import axios, { AxiosInstance, AxiosRequestConfig } from 'axios'

const service: AxiosInstance = axios.create({
  baseURL: process.env.VUE_APP_BASE_API,
  timeout: 5000
})

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

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

export default service

3. 在api目录下创建一个api接口文件，定义所有的接口：

import service from './api'

export const getTodoList = () => {
  return service.get('/todo/list')
}

export const addTodo = (data: any) => {
  return service.post('/todo/add', data)
}

export const updateTodo = (data: any) => {
  return service.post('/todo/update', data)
}

export const deleteTodo = (id: number) => {
  return service.post(`/todo/delete/${id}`)
}

4. 在组件中调用api接口：

import { defineComponent } from 'vue'
import { getTodoList } from '@/api/api'

export default defineComponent({
  setup() {
    const fetchTodoList = async () => {
      try {
        const res = await getTodoList()
        // 处理数据
      } catch (error) {
        // 处理异常
      }
    }

    return {
      fetchTodoList
    }
  }
})

这样就完成了axios的封装和使用。需要注意的是，由于Vue3使用了Composition API，所以定义的组件需要使用`defineComponent`函数。另外，由于TypeScript的类型检查，需要在api接口中定义每个接口的参数类型和返回类型。