Mint-UI之Toast与Indicator在flyio中的使用

Mint UI 是 由饿了么前端团队推出的 一个基于 Vue.js 的移动端组件库

Fly.js 是一个基于 promise 的，轻量且强大的Javascript http 网络库

(1) 安装mint-ui与flyio   npm install mint-ui flyio --save  

(2) 在引用fly的组件中,引入Indicator与Toast.或者将其封装到js中,页面引入这个js即可.

本人推荐后一种方法,如下:

const Fly = require('flyio/dist/npm/fly')
const fly = new Fly
import {Indicator, Toast} from 'mint-ui'

// 配置请求基地址
fly.config.baseURL = ''

// 添加请求拦截器
fly.interceptors.request.use(
  config => {
    Indicator.open({
      text: '加载中...',
      spinnerType: 'fading-circle'
    })
    return config
  },
  err => {
    Indicator.close()
    Toast({
      message: '加载超时',
      position: 'middle',
      duration: 3000
    })
    return Promise.reject(err)
  }
)

// 添加响应拦截器，响应拦截器会在then/catch处理之前执行
fly.interceptors.response.use(
  response => {
    let timetp = null
    clearTimeout(timetp)
    timetp = setTimeout(() => {
      Indicator.close()
      clearTimeout(timetp)
    }, 500)
    // 只将请求结果的data字段返回 
    return response.data
  },
  error => {
    if (error.response) {
      return Promise.reject(error)
    }
    // 发生网络错误后会走到这里
    // promise.resolve("ssss")
  }
)
export default fly