usePromise

提供Promise化方式

何时使用

警告

1x版本为直接执行传入的方法. 在新版本中则采用吞吐自定义hook的形式. 这是一个break change
不过现在大部分的API官方已经提供了Promise的调用形式. 这里更推荐大家直接使用官方的Promise

想异步形式调用当前方法时

API

主要适用于原先由以下方式调用的方法:

Taro.makePhoneCall({
  phoneNumber: '110',
});

转换后使用方式:

import { makePhoneCall } from '@tarojs/taro';
type Option = Taro.makePhoneCall.Option;
const makePhoneCall = usePromise<Option>('makePhoneCall');

// 在组件中使用
const handleMakePhoneCall = () => {
  makePhoneCall({ phoneNumber: '110' }).then(
    () => {
      console.log('makePhoneCall success');
    },
    ({ errMsg }) => {
      console.log('makePhoneCall failed', errMsg);
    },
  );
};

参数说明

参数	说明	类型	默认值
implementMethod	待执行的方法	unknown	-

返回值说明

返回值	说明	类型
promiseMetod	Promise方式API	(option?: T) => Promise<TaroGeneral.CallbackResult>

代码演示

React

basic/usePromise/index

import React from 'react';
import { usePromise } from 'taro-hooks';
import { showToast, makePhoneCall } from '@tarojs/taro';
import DemoContent from '@src/components/DemoContent';
import { Button } from '@taroify/core';

type MakePhoneCallOption = Taro.makePhoneCall.Option;
type MakePhoneCallResult = TaroGeneral.CallbackResult;
export default () => {
  const makePhoneCallPromise = usePromise<
    MakePhoneCallOption,
    MakePhoneCallResult
  >(makePhoneCall);

  const handleClick = () => {
    makePhoneCallPromise({ phoneNumber: '1300000' }).then(
      () => {
        showToast({
          title: '拨号成功',
          mask: true,
          icon: 'success',
        });
      },
      ({ errMsg }) => {
        showToast({
          title: errMsg,
          mask: true,
          icon: 'error',
        });
      },
    );
  };

  return (
    <DemoContent>
      <Button block color="primary" onClick={handleClick} shape="square">
        Click me!
      </Button>
    </DemoContent>
  );
};

Vue

basic/usePromise/index

<template>
  <demo-content>
    <nut-button shape="square" type="primary" block @click="handleClick()"
      >Click me!</nut-button
    >
  </demo-content>
</template>

<script setup lang="ts">
import { usePromise } from 'taro-hooks';
import { showToast, makePhoneCall } from '@tarojs/taro';

type MakePhoneCallOption = Taro.makePhoneCall.Option;
type MakePhoneCallResult = TaroGeneral.CallbackResult;

const useMakePhoneCall = usePromise<MakePhoneCallOption, MakePhoneCallResult>(
  makePhoneCall,
);

const handleClick = () => {
  useMakePhoneCall({ phoneNumber: '1300000' }).then(
    () => {
      showToast({
        title: '拨号成功',
        mask: true,
        icon: 'success',
      });
    },
    ({ errMsg }) => {
      showToast({
        title: errMsg,
        mask: true,
        icon: 'error',
      });
    },
  );
};
</script>

Hook 支持度

微信小程序	H5	ReactNative
✔️	✔️	✔️