首页 › JavaScript › 进阶实践 › Web API 与调试

Fetch API

// GET
const response = await fetch('/api/users');
const users = await response.json();

// POST
const res = await fetch('/api/users', {
  method: 'POST',
  headers: { 'Content-Type': 'application/json' },
  body: JSON.stringify({ name: '张三' })
});

WebSocket

const ws = new WebSocket('wss://example.com/chat');

ws.onopen = () => ws.send('连接成功');
ws.onmessage = (event) => console.log('收到:', event.data);
ws.onerror = (err) => console.error('错误:', err);
ws.onclose = () => console.log('连接关闭');

调试技巧

// Console 高级用法
console.log('普通日志');
console.error('错误');
console.warn('警告');
console.info('信息');
console.debug('调试');

console.table([{ name: '张三', age: 28 }, { name: '李四', age: 32 }]);

console.time('操作耗时');
// ... 代码 ...
console.timeEnd('操作耗时');

console.trace('追踪调用栈');

console.group('用户信息');
console.log('姓名: 张三');
console.log('年龄: 28');
console.groupEnd();

// 性能分析
performance.mark('start');
// ... 代码 ...
performance.mark('end');
performance.measure('耗时', 'start', 'end');

小结

API	用途
fetch()	HTTP 请求
WebSocket	双向通信
console.table	表格化输出
console.time	计时
console.trace	调用栈追踪

上一节：深浅拷贝与设计模式

贡献者: 布欧-Lewyon