element-ui#Notification JavaScript Examples

void (() => {
    addEventListener('message', (m) => {
        if (m.origin === location.origin) {
            const msg = m.data;

            if (msg.type === 'first') {
                Store.commit('SET_CURRENT_TEMPLATE_TEXT_SETTING', msg.data.text);
                Store.commit('SET_CURRENT_CSV_DATA', msg.data.defaultData);
                Store.commit('SET_CURRENT_TEMPLATE_THEME_COLORS', msg.data.themeColors);
            }
            if (msg.type === 'FullConfig')
                Store.commit('SET_CURRENT_TEMPLATE_DEFAULT_DATA', msg.data);
            if (msg.type === 'Play')
                Store.commit('SET_TEMPLATE_CURRENT_AUDIO_CONFIG_PLAY_STATE', true);
            if (msg.type === 'PlayEnd')
                Store.commit('SET_TEMPLATE_CURRENT_AUDIO_CONFIG_PLAY_STATE', false);
            if (msg.type === 'RenderError')
                return Notification({
                    title: '模板渲染错误',
                    type: 'error',
                    message: msg.data
                });
        }
    });
})();

axios.interceptors.response.use(r => {
    if (r.data.code !== 200)
        Notification({
            title: '提示',
            message: `[${r.config.method}] ${r.config.url}请求失败`,
            type: 'error'
        });
    return r.data;
});

onMessage(msg) {
        if (msg.data !== 'pong') {
            const _msg = JSON.parse(require('@/utils/index').binaryToString(msg.data));

            this.callback(_msg);
            if (_msg.type === 'task_end' && _msg.data['cmd'] === 'task_processing')
                return Notification({
                    title: '系统消息',
                    message: `[${_msg.data['taskName']}] 合成完毕`,
                    type: 'success'
                });
            if (_msg.type === 'task_pending')
                return Notification({
                    title: '系统消息',
                    message: `[${_msg.data['taskName']}] 开始合成`,
                    type: 'success'
                });
            if (_msg.type === 'task_pro' && _msg.data['cmd'] === 'task_pro_ready')
                return Notification({
                    title: '系统消息',
                    message: `[${_msg.data['taskName']}] 开始转码`,
                    type: 'success'
                });
            if (_msg.type === 'task_pro' && _msg.data['cmd'] === 'task_pro_error')
                return Notification({
                    title: '系统消息',
                    message: `[${_msg.data['taskName']}] 转码失败`,
                    type: 'error'
                });
            if (_msg.type === 'task_pro' && _msg.data['cmd'] === 'task_pro_success')
                return Notification({
                    title: '系统消息',
                    message: `[${_msg.data['taskName']}] 转码完成`,
                    type: 'success'
                });
        }
    }

notify = ({ title, message, type, duration }) => {
  Notification({
    title: i18n.t(title),
    message: i18n.t(message),
    type: type,
    duration: duration,
  });
}

// response 拦截器
service.interceptors.response.use(
  response => {
    const code = response.status
    console.log("request")
    console.log(code)
    //console.log(response.data.status)
    const newCode = response.data.status
    console.log(newCode)
    // if (newCode != 200 || code < 200 || code > 300) {
    //   Notification.error({
    //     title: response.data.msg
    //   })
    //   return Promise.reject('error')
    // } else {
      return response.data
    //}
  },
  error => {
    console.log("errror")
    let code = 0
    try {
      code = error.response.status
    } catch (e) {
      if (error.toString().indexOf('Error: timeout') !== -1) {
        Notification.error({
          title: '网络请求超时',
          duration: 5000
        })
        return Promise.reject(error)
      }
    }
    if (code) {
      if (code === 401) {
        MessageBox.confirm(
          '登录状态已过期，您可以继续留在该页面，或者重新登录',
          '系统提示',
          {
            confirmButtonText: '重新登录',
            cancelButtonText: '取消',
            type: 'warning'
          }
        ).then(() => {
          store.dispatch('LogOut').then(() => {
            location.reload() // 为了重新实例化vue-router对象 避免bug
          })
        })
      } else if (code === 403) {
        router.push({ path: '/401' })
      } else {
        const errorMsg = error.response.data.msg
        if (errorMsg !== undefined) {
          Notification.error({
            title: errorMsg,
            duration: 5000
          })
        }
      }
    } else {
      Notification.error({
        title: '接口请求失败',
        duration: 5000
      })
    }
    return Promise.reject(error)
  }
)

//返回值code=1
service.interceptors.response.use(
  async response => {
    const dataAxios = response.data
    if (dataAxios.code === 0) {
      // 正常返回数据
      return dataAxios.data
    } else {
      const error = new Error(dataAxios.msg)
      // 需要重新登录
      // 50008 - 无效的 token
      // 50012 - 其它客户端登录
      // 50014 - token 过期
      if ([
        50008,
        50012,
        50014
      ].indexOf(dataAxios.code) >= 0) {
        Notification.error({
          title: dataAxios.msg,
          message: '请重新登录'
        })
        await store.dispatch('d2admin/user/logout', { focus: true, remote: false, back: true })
      } else {
        log(error)
      }
      return Promise.reject(error)
    }
  },
  error => {
    if (error && error.response) {
      switch (error.response.status) {
        case 400:
          error.message = '请求错误'
          break
        case 401:
          error.message = '未授权，请登录'
          break
        case 403:
          error.message = '拒绝访问'
          break
        case 404:
          error.message = `请求地址出错: ${error.response.config.url}`
          break
        case 408:
          error.message = '请求超时'
          break
        case 500:
          error.message = '服务器内部错误'
          break
        case 501:
          error.message = '服务未实现'
          break
        case 502:
          error.message = '网关错误'
          break
        case 503:
          error.message = '服务不可用'
          break
        case 504:
          error.message = '网关超时'
          break
        case 505:
          error.message = 'HTTP版本不受支持'
          break
        default:
          break
      }
    }
    log(error)
    return Promise.reject(error)
  }
)

notify = ({ title, message, type, duration }) => {
  Notification({
    title,
    message,
    type,
    duration: duration || 2500,
  });
}

// 响应拦截器
axios.interceptors.response.use(
    response => {
        if(loadingInstance){
            loadingInstance.close()
        }

        return response
    },
    error => {
        try {
            if(loadingInstance){
                loadingInstance.close()
            }

            if (error.response) {
                let res = error.response
                let message = '处理请求时遇到了问题，请稍后再试'
                if (res.data && res.data.msg) {
                    message = res.data.msg
                }
                switch (res.status) {
                    case 500:
                        Notification({
                            title: '错误提示',
                            message: '服务器内部错误',
                            type: 'error',
                            duration: 0 // 不自动关闭
                        })
                        break
                    default:
                        Notification({
                            title: '错误提示',
                            message: message,
                            type: 'error',
                            duration: 0 // 不自动关闭
                        })
                        break
                }
            }
            let err = error + '';
            if (err.indexOf('Network Error') > -1) {
                Message({
                    message: '向服务器发起资源请求时出错',
                    type: 'error',
                })
            }
            return Promise.reject(error.response.data)

        } catch (error) {error}
    }

)

install = (Vue, opts = {}) => {
  /* 全局accessToken */
  Vue.prototype.$baseAccessToken = () => {
    return accessToken || getAccessToken()
  }
  /* 全局标题 */
  Vue.prototype.$baseTitle = (() => {
    return title
  })()
  /* 全局加载层 */
  Vue.prototype.$baseLoading = (index, text) => {
    let loading
    if (!index) {
      loading = Loading.service({
        lock: true,
        text: text || loadingText,
        background: 'hsla(0,0%,100%,.8)',
      })
    } else {
      loading = Loading.service({
        lock: true,
        text: text || loadingText,
        spinner: 'vab-loading-type' + index,
        background: 'hsla(0,0%,100%,.8)',
      })
    }
    return loading
  }
  /* 全局多彩加载层 */
  Vue.prototype.$baseColorfullLoading = (index, text) => {
    let loading
    if (!index) {
      loading = Loading.service({
        lock: true,
        text: text || loadingText,
        spinner: 'dots-loader',
        background: 'hsla(0,0%,100%,.8)',
      })
    } else {
      switch (index) {
        case 1:
          index = 'dots'
          break
        case 2:
          index = 'gauge'
          break
        case 3:
          index = 'inner-circles'
          break
        case 4:
          index = 'plus'
          break
      }
      loading = Loading.service({
        lock: true,
        text: text || loadingText,
        spinner: index + '-loader',
        background: 'hsla(0,0%,100%,.8)',
      })
    }
    return loading
  }
  /* 全局Message */
  Vue.prototype.$baseMessage = (message, type) => {
    Message({
      offset: 60,
      showClose: true,
      message: message,
      type: type,
      dangerouslyUseHTMLString: true,
      duration: messageDuration,
    })
  }

  /* 全局Alert */
  Vue.prototype.$baseAlert = (content, title, callback) => {
    MessageBox.alert(content, title || '温馨提示', {
      confirmButtonText: '确定',
      dangerouslyUseHTMLString: true,
      callback: (action) => {
        if (callback) {
          callback()
        }
      },
    })
  }

  /* 全局Confirm */
  Vue.prototype.$baseConfirm = (content, title, callback1, callback2) => {
    MessageBox.confirm(content, title || '温馨提示', {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      closeOnClickModal: false,
      type: 'warning',
    })
      .then(() => {
        if (callback1) {
          callback1()
        }
      })
      .catch(() => {
        if (callback2) {
          callback2()
        }
      })
  }

  /* 全局Notification */
  Vue.prototype.$baseNotify = (message, title, type, position) => {
    Notification({
      title: title,
      message: message,
      position: position || 'top-right',
      type: type || 'success',
      duration: messageDuration,
    })
  }

  /* 全局TableHeight */
  Vue.prototype.$baseTableHeight = (formType) => {
    let height = window.innerHeight
    let paddingHeight = 400
    const formHeight = 50

    if (layout === 'vertical') {
      paddingHeight = 340
    }

    if ('number' == typeof formType) {
      height = height - paddingHeight - formHeight * formType
    } else {
      height = height - paddingHeight
    }
    return height
  }

  /* 全局lodash */
  Vue.prototype.$baseLodash = lodash
  /* 全局事件总线 */
  Vue.prototype.$baseEventBus = new Vue()
}