Vue+Typescript中在Vue上挂载axios使用时报错问题

问题描述：

在使用Vue+Typescript时，将axios挂载到Vue上时出现错误，无法正常使用axios库。

解决方案：

1. 安装相关库

首先需要安装vue、vue-property-decorator、axios和@types/axios这些库：

npm install vue vue-property-decorator axios @types/axios --save-dev

1. 在Vue上引入axios模块

在 src/main.ts 文件中，引入 axios 模块并挂载到Vue上：

import Vue from 'vue';
import axios from 'axios';
import VueAxios from 'vue-axios';

Vue.use(VueAxios, {
  axios,
  // baseURL: 'http://api.example.com/', // API地址
  timeout: 10000, // 请求超时时间
});

1. 在vue.config.js中设置axios代理

在Vue中使用axios发送请求时，需要根据环境的不同设置不同的API地址，可以使用vue.config.js来为不同环境设置不同的代理。

示例代码：

module.exports = {
  devServer: {
    proxy: {
      '/api': {
        target: 'http://localhost:8080', // 本地调试地址
        changeOrigin: true,
        ws: true,
        pathRewrite: {
          '^/api': '', // 重写api路径
        },
      },
    },
  },
};

1. 在组件中使用axios

在Vue组件中，使用$http即可访问axios库，下面是一个例子：

import { Component, Vue } from 'vue-property-decorator';

@Component
export default class HelloWorld extends Vue {
  async created() {
    try {
      const response = await this.$http.get('/api/hello');
      console.log(response);
    } catch (error) {
      console.error(error);
    }
  }
}

1. 遇到的坑

由于Typescript严格类型检查的特性，使用axios时需要在代码中声明接口，否则会报错。下面是一个简单的例子：

interface Todo {
  id: number;
  title: string;
  completed: boolean;
}

@Component
export default class HelloWorld extends Vue {
  private todos: Todo[] = [];

  async getTodos() {
    try {
      const response = await this.$http.get<Todo[]>('/todos');
      this.todos = response.data;
    } catch (error) {
      console.error(error);
    }
  }
}

上面的代码中，我们需要使用 axios get方法传入Todo[]类型，这样Typescript才能正常检查代码。