如何在 Vue (Typescript) 中使用 axios？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/52053730/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to use axios in Vue (Typescript)?
提问by william
I would like to use axios in vue (Typescript) but I get into trouble with my code. This is my main.ts
我想在 vue (Typescript) 中使用 axios 但我的代码遇到了麻烦。这是我的 main.ts
import axios from 'axios'
Vue.prototype.$axios = axios
axios.defaults.baseURL = 'http://192.168.1.225:8088'
and this is my vue code screenshot here
这是我的 vue 代码 截图
This is the first time I use typescript，before I used it another way in javaScript and I did not have any problem, so how can I use it in TypeScript?
这是我第一次使用 typescript，之前我在 javaScript 中用过其他方式，没有任何问题，那么我如何在 TypeScript 中使用它？
Thank you for your time and solution.
感谢您的时间和解决方案。
回答by ary-T
I do this and work perfectly on main.ts
我这样做并在 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;
}
}
回答by regex
Are you sure to use POST request? It seems like GET request because of 'GetTreeTenant' and you can try only axios instead $axios.
您确定使用 POST 请求吗？由于“GetTreeTenant”，这似乎是 GET 请求，您只能尝试使用 axios 而不是 $axios。
let uri = '<url here>';
this.axios.post(uri, data).then((response) => {
console.log(response);
});
回答by Andreas Bauer
I'm encapsulate HTTP/REST operations in separate .tsfiles. Here I also use async/await to have better readable code. Each method declared its input and return types.
我将 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
}
回答by codejockie
I want to suggest you use a service for your http request using axios. I would do this by separating my http services into separate files. Say you have an API and you use a resource say herothen the code will look something like this:
我想建议您使用 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
}
});
For hero service you could do this:
对于英雄服务，您可以这样做：
// 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();
回答by william
In typescript,we can use module augmentation. 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
在打字稿中，我们可以使用模块扩充。 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 {
}}
回答by Bergur
One quick and dirty solution would be to set your Vue object to type any. TypeScript is letting you know that it doesn't recognize the $axios property on the Vue Object.
一种快速而肮脏的解决方案是将您的 Vue 对象设置为输入 any。TypeScript 让您知道它无法识别 Vue 对象上的 $axios 属性。
When you tell TypeScript that the Vue object can be anything, you're allowed to add whatever properties you want.
当你告诉 TypeScript Vue 对象可以是任何东西时，你就可以添加任何你想要的属性。
const app : any = new Vue({})
