VueJs 中的 Javascript：如何從異步獲取而不是 Promise 返回數據對象

Question

我有這個動作

actions: {
    testLogin(context, credentials) {
        const loginService = new FetchClient();
        let d = loginService.post('login', credentials);
        console.log(d);
    },

並且這個函數在另一個類中導入以存儲

async post(endpoint, params) {
    await fetch(this.url + endpoint, {
        'method': 'POST',
        headers: this.headers,
        body: JSON.stringify(params),
    })
        .then(response => {
            return response.json();
        })
        .then( (data) => {
            this.returnData =  data.data;
        })
        .catch(error => {
            console.log(error);
        });
    return this.returnData;
}

我得到了Promise {<pending>} ，我可以從 fetch 類中提取數據，但如果我在商店中則無法訪問數據，因為它是 Promise 而不是對象。 我該如何解決這個問題？

Answer 1

將 return 語句放在第二個then塊中：

async post(endpoint, params) {
    await fetch(this.url + endpoint, {
        'method': 'POST',
        headers: this.headers,
        body: JSON.stringify(params),
    })
        .then(response => {
            return response.json();
        })
        .then( (data) => {
            this.returnData =  data.data;
            return this.returnData;
        })
        .catch(error => {
            console.log(error);
        });
}

我什至建議您使用以下代碼以獲得更好的可讀性：

async post(endpoint, params) {
    const response = await fetch(this.url + endpoint, {
        'method': 'POST',
        headers: this.headers,
        body: JSON.stringify(params),
    })

    if (!response.ok) {
        const message = `An error has occured: ${response.status}`;
        throw new Error(message);
    }
    
    const resp_data = await response.json()

    return resp_data.data
}

然后像這樣調用你的方法：

post(endpoint, params)
    .then(data => {// do something with data})
    .catch(error => {
        error.message; // 'An error has occurred: 404'
    });

請參閱此異步/等待指南

Answer 2

你能試一下嗎：

async testLogin(context, credentials) {
    const loginService = new FetchClient();
    let d = await loginService.post('login', credentials);
    console.log(d);
}

Answer 3

As @Ayudh mentioned, try the following code:

    async post(endpoint, params) {
    try{
        let response = await fetch(this.url + endpoint, {
            'method': 'POST',
            headers: this.headers,
            body: JSON.stringify(params),
        });
        let data = await response.json();
        this.returnData =  data.data;
    }catch(e){
        console.log(e);
    }
    
    return this.returnData;
}