如何将axios和promise的代码迁移到TypeScript？

Question

我有一个用 Vue 2（选项 API）/JavaScript 编写的项目。目标是迁移到 Vue 3（Composition API）/TypeScript。

有一个与 API 一起使用的代码，但我不明白一些 TypeScript 消息。代码如下：

import axiosInstance from './axiosInstance'

export default new (class bmRequest {
    username = 'user'
    password = '123456'

    token: string = null
    tokenInProcess: boolean = false

    auth() {
        if (this.tokenInProcess) {
            return this.tokenInProcess
        }
        return new Promise((resolve, reject) => {
            if (this.token) {
                resolve(true)
                return
            }
            this.tokenInProcess = axiosInstance
                .post('/auth', {
                    login: this.username,
                    password: this.password,
                })
                .then((response) => {
                    if (response.status === 200) {
                        this.token = response.data.SESSION_TOKEN
                        this.tokenInProcess = undefined
                        return true
                    } else {
                        this.tokenInProcess = false
                        return false
                    }
                })
            resolve(this.tokenInProcess)
        })
    }

    public get(url: string, params: { SESSION_TOKEN: string }) {
        return new Promise((resolve, reject) => {
            this.auth().then((status) => {
                if (status) {
                    params = { SESSION_TOKEN: this.token }
                    axiosInstance
                        .get(url, {
                            params,
                            headers: {
                                'Content-Type': 'application/json',
                                'Access-Control-Allow-Origin': '*',
                            },
                        })
                        .then((response) => {
                            resolve(response.data)
                        })
                        .catch((err) => {
                            reject(err)
                        })
                        .then(() => {})
                } else {
                    resolve(null)
                }
            })
        })
    }

请看一下带有 TypeScript 消息的屏幕截图：

如何摆脱它们？

第二个问题 - 这种方法（promise 和 axios）是否足够好，或者我们可以用另一种方式来实现，例如仅使用 axios、async/await 等？

Answer 1

tokenInProcess: boolean = false

您已将

tokenInProcess

定义为

boolean

类型，但随后分配了

Promise

。相应地更改类型

tokenInProcess?: Promise<boolean> = null;

这也应该修复您的其他错误，因为现在

auth()

仅返回一个 Promise。