web-dev-qa-db-ja.com

Vue（TypeScript）でaxiosを使用するには？

vue（TypeScript）でaxiosを使用したいのですが、コードで問題が発生します。これが私のmain.tsです。

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

これは私のvue code スクリーンショットはこちら

Javascriptで別の方法で使用する前にTypeScriptを使用するのは初めてであり、問​​題はありませんでした。TypeScriptで使用するにはどうすればよいですか。

あなたの時間と解決策をありがとう。

javascripttypescriptvue.jsprototype
7
william

POST request？.

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

私はこれを行い、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;
  }
}
1
ary-T

手っ取り早い解決策の1つは、Vueオブジェクトをany型に設定することです。 TypeScriptは、Vueオブジェクトの$ axiosプロパティを認識しないことを通知します。

TypeScriptにVueオブジェクトが何であってもよいことを伝えると、必要なプロパティを追加できます。

const app : any = new Vue({})
0
Bergur

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
}
0
Andreas Bauer

TypeScriptでは、モジュール拡張を使用できます。 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 {
}}
0
william