vue + typescript 踩坑筆記(二)

MADAO是不會開花的發表於2019-02-26

這次記錄一下axios在vue + typescript專案中的遇到的問題:

一般專案都會自己封裝請求方法,便於重試,請求錯誤處理,驗證等等,因為我寫的是個人專案所以封裝的不是很全面,就不貼程式碼了,主要是在封裝好之後,想要繫結到vue的原型上的時候遇到了一些問題。

vue + typescript 踩坑筆記(二)

首先封裝好之後,在index.ts檔案中匯出:

export default {
  install: function (Vue: any, Option: any) {
    Object.defineProperty(Vue.prototype, '$ajax', {value: Axios})
  }
}
複製程式碼

然後在mian.ts中匯入

import Axios from "./utils/request/"

Vue.use(Axios)
複製程式碼

這樣就可以在元件中使用this.$ajax來發出一個請求。

完成上面的步驟回到元件中使用的時候碰到了一個紅線提示:

Property '$ajax' does not exist on type 'Components'.

提示中的 Components 就是元件的名字。

在網上搜尋了一下,解決方案是在shims-vue.d.ts中新增以下的程式碼:

import Vue from 'vue';
import { AxiosInstance } from 'axios';
declare module 'vue/types/vue' {
  interface Vue {
    $ajax: AxiosInstance
  }
}
複製程式碼

可是新增了之後還是有問題,然後我再網上看了一個大神的回答,居然是要新增了之後重啟vscode。重啟之後果然是ok了。但是又出現一個問題,那就是在main.ts檔案中

vue + typescript 踩坑筆記(二)

又出現了這樣的紅線提示。

好吧,檢視官方文件發現這樣一句話:

vue + typescript 踩坑筆記(二)

難道是要自己新建一個宣告檔案嗎?

嘗試自己新建一個宣告檔案:

vue + typescript 踩坑筆記(二)

然後新增下面的程式碼,並把shims-vue.d.ts中新增的程式碼刪除:

import Vue from 'vue';
import { AxiosInstance } from 'axios';
declare module 'vue/types/vue' {
  interface Vue {
    $ajax: AxiosInstance
  }
}
複製程式碼

然後重啟vscode。世界和平了,所有的紅線都沒了。

補充:

在封裝axios的時候,假如用了自定義的 axios 例項,給它配置一些官方沒有的配置,比如重試次數,重試時間間隔等等,也是會有紅線提示的。

vue + typescript 踩坑筆記(二)

這個就和上面的問題一樣,那麼照貓畫虎,先去看axios中config的宣告檔案在哪裡:

vue + typescript 踩坑筆記(二)

在這個檔案中找到了AxiosRequestConfig:

vue + typescript 踩坑筆記(二)

可以看到所有的配置項都在裡面了。按照之前的寫法,在shims-requset-property.d.ts檔案中加入下面的程式碼:

import { AxiosInstance, AxiosRequestConfig } from 'axios';

declare module 'axios/' {
  interface AxiosRequestConfig {
    retry?: number;
    retryDelay?: number;
    __retryCount?: number;
  }
}
複製程式碼

只要有新的配置都可以在這裡面宣告。

最後,再記一個rap2使用過程的問題,就是mock.js中的方法是要在初始值這一欄使用@方法名使用,我一直在規則那一欄使用,搞了半天才發現。rap2的文件頁太不友好了。

vue + typescript 踩坑筆記(二)

相關文章