Vue项目中,在main.js里设置axios全局,Iview this.$Notice(Message)等,无法使用

axianga
  • 88

如题

来张实现Iview的this.$Notice的部分代码(有些信息不方便展示,抱歉)

clipboard.png

然后我去触发这个Notice,浏览器输出如下

clipboard.png

请这个怎么处理,原生的alert可以正常使用,但样式丑,而且自定义麻烦,再加上采用了Iview UI,也没必要再自己弄

回复
阅读 7.9k
4 个回答

因为此时的 this 并不指向 vue 实例啊,所以找不到该方法,你可以直接

import { Notice } from 'iview'

Notice.warning()

这是之前回答别人的问题 原谅我直接复制过来的

原文如下:

个人不建议你这样发送请求。 希望你能看下去,比较简单的

你应该这样样子。

单独封装一个axios请求的方法 axios.js 其中包含了 post,get,fromdate请求方式。

// axios.js 放入如下
import axios from 'axios';
import Cookies from 'js-cookie';

axios.defaults.timeout = 9999999;
axios.defaults.baseURL ='你的接口地址';


//http request 拦截器
axios.interceptors.request.use(
  config => {
    let token = Cookies.get('token'); //注意使用的时候需要引入cookie方法,推荐js-cookie
    
    if(config.method=='post'){ // 如果是post请求 请求体自动加上token
        config.data = config.data;
        if(token){
          config.data.token = token
        } 
        // else {
        //   console.log('token失效')
        // }
        config.headers = {
        'Content-Type':'application/x-www-form-urlencoded',
        }
    } else if(config.method=='get'){ // 如果是get请求 url中拼接上
        config.params.token = token
        config.headers = {
            'Content-Type':'application/x-www-form-urlencoded',
        }
    }
    return config;
  },
  error => {
    return Promise.reject(err);
  }
);


//http response 拦截器
axios.interceptors.response.use(
    // token 可以判断已过期,重定向到登录页面
  response => {
    if(response.data.errCode ==2){
      router.push({
        path:"/login",
        querry:{redirect:router.currentRoute.fullPath}//从哪个页面跳转
      })
    }
    return response;
  },
  error => {
    return Promise.reject(error)
  }
)


/**
 * 封装get方法
 * @param url
 * @param data
 * @returns {Promise}
 */
export function get(url,params={}){
  return new Promise((resolve,reject) => {
    axios({
        url: url,
        method: 'GET',
        params: params,
        transformRequest: [function (data) {
          let ret = ''
          for (let it in data) {
            ret += encodeURIComponent(it) + '=' + encodeURIComponent(data[it]) + '&'
          }
          return ret
        }],
        })
        .then(res => {
            if(res.data.code == 1001){
                this.$Message.warning('登录超时,' + res.data.message);
                this.$router.push({path:'/'})
                return
            }
            resolve(res.data);
        })
        .catch(err => {
            reject(err)
        })
  })
}


/**
 * 封装post请求
 * @param url
 * @param data
 * @returns {Promise}
 */
 export function post(url,data = {}){
   return new Promise((resolve,reject) => {
        axios({
        url: url,
        method: 'POST',
        data: data,
        transformRequest: [function (data) {
          let ret = ''
          for (let it in data) {
            ret += encodeURIComponent(it) + '=' + encodeURIComponent(data[it]) + '&'
          }
          return ret
        }],
        })
        .then(res => {
            if(res.data.code == 1001){
                this.$Message.warning('用户超时' + res.data.message);
                this.$router.push({path:'/'})
                return
            }
            resolve(res.data);
        })
        .catch(err => {
            reject(err)
        })
   })
 }

 /**
  * from 表单
  */
 export function get_from(URL, PARAMS) {
  var p = new Promise((resolve, reject) =>{        //做一些异步操作
    var temp = document.createElement("form");
    temp.action = URL;
    temp.method = "get";
    temp.style.display = "none";
    for (var x in PARAMS) {
      var opt = document.createElement("textarea");
      opt.name = x;
      opt.value = PARAMS[x];
      temp.appendChild(opt);
    }
    document.body.appendChild(temp);
    temp.submit();
    this.$Loading.finish();
    resolve(temp) 
  });
  return p;
}

/**
 * 上传 excel
 */

export function up_excel(URL, PARAMS) {
  return new Promise((resolve,reject) => {
    let token = this.$Cookies.get('token')
    let config = {
        headers: {
        'Content-Type': 'multipart/form-data'
        }
    }
    PARAMS.append('token', token)

    axios.post(URL, PARAMS, config)
      .then( res => {
        resolve(res.data)
      })
      .catch(err=>{
        reject(err)
      })
  })
}

然后再main.vue 中将 axios.js中的方法暴露出去。然后全局注册使用(如下)

import {post,get,get_from,up_excel} from './api/axios'
Vue.prototype.$get=get;
Vue.prototype.$get_from = get_from;
Vue.prototype.$up_excel = up_excel;

这个时候,你就可以再组件中使用了。使用的方法如下

// url: 接口地址  data:参数
this.$post(url,data)
    .then(res=>{
        if(res.code == 200){
            // 成功
        } else {
            // 失败
        }
    })
    
 this.$get(url,data)
    .then(res=>{
        if(res.code == 200){
            // 成功
        } else {
            // 失败
        }
    })
   

ps: 我个人喜欢把整个接口放在一个文件中 类似于这个样子 linkUrl.js

let main = '你的接口地址'

const linkurl = {
    login : main + '/login/login',
}

export default linkurl

然后全局注册

import linkurl from './api/LinkUrl'

Vue.prototype.$linkurl = linkurl

这个时候可以直接在封装的请求中这样使用了

this.$post(this.$linkurl.login, data)  // this.$linkurl.login就是指的你的那个接口js文件
    .then(res=>{
        if(res.code == 200){
            // 成功
        } else {
            // 失败
        }
    })
    

1、引用import { Notice } from 'iview';,然后Notice.warning()
2、Vue.prototype.$Notice试试。
在main.js里面这个时候this还没有指向vue实例,所以这样写会报错。

如果你use了整个iView。你可以使用Vue.$Notice.warning()

宣传栏