wepy拦截器 -interceptor
可以使用wepy
提供的全局拦截器对原生API 的请求进行拦截
使用方法
具体方法是配置API的config、fail、success、complete回调函数,参考示例:
import wepy from 'wepy';
export default class extends wepy.app {
constructor () {
// this is not allowed before super()
super();
// 拦截request请求
this.intercept('request', {
// 发出请求时的回调函数
config (p) {
// 对所有request请求中的OBJECT参数对象统一附加时间戳属性
p.timestamp = +new Date();
console.log('config request: ', p);
// 必须返回OBJECT参数对象,否则无法发送请求到服务端
return p;
},
// 请求成功后的回调函数
success (p) {
// 可以在这里对收到的响应数据对象进行加工处理
console.log('request success: ', p);
// 必须返回响应数据对象,否则后续无法对响应数据进行处理
return p;
},
//请求失败后的回调函数
fail (p) {
console.log('request fail: ', p);
// 必须返回响应数据对象,否则后续无法对响应数据进行处理
return p;
},
// 请求完成时的回调函数(请求成功或失败都会被执行)
complete (p) {
console.log('request complete: ', p);
}
});
}
}
利用拦截器实现请求的loading效果
我们可以使用拦截器来对所有的请求来加一个loading效果,在发出请求的时候,让loading效果显示,当请求完毕之后让loading效果隐藏
在app.wpy里面编写拦截器效果
constructor() {
super()
...
// 拦截request请求
this.intercept('request', {
// 发出请求时的回调函数
config(p) {
// 当请求发出的时候,显示loading
wepy.showLoading({
title: '数据加载中。。。', //提示的内容,
mask: true, //显示透明蒙层,防止触摸穿透,
success: res => {
}
});
// 必须返回OBJECT参数对象,否则无法发送请求到服务端
return p;
},
// 请求成功后的回调函数
success(p) {
// 必须返回响应数据对象,否则后续无法对响应数据进行处理
return p;
},
//请求失败后的回调函数
fail(p) {
// 必须返回响应数据对象,否则后续无法对响应数据进行处理
return p;
},
// 请求完成时的回调函数(请求成功或失败都会被执行)
complete(p) {
// 不管请求成功或者失败,都需要隐藏loading效果
wepy.hideLoading();
}
});
}
搜索模块
用户输入内容搜索相关内容
-
利用 vant 组件 来进行搜索框效果的实现
-
在app.wpy里面添加全局组件
usingComponents: { ... "van-search": "./assets/vant/search/index" }
-
在 search.wpy 里面编写组件结构,可以直接从文档中拷贝
<view> <van-search value="{ { value }}" placeholder="请输入搜索关键词" show-action bind:search="onSearch" bind:cancel="onCancel" /> </view>
-
-
在mixins文件夹下创建search.js 在里面定义两个函数,一个是用户触发了搜索,一个是用户取消搜索
import wepy from 'wepy' export default class extends wepy.mixin { data = { value: '' } methods = { // 当用户搜索的时候触发 onSearch(e