Question

我想在vue（Typescript）中使用axios，但是我的代码遇到了麻烦。这是我的main.ts

import axios from 'axios'
Vue.prototype.$axios = axios
axios.defaults.baseURL = 'http://192.168.1.225:8088'

这是我的Vue代码 screenshot here

这是我第一次使用打字稿，在我以其他方式在javaScript中使用打字稿之前，我没有任何问题，那么如何在打字稿中使用它呢？

感谢您的时间和解决方案。

Answer 1

确定要使用POST请求吗？似乎是由于“ GetTreeTenant”而导致的GET请求，您只能尝试使用axios而不是$ axios。

let uri = '<url here>';
  this.axios.post(uri, data).then((response) => {
    console.log(response);
});

Answer 2

我建议您使用axios为您的http请求使用一项服务。我可以通过将http服务分成单独的文件来实现。假设您有一个API，并且使用了一个资源hero，那么代码将如下所示：

// services/http.ts

import axios from 'axios';

export default axios.create({
  baseURL: 'http://192.168.1.225:8088',
  params: {
    // API params go here
  }
});

对于英雄服务，您可以这样做：

// services/hero.ts

import http from './http';

export default class HeroService {
  getHero(heroId: string) {
    return axios.get(`heroes/${heroId}`);
  }

  ...
}

// A singleton instance
export const heroService = new HeroService();

Answer 3

一种快速而肮脏的解决方案是将Vue对象设置为键入any。 TypeScript让您知道它无法识别Vue对象上的$ axios属性。

当您告诉TypeScript Vue对象可以是任何东西时，您可以添加所需的任何属性。

const app : any = new Vue({})

Answer 4

在打字稿中，我们可以使用模块扩充。 https://vuejs.org/v2/guide/typescript.html#%E5%A2%9E%E5%BC%BA%E7%B1%BB%E5%9E%8B%E4%BB%A5%E9%85%8D%E5%90%88%E6%8F%92%E4%BB%B6%E4%BD%BF%E7%94%A8

declare module 'vue/types/vue' {
interface Vue {
}}

Answer 5

我这样做，并且可以在main.ts上完美运行

import Vue from 'vue';
import axios, { AxiosStatic } from 'axios';

axios.defaults.baseURL = 'http://192.168.1.225:8088';
Vue.prototype.$axios = axios;
declare module 'vue/types/vue' {
  interface Vue {
    $axios: AxiosStatic;
  }
}

Answer 6

我将HTTP / REST操作封装在单独的.ts文件中。在这里，我还使用async / await来获得更好的可读性代码。每个方法都声明了其输入和返回类型。

import axios from 'axios'

const http = axios.create({
  baseURL: `${SOME_SERVICE_URL}/base-path`,
  headers: { 'Content-Type': 'application/json' }
})

export async function getItemById (itemId: string): Promise<Item> {
  const response = await http.get(`/${itemId}`)
  return response.data
}

export async function createItem (item: Item): Promise<Item> {
  const response = await http.post('/', JSON.stringify(item))
  return response.data
}

如何在Vue（Typescript）中使用axios？

6 个答案: