Miniprogram-userequest NPM

miniprogram-userequest

小程序 mobx composition 请求工具

Usage

TODO

Options

TODO

Development

<!--logs.wxml-->
<view>
  <wxs module="toJSON">
    function toJSON(target) { return JSON.stringify(target) } module.exports =
    toJSON;
  </wxs>
  <button bindtap="refresh">刷新</button>
  <button bindtap="cancel">撤銷</button>
  <button bindtap="edit">修改</button>
  <button style="margin-bottom: 20px;" bindtap="search">搜索红颜如霜</button>
  <button style="margin-bottom: 20px;" bindtap="searchAysnc">搜索东风破</button>
  <view style="margin-bottom: 20px;">参数列表 {{toJSON(params)}}</view>
  <view wx:if="{{error}}"> 出错了{{error.errMsg}} </view>
  <view wx:elif="{{loading}}"> 加载中 </view>
  <view wx:else>
    <view wx:for="{{data.list}}" style="margin-bottom: 20px;">
      {{item.name}}
    </view>
  </view>
</view>

import { compositionApi } from 'miniprogram-composition';
import useRequest from 'miniprogram-userequest';

interface Res {
  result: Result;
  code: number;
}

interface Result {
  songs: Song[];
  hasMore: boolean;
  songCount: number;
}

interface Song {
  id: number;
  name: string;
  artists: Artist[];
  album: Album;
  duration: number;
  copyrightId: number;
  status: number;
  alias: string[];
  rtype: number;
  ftype: number;
  mvid: number;
  fee: number;
  rUrl?: any;
  mark: number;
  transNames?: string[];
}

interface Album {
  id: number;
  name: string;
  artist: Artist;
  publishTime: number;
  size: number;
  copyrightId: number;
  status: number;
  picId: number;
  mark: number;
  alia?: string[];
  transNames?: string[];
}

interface Artist {
  id: number;
  name: string;
  picUrl?: any;
  alias: any[];
  albumSize: number;
  picId: number;
  fansGroup?: any;
  img1v1Url: string;
  img1v1: number;
  trans?: any;
}

const getData = (data = {}) => {
  return new Promise<Res>((resolve, reject) => {
    setTimeout(() => {
      wx.request<Res>({
        url: 'http://cloud-music.pl-fe.cn/search',
        data: data,
        success: (res) => resolve(res.data),
        fail: reject,
      });
    }, 1000);
  }).then((res) => {
    return {
      list: res.result.songs,
    };
  });
};

Component({
  behaviors: [compositionApi],
  setup() {
    //手动搜索
    const search = () => {
      run({
        keywords: '红颜如霜',
      });
    };
    //手动搜索捕捉错误
    const searchAysnc = () => {
      runAsync({
        keywords: '东风破',
      })
        .then((res) => {
          // 成功
          console.log(res, 'promise then');
        })
        .catch((e) => {
          // 失败
          console.error(e, 'promise catch');
        });
    };
    const edit = () => {
      //修改返回的data(取列表第一项)
      return mutate((data) => {
        return {
          list: (data && data.list.slice(0, 1)) || [],
        };
      });
    };
    const {
      data,
      error,
      loading,
      runAsync /*手动请求返回promise*/,
      run /*手动请求*/,
      refresh /*刷新*/,
      params /*参数列表 */,
      cancel /*撤销请求结果*/,
      mutate /*修改data的方法*/,
    } = useRequest(getData, {
      manual: false, //是否手动加载
      debounceWait: 300, //防抖时间 ms,
      loadingDelay: 300, //延迟loading时间 ms(防止闪烁)
      // throttleWait: 300, //节流时间
      // retryCount: 3,//错误重试次数
      // retryInterval: 200,//错误重试间隔时间(ms)
      defaultParams: [
        {
          //默认参数列表(非手动加载时参数)
          keywords: '海阔天空',
        },
      ],
      onBefore(params) {
        //请求前回调
      },
      onError(e) {
        //错误回调
        console.error(e, 'onError');
      },
      onFinally(params, res) {
        //结束回调
      },
      onSuccess(res) {
        //成功回调
        console.log(res, 'onSuccess');
      },
    });
    return {
      edit,
      cancel,
      refresh,
      search,
      searchAysnc,
      data,
      error,
      loading,
      params,
    };
  },
});