时间戳

首页 > 解决方案 > 如何在 AXIOS.interceptors.response.use() 中使用 SweetAlert2

vue.js - 如何在 AXIOS.interceptors.response.use() 中使用 SweetAlert2

问题描述

我尝试在我的 vue 项目中加入 SweetAlert2，并且能够使用我的 main.jsswal()在我的视图中全局访问函数。Vue.use()

但是当我尝试在AXIOS.interceptors.response.use()函数内部使用它时，它swal()变成了undefined.

这基本上就是我的interceptor.js 文件的样子。 

import axios from 'axios'

let instance = axios.create({
   baseURL: '/'
});

export const AXIOS = instance;

AXIOS.interceptors.response.use(

   function(response) {
      // $swal() becomes undefined
      this.$swal('Error', 'Some kind of error', 'error')
      return response;
   }, 

   function(error) {

      // TODO:

      return Promise.reject(error)
   }
)

关于如何合并它的任何想法？或者也许你们对如何在全球范围内处理响应有更好的想法？

标签： vue.jsaxios

解决方案

当您在回调函数中使用它时，上下文this可能不再属于您的 Vue 实例。

尝试使用以下内容修改您的interceptor.js：

import Vue from 'vue';

而不是使用this.$swal('Error', 'Some kind of error', 'error')

利用Vue.swal('Error', 'Some kind of error', 'error');

推荐阅读