在 Vue 2 中使用 Axios 调用 Promise

Question

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

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

您可以返回 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
         }
       })
     });
   });
 });

小提琴： https://jsfiddle.net/qo6fdv1n/2/