Vue Vant应用 loading加载

Vue 渐进式JavaScript 框架 基于Vue2的移动端项目：vant应用-loading加载

目录

Loading加载

引入组件

调用

Axios拦截器

请求增加参数

响应增加参数

总结

---

Loading加载

使用vant toast轻提示

引入组件

在DetailView.vue中引入Toast，示例如下：

import { ImagePreview, Toast} from 'vant'

调用

在created生命周期函数中，调用loading加载提示。

Duration为0 设置load提示不消失，待数据加载完成后，设置隐藏

示例如下：

created () {
    Toast.loading({
      message: '加载中...',
      forbidClick: true,
      duration: 0
    })
    // 当前匹配的路由
    // console.log('created', this.$route.params.id)
    // axios 利用 id发请求到详情接口，获取详情数据，布局页面
    http({
      url: `/api/gateway?filmId=${this.$route.params.id}&k=6027054`,
      headers: {
        'X-Host': 'mall.film-ticket.film.info',
        'X-Client-Info': '{"a":"3000","ch":"1002","v":"5.2.1","e":"17479694011920413022027777","bc":"130100"}'
      }
    }).then(res => {
      // console.log(res.data)
      this.filmInfo = res.data.data.film
      // 隐藏
      Toast.clear()
    })
  }

Axios拦截器

如果每个页面都写同样的load很麻烦，可以在拦截器中处理。

在util/http.js中增加请求前所带的参数，比如请求cookie.

增加全局load：导入库、增加load窗口；

响应之后在拦截，清除load；

失败请求也需要清除掉load。

示例如下：

import axios from 'axios'
import { Toast } from 'vant'

const http = axios.create({
  baseURL: '',
  timeout: 100000,
  headers: {
    'X-Host': 'mall.film-ticket.film.list',
    'X-Client-Info': '{"a":"3000","ch":"1002","v":"5.2.1","e":"17479694011920413022027777"}'
  }
})
// 在发请求之前拦截 -- showLoading
http.interceptors.request.use(function (config) {
  Toast.loading({
    message: '加载中...',
    forbidClick: true,
    duration: 0
  })
  return config
}, function (error) {
  return Promise.reject(error)
})

// 在成功之后拦截 -- hideLoading
http.interceptors.response.use(function (response) {
  // 响应结束 清除load
  Toast.clear()
  return response
}, function (error) {
  // 失败也需要清除load
  Toast.clear()
  return Promise.reject(error)
})

export default http

请求增加参数

响应增加参数

总结

Vue 渐进式JavaScript 框架 基于Vue2的移动端项目：vant应用-loading加载