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

最新推荐文章于 2021-01-28 11:47:23 发布

原创最新推荐文章于 2021-01-28 11:47:23 发布 · 2.7k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#vue #flyio

vue 同时被 2 个专栏收录

25 篇文章

订阅专栏

flyio

2 篇文章

订阅专栏

本文介绍如何在Vue.js项目中集成MintUI和Fly.io。通过详细步骤指导安装和配置过程，并展示了如何利用Fly.io进行HTTP请求，同时使用MintUI组件库提升用户体验。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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