理解Promise
fetch('http://api.example.com/users')
.then(response => response.json())
.then(data => {
console.log(data); // 将返回的JSON数据打印到控制台
const username = data.username; // 假设JSON响应中有一个名为username的字段
console.log(`Username: ${username}`);
})
.catch(error => {
console.error('Error:', error);
});.json()方法将响应解析为JSON格式，并返回一个包含解析后的数据的Promise
response.json() 方法返回一个 Promise 对象，该对象在成功解析响应体为 JSON 数据后被解析为具体的值。这意味着你可以在 .then() 方法中访问到 JSON 数据。
当调用 .then() 方法时，它的回调函数将在前一个 Promise 对象（在这种情况下是 response.json() 返回的 Promise 对象）成功解析为 JSON 数据之后被触发。回调函数接收到的参数 data 将是 JSON 数据的解析结果，即解析后的 JavaScript 对象或数组。
用async/await重写可以更简洁，不过和.then()台面下的操作是一样的。async/await 提供了一种更具同步风格的编码方式来处理异步操作
interface MessagePort {
onMessage: (message: any) => void;
send(message: any): void;
}
class Client {
private port: MessagePort;
private requestId = 0;
private callbacks: { [id: number]: [(value: any) => void, (reason: any) => void] } = {};
constructor(port: MessagePort) {
this.port = port;
this.port.onMessage = this.handleMessage.bind(this);
}
// 用于发送请求并获取Promise响应
request(method: string, params: any): Promise<any> {
const id = this.requestId++;
return new Promise((resolve, reject) => {
// 保存回调以供稍后使用
this.callbacks[id] = [resolve, reject];
// 发送请求到服务器
this.port.send({
id: id,
method: method,
params: params
});
});
}
// 处理来自服务器的响应
private handleMessage(message: any) {
const callback = this.callbacks[message.id];
if (!callback) return;
const [resolve, reject] = callback;
if (message.error) {
reject(message.error);
} else {
resolve(message.result);
}
// 删除已处理的回调
delete this.callbacks[message.id];
}
}
const port = getServerMessagePort();
const client = new Client(port);
// 示例用法
client.request('foo', { arg: 42 }).then(response => {
console.log('Response received:', response);
}).catch(error => {
console.error('Error received:', error);
});