首页 > 资讯 > 前端开发 > JavaScript >Typescrip异步函数Promise使用方式

105

分享到

Typescrip异步函数Promise使用方式

2024-04-02 19:04:59 105人浏览独家记忆

摘要

目录Typescrip异步函数Promisetypescript- typescrip与React对象的类型数组类型函数类型类型断言内置对象泛型React 中使用Typescrip异

Typescrip异步函数Promise

var p = new Promise(function (resolve, reject) {
    var x = 1;
    if (x > 0) {
        resolve({ msg: '异步调用成功', data: { x: 1, y: 2 } });
    }
    else {
        reject({ msg: '异步调用失败', data: {} });
    }
});
//异步调用结果
p.then(function (data) {
    console.log('OK');
    console.log(data);
    //console.log(data.msg,data.data);
})["catch"](function (err) {
    console.log(err);
});
//异步函数
function promiseFunc(t) {
    console.log("".concat(t / 1000, "\u79D2\u540E\u8C03\u7528\u5F02\u6B65"));
    return new Promise(function (resolve, reject) {
        setTimeout(resolve, t, '异步调用完成');
    });
}
//调用异步函数
promiseFunc(1000).then(function (value) { console.log(value); });
var promiseAction = new Promise(function (resolve, reject) {
    console.log('执行了一些异步操作...');
    resolve('异步操作完成了!');
});
promiseAction.then(function (value) { console.log(value); });
// @ts-ignore
// const XMLHttpRequest = require('xmlhttprequest').XMLHttpRequest;
// let getDataAsync=(url)=>{
//     let p = new Promise((resolve, reject) => {
//         let c =new XMLHttpRequest();
//         c.open('GET',url);
//         c.onreadystatechange = h;
//         c.responseType = 'JSON';
//         c.setRequestHeader('Accept','application/json');
//         c.send();
//         function h(){
//             if(this.readyState!==4){return;}
//             if (this.status===200){
//                 console.log('请求成功返回:',this.status);
//                 resolve(this.response);
//             }else {
//                 reject(new Error(this.statusText));
//             }
//         }
//     });
//     return p;
// };
// getDataAsync('http://192.168.31.180/data.json')
// .then(data=>{console.log(data);})
// .catch(err=>{console.log(err);});
//通过https加载json数据
var url = 'https://img-home.csdnimg.cn/data_json/toolbar/toolbar1105.json';
var url1 = 'https://mp-api.iqiyi.com/base/api/1.0/get_role';
var GetJsonData = function (url) {
    var https = require('https');
    https.get(url, function (response) {
        var data = '';
        //数据正在接收中...
        response.on('data', function (chunk) {
            data += chunk;
        });
        //数据接收完成
        response.on('end', function () {
            console.log('同步请求数据完成:', JSON.parse(data));
        });
    }).on("error", function (error) {
        console.log("Error: " + error.message);
    });
};
GetJsonData(url);
//异步请求JSON数据实现
var GetJsonDataAsync = function (url) {
    var https = require('https');
    return new Promise(function (resolve, reject) {
        https.get(url, function (response) {
            var data = '';
            //数据正在接收中...
            response.on('data', function (chunk) {
                data += chunk;
            });
            //数据接收完成
            response.on('end', function () {
                //console.log(JSON.parse(data));
                resolve(data); //数据接收完成
            });
        }).on("error", function (error) {
            console.log("Error: " + error.message);
            reject(new Error(error.message));
        });
    });
};
//异步调用
GetJsonDataAsync(url).then(function (value) {
    console.log("======================下面为异步加载数据=================================");
    if (typeof value === "string") {
        console.log('异步加载请求数据完成:', JSON.parse(value));
    }
})["catch"](function (err) { console.log(err); });
//通过request库请求json数据,使用前 sudo npm i -g request安装包
var request = require('request');
request(url, function (error, response, body) {
    console.error('错误:', error);
    console.log('状态码:', response && response.statusCode);
    console.log('数据:', JSON.parse(body));
});
//异步方式
var RequestJsonAsync = function (url) {
    return new Promise(function (resolve, reject) {
        request(url, function (e, r, d) {
            if (null != e) {
                reject(new Error(e));
            }
            else {
                resolve(JSON.parse(d));
            }
        });
    });
};
RequestJsonAsync(url).then(function (value) {
    console.log("==============request异步加载json===============================");
    console.log(value);
})["catch"](function (err) { console.log(err); });
//nodejs needle库使用 ,使用前 npm i needle --save 安装包
var needle = require('needle');
needle.get(url, function (error, response) {
    if (!error && response.statusCode == 200)
        console.log(">>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>", response.body);
});
//异步模式
needle('get', url, { json: true }).then(function (resp) {
    if (resp.statusCode == 200) {
        console.log(">>>>>>>>>>>>>>异步模式>>>>>>>>>>>>>>>>>>>>>>>>>>>>>", resp.body);
    }
})["catch"](function (err) { console.log(err); });
//使用axiOS库使用,axios直接异步  使用前安装 npm i -g axios --save
var axios = require('axios');
axios.get(url)
    .then(function (res) {
    console.log(res);
})["catch"](function (err) {
    console.log(err);
});
//axios支持多请求并发
axios.all([
    axios.get(url),
    axios.get(url1)
]).then(axios.spread(function (res1, res2) {
    console.log(res1);
    console.log(res2);
}))["catch"](function (err) {
    console.log(err);
});
//supertaget库使用
var superagent = require('superagent');
superagent.get(url)
    .end(function (err, res) {
    if (err) {
        return console.log(err);
    }
    console.log("superagent库调用==========>", res.body);
});
//fetch库使用 使用前安装 npm i node-fetch  3x版本只能import导入 --save  支持异步
// @ts-ignore
// import fetch from 'node-fetch'; //不能在模块之外使用
// fetch(url)
//     .then(res => res.json()) // expecting a json response
//     .then(json => {
//         console.log(json);
//     })
//     .catch(err => {
//         console.log(err);
//     });
var p1 = new Promise(function (resolve, reject) {
    resolve('p1 resolve');
});
var p2 = new Promise(function (resolve, reject) {
    resolve('p2 resolve');
});
//只要p1,p2中的其中一个有状态改变,马上返回pRace
var pRace = Promise.race([p1, p2]);//将多个Promise生成一个Promise
pRace.then(function (value) {
    console.log(value);
});

typescript- typescrip与react

对象的类型

接口 Interfaces 一般首字母大写

interface Person {
    readonly id: number; // 只读属性 不能修改
    name: string;
    age: number;
    age?: number;   // 可选
    [propName: string]: any; // 任意属性
    // 注意，
}
// 顺序 一般是 只读 -> 默认 -> 可选 -> 任意
let tom: Person = {
    name: 'Tom',
    age: 25
};

一旦定义了任意属性，那么确定属性和可选属性的类型都必须是它的类型的子集：

interface Person {
    name: string;
    age?: number;
    [propName: string]: string;
}
let tom: Person = {
    name: 'Tom',
    age: 25,     // 报错 需要是 任意属性的子集
    gender: 'male'
};

任意属性的值允许是 string，但是可选属性 age 的值却是 number,number 不是 string 的子属性，所以报错了

只读的约束存在于第一次给对象赋值的时候，而不是第一次给只读属性赋值的时候

interface Person {
    readonly id: number;
    name: string;
    age?: number;
    [propName: string]: any;
}
let tom: Person = {
    name: 'Tom',
    gender: 'male'
};

tom.id = 89757;   // 报错，第一处是在对 tom 进行赋值的时候，没有给 id 赋值。 之后再赋值就报错

数组类型

「类型 + 方括号」表示法

let arr: number[] = [1, 2, 3, 4, 5]; // 表示 是数组， 并且数组元素只能为 number 类型

联合类型和数组的结合

// arr 表示 是数组， 并且数组元素只能为 number 和 string 类型
let arr: (number | string)[] = ['1', 'adaf', 2, 3, 5]

数组泛型

let arr: Array<number> = [1, 2, 3, 4, 5];

类数组

常见的类数组都有自己的接口定义，如 IArguments, NodeList, htmlCollection 等

// error 函数中的 arguments 这也定义会报错
let args: number[] = arguments;
// success 改成
let args: IArguments = arguments;

函数类型

函数声明

function sum(x: number, y: number): number {
    return x + y;
}

函数表达式

let mySum = function (x: number, y: number): number {
    return x + y;
};

这是可以通过编译的，不过事实上，上面的代码只对等号右侧的匿名函数进行了类型定义，而等号左边的 mySum，是通过赋值操作进行类型推论而推断出来的。如果需要我们手动给 mySum 添加类型，则应该是这样：

let mySum: (x: number, y: number) => number = function (x: number, y: number): number {
    return x + y;
};

类型断言

function getLength(something: string | number): number {
    // 将他断言为 string
    if ((<string>something).length) {
        return (<string>something).length;
    } else {
        return something.toString().length;
    }
}

类型断言不是类型转换，断言成一个联合类型中不存在的类型是不允许的：

// error 
function toBoolean(something: string | number): boolean {
    return <boolean>something;
}
// Type 'number' is not comparable to type 'boolean'

内置对象

ECMAScript 的内置对象

Boolean、Error、Date、RegExp 等。

DOM 和 BOM 的内置对象

Document、HTMLElement、Event、NodeList 等。

泛型

是指在定义函数、接口或类的时候，不预先指定具体的类型，而在使用的时候再指定类型的一种特性。

function swap<T, U>(tuple: [T, U]): [U, T] {
    return [tuple[1], tuple[0]];
}

问题

type 和 Interfaces 的区别

React 中使用

import React, { MouseEvent, ReactNode } from 'react'
type Props = { 
 onClick(e: MouseEvent<HTMLElement>): void
 children?: ReactNode 
}
const Button = ({ onClick: handleClick, children }: Props) => (
  <button onClick={handleClick}>{children}</button>
)

高阶组件的使用方式

import React from 'react';
import { FORM } from 'antd';
import { FormComponentProps } from 'antd/es/form';
interface IProps extends FormComponentProps {
  loading: boolean;
}
const Page: React.FC<IProps>  = (props) => {
  return (
     <div>Page</div>
  )
}
export default Form.create<IProps>()(Page)

对象类型取值

type DealWithProps = {
  onClose: Function;
  eventId: string;
  dealTime: any;
};
// 处理
const getOnDealWith = (parameObj: DealWithProps) => () => {
  // TODO 暂无接口
  for (let i in parameObj) {
    console.log(parameObj[i], typeof parameObj[i]);
      // 报错 
      
  }
};

Event 事件对象类型

常用 Event 事件对象类型：

ClipboardEvent<T = Element> 剪贴板事件对象
DragEvent<T = Element> 拖拽事件对象
ChangeEvent<T = Element> Change 事件对象
KeyboardEvent<T = Element> 键盘事件对象
MouseEvent<T = Element> 鼠标事件对象
TouchEvent<T = Element> 触摸事件对象
WheelEvent<T = Element> 滚轮事件对象
AnimationEvent<T = Element> 动画事件对象
TransitionEvent<T = Element> 过渡事件对象

Promise 类型

Promise<T> 是一个泛型类型，T 泛型变量用于确定使用 then 方法时接收的第一个回调函数（onfulfilled）的参数类型。

interface IResponse<T> {
  message: string,
  result: T,
  success: boolean,
}
async function getResponse (): Promise<IResponse<number[]>> {
  return {
    message: '获取成功',
    result: [1, 2, 3],
    success: true,
  }
}
getResponse()
  .then(response => {
    console.log(response.result)
  })

使用 react-router-dom

withRouter(ModuleLayout)

这类高阶组件的使用方式，通常都需要继承到高阶组件的类型定义，如 antd Form.create 需要继承 FormComponentProps

import { FormComponentProps} from 'antd/lib/form/Form';
import { withRouter, Link, RouteComponentProps } from 'react-router-dom';
interface IProps extends RouteComponentProps<any> {
  basePath: string;
  menuList: IMenuItem[];
  children: JSX.Element;
}
function App(props: IProps){
    // 因为继承了 RouteComponentProps 所以可以获取 location
    const {location} = props;
    // xx
}
export default withRouter(ModuleLayout);

react 定义方法 useApi


import { useRef, useEffect } from '@alipay/bigfish/react';
import { useImmer } from 'use-immer';
type Service<T> = () => Promise<T>;
type DependencyList = ReadonlyArray<any>;
interface Option<T> {
  onSuccess?: (data: T) => void;
  onError?: (errMsg: string) => void;
}
interface State {
  data: any;
  loading: boolean;
}
interface ResponseData<T> {
  success: boolean;
  data: T;
  message: string;
}
export default function useApi<T>(
  service: Service<ResponseData<T>>,
  dependencyList: DependencyList = [],
  option?: Option<T>
) {
  const initialState: State = {
    data: undefined,
    loading: false,
  };
  const [state, setState] = useImmer(initialState);
  const serviceId = useRef(0);
  useEffect(() => {
    const currentId = serviceId.current;
    setState(draft => {
      draft.loading = true;
      draft.data = null;
    });
    // 异步方法
    service().then(data => {
      // 组件卸载不更改
      if (currentId !== serviceId.current) {
        return;
      }
      if (!data.success) {
        // 错误
        setState(draft => {
          draft.loading = false;
          draft.data = null;
        });
        if (option && option.onError) {
          option.onError(data.message);
        }
      } else {
        // 成功
        setState(draft => {
          draft.loading = false;
          draft.data = data.data;
        });
        if (option && option.onSuccess) {
          option.onSuccess(data.data);
        }
      }
    });
    return () => {
      serviceId.current += 1;
    };
  }, dependencyList);
  return [state, setState];
}

react 使用 useRef

import React, { useRef, useState, FC } from '@alipay/bigfish/react';
import { message } from 'antd';
interface IProps extends FormComponentProps {
  isshow:boolean;
}
interface IUseRef extends HTMLDivElement {
  getAssets: Function;
}
const CreateStep: FC<IProps> = props => {
  const {
    form, isShow
  } = props;
  const refList = useRef<IUseRef>(null);
  const [current, setCurrent] = useState(1);
  function setNextStep() {
    const { current } = refList;
    const { getAssets } = current; // 类型“IUseRef | null”上不存在属性“getAssets”
  }
  return <div ref={refList}>xxxx</div>;
};
export default CreateStep;

上面定义泛型的时候，这个写法会报一个错误，因为 current 开始会是空的，后面 dom 挂在之后才会获取实例。

看下 useRef 源码定义, 也就是泛型的值就是 current 的结果

interface RefObject<T> {
   readonly current: T | null;
}
function useRef<T>(initialValue: T|null): RefObject<T>;

并且 ref={ refLise } 需要传入的是 dom 元素节点，所以通过继承 HTMLDivElement 来得到 useRef 泛型。

interface IUseRef extends HTMLDivElement {
getAssets: Function;
}

所以解决的方法。

方法一：类型断言，但是这样的代码其实是不严警的

 const { getAssets } = current as IUseRef;

方法二：通过 if 判断，消除 current 为 null 的时候，如果不为 null 这里的类型就必定是 IUseRef 类型，所以可以取出 getAssets

let getAssets ;
if(current && current.getAssets){
  getAssets = current.getAssets;
}

以上为个人经验，希望能给大家一个参考，也希望大家多多支持编程网。

点击免费下载>>软考高级考试备考技巧/历年真题/备考精华资料

--结束END--

本文标题: Typescrip异步函数Promise使用方式

本文链接: https://www.lsjlt.com/news/168588.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

本篇文章演示代码以及资料文档资料下载

下载Word文档到电脑，方便收藏和打印～

下载Word文档

去做题

猜你喜欢

Typescrip异步函数Promise使用方式

目录Typescrip异步函数Promisetypescript- typescrip与react对象的类型数组类型函数类型类型断言内置对象泛型React 中使用Typescrip异...

99+

2024-04-02
Vue 中 Promise 的then方法异步使用及async/await 异步使用总结

目录1.Promise 的 then 方法使用　　2. async await 使用3. async/await处理多个异步请求1.Promise 的 then 方法使用　...

99+

2023-01-12

Promise 的 then 方法使用 async await 使用 async/await处理多个异步请求
掌握Node.js中的Promise异步编程方式

目录介绍静态方法Promise.resolve()Promise.allPromise.allsSettled介绍 Promise就是一个用来存储数据的对象但...

99+

2023-05-18

Node.js Promise Node.js Promise异步编程
Javascript的异步函数和Promise对象你了解吗

目录1、JS中的异步1.1 同步1.2 异步1.3 回调函数解决异步问题1.4 回调地狱2、Promise对象2.1 Promise的基本使用2.2 async 和 await总结1...

99+

2024-04-02
stream_socket_client的异步使用方式

函数的基本介绍 PHP 5、7、8，stream_socket_client用于建立网络或IPC socket连接。函数的参数和返回为： stream_socket_client( string $address, int &$...

99+

2023-09-10

网络
JavaScript异步编程之Promise的初步使用详解

1. 概述 Promise对象是ES6提出的的异步编程的规范。说到异步编程，就不得不说说同步和异步这两个概念。从字面意思理解同步编程的话，似乎指的是两个任务同步运行，如果这样理解就...

99+

2024-04-02
怎么使用JS promise解决异步问题

这篇“怎么使用JS promise解决异步问题”文章的知识点大部分人都不太理解，所以小编给大家总结了以下内容，内容详细，步骤清晰，具有一定的借鉴价值，希望大家阅读完这篇文章能有所收获，下面我们一起来看看这篇“怎么使用JS ...

99+

2023-07-05
Promise和Generato中如何用同步方法写异步JavaScript

这篇文章给大家介绍Promise和Generato中如何用同步方法写异步JavaScript，内容非常详细，感兴趣的小伙伴们可以参考借鉴，希望对大家能有所帮助。最近在写一个自己的网站的时候(可以观摩一下~C...

99+

2024-04-02
java异步函数怎么使用

这篇文章主要介绍了java异步函数怎么使用的相关知识，内容详细易懂，操作简单快捷，具有一定借鉴价值，相信大家阅读完这篇java异步函数怎么使用文章都会有所收获，下面我们一起来看看吧。1 低层级 asyncio 索引低层级 API 索引&am...

99+

2023-07-05
JavaScript异步函数怎么使用

这篇文章主要介绍了JavaScript异步函数怎么使用的相关知识，内容详细易懂，操作简单快捷，具有一定借鉴价值，相信大家阅读完这篇JavaScript异步函数怎么使用文章都会有所收获，下面我们一起来看看吧。...

99+

2024-04-02
如何使用Promise链式调用解决多个异步回调的问题

小编给大家分享一下如何使用Promise链式调用解决多个异步回调的问题，希望大家阅读完这篇文章之后都有所收获，下面让我们一起去探讨吧！介绍所谓Promise，简单来说就是一个容器，里面保存着某个未来才会结束...

99+

2024-04-02
promise和co搭配生成器函数方式解决js代码异步流程的示例分析

这篇文章将为大家详细讲解有关promise和co搭配生成器函数方式解决js代码异步流程的示例分析，小编觉得挺实用的，因此分享给大家做个参考，希望大家阅读完这篇文章后可以有所收获。在es6中引入的原生Prom...

99+

2024-04-02
JavaScript的Promise函数怎么使用

这篇文章主要介绍“JavaScript的Promise函数怎么使用”的相关知识，小编通过实际案例向大家展示操作过程，操作方法简单快捷，实用性强，希望这篇“JavaScript的Promise函数怎么使用”文...

99+

2024-04-02
Node.js Async/Await与Promise的异同：如何选择合适的异步编程方式？

作为一门事件驱动的语言，Node.js 天生就支持异步编程。异步编程可以提高程序的并发能力，从而提高程序的性能。在 Node.js 中，有两种流行的异步编程方式：Async/Await 和 Promise。 Async/Await 是 ...

99+

2024-02-27

Node.js、异步编程、Async/Await、Promise
Node.js中如何使用异步Generator函数

本篇文章给大家分享的是有关Node.js中如何使用异步Generator函数，小编觉得挺实用的，因此分享给大家学习，希望大家阅读完这篇文章后可以有所收获，话不多说，跟着小编一起来看看吧。HTTP 框架分类首...

99+

2024-04-02
js异步函数async/awit怎么使用

异步函数(async/await) 是一种用于处理 JavaScript 异步操作的语法糖，它建立在 Promise 基础之上，使得...

99+

2023-09-29

js
Python混合如何使用同步和异步函数

这篇文章主要介绍“Python混合如何使用同步和异步函数”，在日常操作中，相信很多人在Python混合如何使用同步和异步函数问题上存在疑惑，小编查阅了各式资料，整理出简单好用的操作方法，希望对大家解答”Python混合如何使用同步和异步函数...

99+

2023-07-06
Python混合怎么使用同步和异步函数

在协程函数中调用同步函数在协程函数中直接调用同步函数会阻塞事件循环，从而影响整个程序的性能。我们先来看一个例子：以下是使用异步 Web 框架 FastAPI 写的一个例子，FastAPI 是比较快，但不正确的操作将会变得很慢。import ...

99+

2023-05-14

Python
Java8 使用CompletableFuture 构建异步应用方式

目录概述同步API VS 异步API同步API异步API同步的困扰实现异步API将同步方法改为异步方法处理异常错误概述为了展示 CompletableFuture 的强大特性，创...

99+

2024-04-02
PHP 函数的参数传递方式在异步编程中的运用？

php 异步编程中巧妙的参数传递方式：按值传递：副本传递，不会影响原始值。按引用传递：引用传递，更改会反映在原始值中。变长参数列表：允许函数接受任意数量的参数。 PHP 函数的参数传递...

99+

2024-04-15

异步编程关键词: php 内存占用