在 Vue 2 中使用 Axios 调用 Promise

Question

如何在这个 Axios POST 请求 Vue-Snotify 中实现 Promise？这是我的 Axios post 请求：

const url = 'https://foobar.api/photos';
axios.post(url, {photo: "data:image/jpeg;base64," + photo})
    .then(function (response) {
        console.info('Done');
    })
    .catch(function (error) {
        console.error(error);
    });

这个包 Vue-Snotify 我想添加一个通知程序，它会显示一个带有加载程序的通知框，显示进度。关于文档应该是这样的：

this.$snotify.async('Called with promise', 'Success async', () => new Promise((resolve, reject) => {
  setTimeout(() => resolve({
    title: 'Success!!!',
    body: 'We got an example success!',
    config: {
      closeOnClick: true
    }
  }), 2000);
}));

但是如何实现呢？我不是 Vue 专家，不知道如何将这两者结合起来。

Answer 1

您可以 return axios 来完成此操作，但如果您发现错误，Snotify 将显示一条成功消息。试试这个：

this.$snotify.async('Called with promise', 'Success async', () => {
    const url = 'https://foobar.api/photos';
    return axios.post(url, {photo: "data:image/jpeg;base64," + photo})
        .then(function (response) {
            console.info('Done');
        })
        .catch(function (error) {
            // handle error first

            throw error;
        });
}));

编辑：如果您想控制发往此的消息：

 this.$snotify.async('Called with promise', 'Success async', () => {
   return new Promise((resolve, reject) => {
     const url = 'https://foobar.api/photos';
     return axios.post(url, {photo: "data:image/jpeg;base64," + photo})
     .then(function (response) {
       resolve({
         title: 'Success!!!',
         body: 'We got an example success!',
         config: {
           closeOnClick: true
         }
       })
     })
     .catch(function (error) {
       reject({
         title: 'Error!!!',
         body: 'We got an example error!',
         config: {
           closeOnClick: true
         }
       })
     });
   });
 });

Fiddle: https://jsfiddle.net/qo6fdv1n/2/

在 Vue 2 中使用 Axios 调用 Promise

Calling Promise with Axios in Vue 2

vue.js

axios

vuejs2