Vux: 你好，我想问下怎么在我封装的ajax请求js文件里调用vux的toast方法呢，这里我想处理后台抛出的错误

[bigbigbigbear]

api.js

axios.interceptors.response.use((res) =>{
    if(!res.data.status === 200){
        return Promise.reject(res);
    }
    return res;
}, (error) => {
    return Promise.reject(error);
});

你好，我想问下怎么在我封装的ajax请求js文件里调用vux的toast方法呢，这里我想处理后台抛出的错误

[airyland]

插件挂在 Vue 上，因此你不能直接调用，但是一般是在 main.js 里配置 axios，因此可以把 Vue 作为参数传进来

大概类似这样

import Vue from 'vue'
import { ToastPlugin } from 'vux'
Vue.use(ToastPlugin)

const api = require('./api')
api(Vue)

export default function (Vue) {
  axios.interceptors.response.use((res) => {
    if (!res.data.status === 200) {
      Vue.$vux.toast.show({
        text: 'Oops'
      })
      return Promise.reject(res);
    }
    return res;
  }, (error) => {
    Vue.$vux.toast.show({
      text: 'Oops'
    })
    return Promise.reject(error);
  });
}

[bigbigbigbear]

明白了，谢谢

[fxjs]

有没更好的方法呢？ 其它组件的弹出框 直接引入就可以用的

[airyland]

@fxjs 没计划拆成不依赖 Vue 的，封装的工具函数再定义一下变成 Vue 插件就可以直接调用了。

[chengsmart]

@airyland Hi，大神新年好，我同样遇到了这个问题，我按照issue的解决方案进行尝试，发现报错api is not function，（我的代码和该问题的代码完全一致，我require进来的文件可以log出来，并能看到接受的Vue参数，api这个变量肯定声明了哈），求思路，我该如何解决呢？非常感谢，祝福送上~

[chengsmart]

BTW，我的vux版本是2.2.0，node 9.4.0

[airyland]

@chengsmart 按照上面思路来，api 只是示例，按自身需求调整，如果出错，请给出所有代码。

[chengsmart]

main.js文件

import Vue from 'vue'
import FastClick from 'fastclick'
import VueRouter from 'vue-router'
import App from './App'
import router from './router'
import '@/permission'
import  { ToastPlugin } from 'vux'

Vue.use(ToastPlugin);
Vue.use(VueRouter);

const fetch = require('./utils/fetch');
fetch(Vue);

FastClick.attach(document.body);
Vue.config.productionTip = false;
/* eslint-disable no-new */
new Vue({
    router,
    render: h => h(App)
}).
$mount('#app-box')

fetch.js文件

import axios from 'axios'

export default function (Vue) {

    // 创建axios实例
    const service = axios.create({
        baseURL: process.env.BASE_API + '/taslyb2bappmobile/b2b', // api的base_url
        timeout: 15000 // 请求超时时间
    });

    // respone拦截器
    service.interceptors.response.use(
        response => {
            // TODO 请求接收后，停止等待动画
            // code为非0是抛错
            const res = response.data;
            alert(res.message);// 正常alert

            Vue.$vux.toast.show({text: '业务报错信息'});
            if (res.resCode != 200) {
                return Promise.reject('error')
            }
            return response.data
        },
        error => {
            Vue.$vux.toast.show({text: 'http报错'});
            // TODO 请求接收后，停止等待动画

            return Promise.reject(error)
        }
    );
}

报错信息

main.js?3479:16 Uncaught TypeError: fetch is not a function
    at eval (main.js?3479:16)
    at Object../src/main.js (app.js:4493)
    at __webpack_require__ (app.js:679)
    at fn (app.js:89)
    at Object.0 (app.js:4670)
    at __webpack_require__ (app.js:679)
    at app.js:725
    at app.js:728

@airyland 非常感谢在百忙之中解答问题，真心感谢，还望提供一个思路，我怀疑可能是我fetch文件是否export错误了。（btw，如果需要，我可以传code到github上），感谢感谢

[airyland]

你 console 一下 fetch 看看返回的数据就知道了吧，你使用的是 export default，试试 import fetch from './utils/fetch' 或者 const fetch = require('./utils/fetch').default，具体调试下

[chengsmart]

非常感谢，完美解决，大牛新年快乐！ @airyland

[lilywang711]

@airyland 如果是用在 nuxt中，怎么获取到 vue 实例呢