這次記錄一下axios在vue + typescript專案中的遇到的問題:
一般專案都會自己封裝請求方法,便於重試,請求錯誤處理,驗證等等,因為我寫的是個人專案所以封裝的不是很全面,就不貼程式碼了,主要是在封裝好之後,想要繫結到vue的原型上的時候遇到了一些問題。
首先封裝好之後,在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檔案中
又出現了這樣的紅線提示。
好吧,檢視官方文件發現這樣一句話:
難道是要自己新建一個宣告檔案嗎?
嘗試自己新建一個宣告檔案:
然後新增下面的程式碼,並把shims-vue.d.ts中新增的程式碼刪除:
import Vue from 'vue';
import { AxiosInstance } from 'axios';
declare module 'vue/types/vue' {
interface Vue {
$ajax: AxiosInstance
}
}
複製程式碼
然後重啟vscode。世界和平了,所有的紅線都沒了。
補充:
在封裝axios的時候,假如用了自定義的 axios 例項,給它配置一些官方沒有的配置,比如重試次數,重試時間間隔等等,也是會有紅線提示的。
這個就和上面的問題一樣,那麼照貓畫虎,先去看axios中config的宣告檔案在哪裡:
在這個檔案中找到了AxiosRequestConfig:
可以看到所有的配置項都在裡面了。按照之前的寫法,在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的文件頁太不友好了。