Typescrip異步函數(shù)Promise使用方式
更新時(shí)間：2022年09月28日 11:21:58 作者：江鳥木又源碼分析
這篇文章主要介紹了Typescrip異步函數(shù)Promise使用方式，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
Typescrip異步函數(shù)Promise
var p = new Promise(function (resolve, reject) {
var x = 1;
if (x > 0) {
resolve({ msg: '異步調(diào)用成功', data: { x: 1, y: 2 } });
}
else {
reject({ msg: '異步調(diào)用失敗', data: {} });
}
});
//異步調(diào)用結(jié)果
p.then(function (data) {
console.log('OK');
console.log(data);
//console.log(data.msg,data.data);
})["catch"](function (err) {
console.log(err);
});
//異步函數(shù)
function promiseFunc(t) {
console.log("".concat(t / 1000, "\u79D2\u540E\u8C03\u7528\u5F02\u6B65"));
return new Promise(function (resolve, reject) {
setTimeout(resolve, t, '異步調(diào)用完成');
});
}
//調(diào)用異步函數(shù)
promiseFunc(1000).then(function (value) { console.log(value); });
var promiseAction = new Promise(function (resolve, reject) {
console.log('執(zhí)行了一些異步操作...');
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('請(qǐng)求成功返回:',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數(shù)據(jù)
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 = '';
//數(shù)據(jù)正在接收中...
response.on('data', function (chunk) {
data += chunk;
});
//數(shù)據(jù)接收完成
response.on('end', function () {
console.log('同步請(qǐng)求數(shù)據(jù)完成:', JSON.parse(data));
});
}).on("error", function (error) {
console.log("Error: " + error.message);
});
};
GetJsonData(url);
//異步請(qǐng)求JSON數(shù)據(jù)實(shí)現(xiàn)
var GetJsonDataAsync = function (url) {
var https = require('https');
return new Promise(function (resolve, reject) {
https.get(url, function (response) {
var data = '';
//數(shù)據(jù)正在接收中...
response.on('data', function (chunk) {
data += chunk;
});
//數(shù)據(jù)接收完成
response.on('end', function () {
//console.log(JSON.parse(data));
resolve(data); //數(shù)據(jù)接收完成
});
}).on("error", function (error) {
console.log("Error: " + error.message);
reject(new Error(error.message));
});
});
};
//異步調(diào)用
GetJsonDataAsync(url).then(function (value) {
console.log("======================下面為異步加載數(shù)據(jù)=================================");
if (typeof value === "string") {
console.log('異步加載請(qǐng)求數(shù)據(jù)完成:', JSON.parse(value));
}
})["catch"](function (err) { console.log(err); });
//通過request庫請(qǐng)求json數(shù)據(jù),使用前 sudo npm i -g request安裝包
var request = require('request');
request(url, function (error, response, body) {
console.error('錯(cuò)誤:', error);
console.log('狀態(tài)碼:', response && response.statusCode);
console.log('數(shù)據(jù):', 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支持多請(qǐng)求并發(fā)
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庫調(diào)用==========>", res.body);
});
//fetch庫使用 使用前安裝 npm i node-fetch 3x版本只能import導(dǎo)入 --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中的其中一個(gè)有狀態(tài)改變,馬上返回pRace
var pRace = Promise.race([p1, p2]);//將多個(gè)Promise生成一個(gè)Promise
pRace.then(function (value) {
console.log(value);
});typescript- typescrip與react
對(duì)象的類型
接口 Interfaces 一般首字母大寫
interface Person {
? ? readonly id: number; // 只讀屬性 不能修改
? ? name: string;
? ? age: number;
? ? age?: number; ? // 可選
? ? [propName: string]: any; // 任意屬性
? ? // 注意，
}
// 順序 一般是 只讀 -> 默認(rèn) -> 可選 -> 任意
let tom: Person = {
? ? name: 'Tom',
? ? age: 25
};一旦定義了任意屬性，那么確定屬性和可選屬性的類型都必須是它的類型的子集：
interface Person {
? ? name: string;
? ? age?: number;
? ? [propName: string]: string;
}
let tom: Person = {
? ? name: 'Tom',
? ? age: 25, ? ? // 報(bào)錯(cuò) 需要是 任意屬性的子集
? ? gender: 'male'
};任意屬性的值允許是 string，但是可選屬性 age 的值卻是 number,number 不是 string 的子屬性，所以報(bào)錯(cuò)了
只讀的約束存在于第一次給對(duì)象賦值的時(shí)候，而不是第一次給只讀屬性賦值的時(shí)候
interface Person {
? ? readonly id: number;
? ? name: string;
? ? age?: number;
? ? [propName: string]: any;
}
let tom: Person = {
? ? name: 'Tom',
? ? gender: 'male'
};
tom.id = 89757; ? // 報(bào)錯(cuò)，第一處是在對(duì) tom 進(jìn)行賦值的時(shí)候，沒有給 id 賦值。 之后再賦值就報(bào)錯(cuò)數(shù)組類型
「類型 + 方括號(hào)」表示法
let arr: number[] = [1, 2, 3, 4, 5]; // 表示 是數(shù)組， 并且數(shù)組元素只能為 number 類型
聯(lián)合類型和數(shù)組的結(jié)合
// arr 表示 是數(shù)組， 并且數(shù)組元素只能為 number 和 string 類型 let arr: (number | string)[] = ['1', 'adaf', 2, 3, 5]
數(shù)組泛型
let arr: Array<number> = [1, 2, 3, 4, 5];
類數(shù)組
常見的類數(shù)組都有自己的接口定義，如 IArguments, NodeList, HTMLCollection 等
// error 函數(shù)中的 arguments 這也定義會(huì)報(bào)錯(cuò) let args: number[] = arguments; // success 改成 let args: IArguments = arguments;
函數(shù)類型
函數(shù)聲明
function sum(x: number, y: number): number {
? ? return x + y;
}函數(shù)表達(dá)式
let mySum = function (x: number, y: number): number {
? ? return x + y;
};這是可以通過編譯的，不過事實(shí)上，上面的代碼只對(duì)等號(hào)右側(cè)的匿名函數(shù)進(jìn)行了類型定義，而等號(hào)左邊的 mySum，是通過賦值操作進(jìn)行類型推論而推斷出來的。如果需要我們手動(dòng)給 mySum 添加類型，則應(yīng)該是這樣：
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;
? ? }
}類型斷言不是類型轉(zhuǎn)換，斷言成一個(gè)聯(lián)合類型中不存在的類型是不允許的：
// error?
function toBoolean(something: string | number): boolean {
? ? return <boolean>something;
}
// Type 'number' is not comparable to type 'boolean'內(nèi)置對(duì)象
ECMAScript 的內(nèi)置對(duì)象
Boolean、Error、Date、RegExp 等。
DOM 和 BOM 的內(nèi)置對(duì)象
Document、HTMLElement、Event、NodeList 等。
泛型
是指在定義函數(shù)、接口或類的時(shí)候，不預(yù)先指定具體的類型，而在使用的時(shí)候再指定類型的一種特性。
function swap<T, U>(tuple: [T, U]): [U, T] {
? ? return [tuple[1], tuple[0]];
}問題
type 和 Interfaces 的區(qū)別
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)對(duì)象類型取值
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]);
? ? ? // 報(bào)錯(cuò)?
? ? ? /**
? ? ? Element implicitly has an 'any' type because expression of type 'string' can't be used to index type 'DealWithProps'.
? No index signature with a parameter of type 'string' was found on type 'DealWithProps'.ts(7053)
? ? ? **/
? }
};Event 事件對(duì)象類型
常用 Event 事件對(duì)象類型：
ClipboardEvent<T = Element>剪貼板事件對(duì)象DragEvent<T = Element>拖拽事件對(duì)象ChangeEvent<T = Element>Change 事件對(duì)象KeyboardEvent<T = Element>鍵盤事件對(duì)象MouseEvent<T = Element>鼠標(biāo)事件對(duì)象TouchEvent<T = Element>觸摸事件對(duì)象WheelEvent<T = Element>滾輪事件對(duì)象AnimationEvent<T = Element>動(dòng)畫事件對(duì)象TransitionEvent<T = Element>過渡事件對(duì)象
Promise 類型
Promise<T> 是一個(gè)泛型類型，T 泛型變量用于確定使用 then 方法時(shí)接收的第一個(gè)回調(diào)函數(shù)（onfulfilled）的參數(shù)類型。
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){
? ? // 因?yàn)槔^承了 RouteComponentProps 所以可以獲取 location
? ? const {location} = props;
? ? // xx
}
export default withRouter(ModuleLayout);react 定義方法 useApi
/* eslint-disable no-param-reassign */
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) {
? ? ? ? // 錯(cuò)誤
? ? ? ? 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;上面定義泛型的時(shí)候， 這個(gè)寫法會(huì)報(bào)一個(gè)錯(cuò)誤，因?yàn)?current 開始會(huì)是空的，后面 dom 掛在之后才會(huì)獲取實(shí)例。
看下 useRef 源碼定義, 也就是泛型的值就是 current 的結(jié)果
interface RefObject<T> {
? ?readonly current: T | null;
}
function useRef<T>(initialValue: T|null): RefObject<T>;并且 ref={ refLise } 需要傳入的是 dom 元素節(jié)點(diǎn)，所以通過繼承 HTMLDivElement 來得到 useRef 泛型。
interface IUseRef extends HTMLDivElement {
getAssets: Function;
}所以解決的方法。
方法一： 類型斷言， 但是這樣的代碼其實(shí)是不嚴(yán)警的
?const { getAssets } = current as IUseRef;方法二： 通過 if 判斷，消除 current 為 null 的時(shí)候，如果不為 null 這里的類型就必定是 IUseRef 類型，所以可以取出 getAssets
let getAssets ;
if(current && current.getAssets){
? getAssets = current.getAssets;
}以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
JavaScript中的各種寬高屬性的實(shí)現(xiàn)
這篇文章主要介紹了JavaScript中的各種寬高屬性的實(shí)現(xiàn)，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-05-05
javascrip關(guān)于繼承的小例子，需要的朋友可以參考一下2013-05-05
TypeScript 數(shù)組Array操作的常用方法
本文主要介紹了TypeScript 數(shù)組Array操作的常用方法，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2022-06-06
a標(biāo)簽click和href執(zhí)行順序探討
這篇文章主要介紹了a標(biāo)簽click和href執(zhí)行順序,需要的朋友可以參考下2014-06-06
概述如何實(shí)現(xiàn)一個(gè)簡(jiǎn)單的瀏覽器端js模塊加載器
本文主要對(duì)實(shí)現(xiàn)一個(gè)簡(jiǎn)單的js加載器的步驟進(jìn)行介紹--主要可以分為解析路徑、下載模塊、解析模塊依賴、解析模塊四個(gè)步驟。需要的朋友來看下吧2016-12-12
這篇文章主要為大家詳細(xì)介紹了javascript原型繼承，闡明什么是原型繼承,以及在JavaScript中究竟如何使用原型繼承,感興趣的小伙伴們可以參考一下2016-04-04
Jquery調(diào)用iframe父頁面中的元素及方法
對(duì)于javascript操作iframe父級(jí)頁面元素的方法，大家應(yīng)該都非常清楚了，下面結(jié)合當(dāng)前非常流行的jquery分享一下如何使用jquery查找和操作iframe父級(jí)頁面元素的實(shí)現(xiàn)代碼。2016-08-08
JS實(shí)現(xiàn)提交表單前的數(shù)字及郵箱校檢功能
在項(xiàng)目開發(fā)中經(jīng)常會(huì)遇到表單提交功能，今天小編抽空給大家分享JS實(shí)現(xiàn)提交表單前的數(shù)字及郵箱校檢功能，需要的朋友參考下吧2017-11-11
詳解微信小程序自定義組件的實(shí)現(xiàn)及數(shù)據(jù)交互
這篇文章主要介紹了微信小程序自定義組件的實(shí)現(xiàn)及數(shù)據(jù)交互，本文給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2019-07-07
JavaScript Window 打開新窗口(window.location.href、windo
本文主要介紹了JavaScript Window 打開新窗口的三種方式，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2023-05-05