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

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;

}

Answer 3

你能试一下吗：

async testLogin(context, credentials) {

    const loginService = new FetchClient();

    let d = await loginService.post('login', credentials);

    console.log(d);

}