JavaScript异步编程与前后端通信全解析（Promise+跨域+HTTP）

// 基础用法
const p1 = new Promise((resolve, reject) => {
  setTimeout(() => resolve('成功结果'), 1000);
});

// then接收成功/失败回调，返回新Promise
const p2 = p1.then(
  (result) => { console.log('成功:', result); return 200; },
  (reason) => { console.log('失败:', reason); return -1; }
);

// catch捕获失败（等价于then(null, rejectedFn)）
p2.catch(reason => console.log('异常:', reason));

class MyPromise {
  constructor(executor) {
    this.status = 'pending'; // 初始状态
    this.value = undefined; // 结果值
    this.resolvedArr = []; // 成功回调队列
    this.rejectedArr = []; // 失败回调队列

    // 状态变更函数（不可逆）
    const changeStatus = (status, result) => {
      if (this.status !== 'pending') return;
      this.status = status;
      this.value = result;
      // 执行对应队列中的回调
      const callbackArr = status === 'fulfilled' ? this.resolvedArr : this.rejectedArr;
      callbackArr.forEach(fn => fn(this.value));
    };

    // 成功/失败函数
    const resolve = (result) => {
      // 延迟执行，确保then先注册回调
      setTimeout(() => changeStatus('fulfilled', result), 0);
    };
    const reject = (reason) => {
      setTimeout(() => changeStatus('rejected', reason), 0);
    };

    // 捕获executor异常
    try {
      executor(resolve, reject);
    } catch (error) {
      reject(error);
    }
  }

  // then方法实现
  then(resolvedFn, rejectedFn) {
    // 兼容非函数参数
    resolvedFn = typeof resolvedFn === 'function' ? resolvedFn : (v) => v;
    rejectedFn = typeof rejectedFn === 'function' ? rejectedFn : (e) => { throw e; };

    return new MyPromise((resolve, reject) => {
      // 成功回调包装
      this.resolvedArr.push((value) => {
        try {
          const x = resolvedFn(value);
          x instanceof MyPromise ? x.then(resolve, reject) : resolve(x);
        } catch (error) {
          reject(error);
        }
      });

      // 失败回调包装
      this.rejectedArr.push((reason) => {
        try {
          const x = rejectedFn(reason);
          x instanceof MyPromise ? x.then(resolve, reject) : resolve(x);
        } catch (error) {
          reject(error);
        }
      });
    });
  }

  // catch方法实现
  catch(rejectedFn) {
    return this.then(null, rejectedFn);
  }

  // all静态方法实现
  static all(promises) {
    return new MyPromise((resolve, reject) => {
      const results = [];
      let completedCount = 0;
      promises.forEach((p, index) => {
        MyPromise.resolve(p).then(
          (result) => {
            results[index] = result;
            completedCount++;
            if (completedCount === promises.length) resolve(results);
          },
          (reason) => reject(reason) // 一个失败则整体失败
        );
      });
    });
  }
}

async function async1() {
  console.log('async1 start');
  await async2(); // 等价于 Promise.resolve(async2()).then(...)
  console.log('async1 end'); // 微任务
}
async function async2() {
  console.log('async2'); // 同步执行
}

console.log('script start'); // 同步
setTimeout(() => console.log('setTimeout'), 0); // 宏任务
async1(); // 执行async1
new Promise((resolve) => {
  console.log('promise1'); // 同步
  resolve();
}).then(() => console.log('promise2')); // 微任务
console.log('script end'); // 同步

// 客户端
function jsonpCallback(data) {
  console.log('跨域数据:', data);
}
const script = document.createElement('script');
script.src = 'https://api.xxx.com/data?callback=jsonpCallback';
document.body.appendChild(script);

// 服务器响应
jsonpCallback({ name: 'xxx', value: 'xxx' });

// webpack.config.js
module.exports = {
  devServer: {
    proxy: {
      '/api': {
        target: 'https://api.xxx.com', // 目标服务器
        changeOrigin: true, // 伪装同源
        pathRewrite: { '^/api': '' } // 路径重写
      }
    }
  }
};