程序员经验分享-hwhale

手写Promise

2023-11-02

Promise是JS进行异步操作的重要API，也是开发基本上绕不开的技术，所以很有必要对其进行深入的了解。本文我们就 一步步手动实现Promise的相关功能。

Promise属性和构造函数

原生功能
Promise对象的属性
  • 验证原生Promise 
let p = new Promise((resolve, reject) => {});
console.log(p);
  • 结果：
[[Prototype]]: Promise
[[PromiseState]]: "pending"
[[PromiseResult]]: undefined
  • 结论：

原生Promise有两个属性，PromiseState 和 PromiseResult

Promise构造函数
  • 验证原生Promise 
let p = new Promise((resolve, reject) => {
  resolve("success");
});
console.log(p);
  • 结果：
[[Prototype]]: Promise
[[PromiseState]]: "fulfilled"
[[PromiseResult]]: "success"
  • 结论
  1. resolve函数作用： 1) 将Promise的PromiseState 由 默认的 pending 变成了 fulfilled， 2) 将Promise的PromiseResult由undefined变成了函数的传入参数success。
  2. (resolve, reject) => { ... } 这函数在初始化对象的时候是同步执行的。
  • 验证原生Promise 
let p = new Promise((resolve, reject) => {
    reject("failed")
});
console.log(p);
  • 结果：
[[Prototype]]: Promise
[[PromiseState]]: "rejected"
[[PromiseResult]]: "failed"
  • 结论

reject函数作用： 1) 将Promise的PromiseState 由 默认的 pending 变成了 rejected， 2) 将Promise的PromiseResult由undefined变成了函数的传入参数failed。

代码模拟实现
function Promise(executor) {
  // 记录上下文，否则resolve和reject的this调用会有问题
  var _this = this;

  // 1. 设置属性
  this.PromiseState = "pending";
  this.PromiseResult = undefined;

  // 2. 两个对外暴露的函数接收传入的参数data，然后可以改变PromiseState和PromiseResult
  function resolve(data) {
    _this.PromiseState = "fulfilled";
    _this.PromiseResult = data;
  }

  function reject(data) {
    _this.PromiseState = "rejected";
    _this.PromiseResult = data;
  }

  // 3. 构造函数execotor会同步执行
  executor(resolve, reject);

}

Promise构造器函数执行抛出异常

  • 验证原生Promise 
let p = new Promise((resolve, reject) => {
  throw "throwed error"
});
console.log(p);
  • 结果：
[[Prototype]]: Promise
[[PromiseState]]: "rejected"
[[PromiseResult]]: "throwed error"
  • 结论

Promise构造器函数执行抛出异常则PromiseState变为rejected, PromiseResult为抛出异常的内容。

代码模拟实现
function Promise(executor) {
  var _this = this;

  this.PromiseState = "pending";
  this.PromiseResult = undefined;

  function resolve(data) {
    _this.PromiseState = "fulfilled";
    _this.PromiseResult = data;
  }

  function reject(data) {

    _this.PromiseState = "rejected";
    _this.PromiseResult = data;
  }

  // 用try,catch 捕获异常，有异常调用reject方法
  try {
    executor(resolve, reject);
  } catch (error) {
    reject(error);
  }

}

Promise状态只能修改一次

原生功能
  • 验证原生Promise 
let p = new Promise((resolve, reject) => {
  resolve("success");
  reject("failed");
});
console.log(p);
  • 结果：
[[Prototype]]: Promise
[[PromiseState]]: "fulfilled"
[[PromiseResult]]: "success"
  • 结论

Promise状态只能修改一次，所以要么是从 “pending” -> “fulfilled”, 要么是 “pending” -> “rejected”。之后就能修改了。

代码模拟实现
function Promise(executor) {
  var _this = this;

  this.PromiseState = "pending";
  this.PromiseResult = undefined;

  function resolve(data) {
    // 如果不是'pending'才修改，如果是'pending'说明已经修改过了，就忽略
    if (_this.PromiseState != 'pending') return;
    
    _this.PromiseState = "fulfilled";
    _this.PromiseResult = data;
  }

  function reject(data) {
    // 如果不是'pending'才修改，如果是'pending'说明已经修改过了，就忽略
    if (_this.PromiseState != 'pending') return;

    _this.PromiseState = "rejected";
    _this.PromiseResult = data;
  }

  try {
    executor(resolve, reject);
  } catch (error) {
    reject(error);
  }

}

Promise对象的then方法可以获取Promise结果

原生功能
  • 验证原生Promise 
let p = new Promise((resolve, reject) => {
  resolve("success");
});
p.then((data) => {
  console.log("第一个回调函数");
  console.log(data);
}, (error) => {
    console.log("第二个回调函数");
  console.log(error);
});
  • 结果：
第一个回调函数
success
  • 结论

如果Promise的PromiseState 是 fulfilled，则将PromiseResult作为实参调用then函数的第一个函数参数；

  • 验证原生Promise 
let p = new Promise((resolve, reject) => {
  reject("failed");
});
p.then((data) => {
  console.log("第一个回调函数");
  console.log(data);
}, (error) => {
  console.log("第二个回调函数");
  console.log(error);
});
  • 结果：
第二个回调函数
failed
  • 结论

如果Promise的PromiseState 是 rejected，则将PromiseResult作为实参调用then函数的第二个函数参数；

代码模拟实现
Promise.prototype.then = function(onFulfilled, onRejected) {
  var _this = this;

  // 如果Promise的状态是'fulfilled'，将结果通过第一个函数参数传递出去，
  // 如果Promise的状态是'rejected'，将结果通过第二个函数参数传递出去，
  if (_this.PromiseState == 'fulfilled') {
    onFulfilled(_this.PromiseResult);
  } else if (_this.PromiseState == "rejected") {
    onRejected(_this.PromiseResult);
  }
}

Promise对象的then方法接收异步任务的结果

原生功能
  • 验证原生Promise 
let p = new Promise((resolve, reject) => {
  setTimeout(() => {
    resolve("success");
  }, 2000);
});
p.then((data) => {
  console.log("第一个回调函数");
  console.log(data);
}, (error) => {
  console.log("第二个回调函数");
  console.log(error);
});
  • 结果：
<!-- 过了两秒再打印 -->
第一个回调函数
success
  • 结论

如果Promise执行的是异步任务，即调用then方法时PromiseState为pending，PromiseResult为undefined，先不回调结果，等PromiseResult有值以后再回调结果。

代码模拟实现

实现的逻辑就是如果暂时没有结果，就先把回调函数保存起来，等有结果的时候再执行回调函数。

function Promise(executor) {
  var _this = this;

  this.PromiseState = "pending";
  this.PromiseResult = undefined;
  // 定义一个变量保存回调函数
  this.thenCbs = {};

  function resolve(data) {
    _this.PromiseState = "fulfilled";
    _this.PromiseResult = data;
    // 如果有保存状态未改变时对应的回调函数就调用
    if (_this.thenCbs.onFulfilled !== undefined) {
      _this.thenCbs.onFulfilled(data);
    }
  }

  function reject(data) {
    _this.PromiseState = "rejected";
    _this.PromiseResult = data;
    if (_this.thenCbs.onRejected !== undefined) {
      _this.thenCbs.onRejected(data);
    }
  }

  try {
    executor(resolve, reject);
  } catch (error) {
    reject(error);
  }

}

Promise.prototype.then = function(onFulfilled, onRejected) {
  var _this = this;

  if (_this.PromiseState == 'fulfilled') {
    onFulfilled(_this.PromiseResult);
  } else if (_this.PromiseState == "rejected") {
    onRejected(_this.PromiseResult);
  } else if (_this.PromiseState == 'pending') {
    // 如果是异步任务，此时还没有结果，只能先保存回调函数，等有结果后再进行函数调用
    _this.thenCbs = {
      onFulfilled,
      onRejected
    };
  }
}

Promise对象的then方法可以多次调用

原生功能
  • 验证原生Promise 
let p = new Promise((resolve, reject) => {
  setTimeout(() => {
    resolve("success");
  }, 2000);
});

p.then((data) => {
  console.log("第一个回调函数");
  console.log(data);
});

p.then(data => {
  console.log("第二个回调函数");
  console.log(data);
})
  • 结果：
<!-- 过了两秒再打印 -->
第一个回调函数
success
第二个回调函数
success
  • 结论

对Promise多次调用then方法获取结果，对应的多个回调函数都会执行。

代码模拟实现

同步任务不会有问题，then调用多次执行多次，主要是异步任务需要修改。


function Promise(executor) {
  var _this = this;

  this.PromiseState = "pending";
  this.PromiseResult = undefined;
  // 保存回调函数的变量变为数组
  this.thenCbs = [];

  function resolve(data) {
    _this.PromiseState = "fulfilled";
    _this.PromiseResult = data;
    // 如果有保存状态未改变时对应的回调函数数组，就遍历调用
    _this.thenCbs.forEach((item) => {
      if (item.onFulfilled !== undefined) {
        item.onFulfilled(data);
      }
    })
  }

  function reject(data) {
    _this.PromiseState = "rejected";
    _this.PromiseResult = data;
    // 如果有保存状态未改变时对应的回调函数数组，就遍历调用
    _this.thenCbs.forEach((item) => {
      if (item.onRejected !== undefined) {
        item.onRejected(data);
      }
    })

  }

  try {
    executor(resolve, reject);
  } catch (error) {
    reject(error);
  }

}

Promise.prototype.then = function(onFulfilled, onRejected) {
  var _this = this;

  if (_this.PromiseState == 'fulfilled') {
    onFulfilled(_this.PromiseResult);
  } else if (_this.PromiseState == "rejected") {
    onRejected(_this.PromiseResult);
  } else if (_this.PromiseState == 'pending') {
    // 如果是异步任务，此时还没有结果，只能先保存回调函数，等有结果后再进行函数调用
    _this.thenCbs.push({
      onFulfilled,
      onRejected
    });
  }
}

Promise对象的then方法执行后的返回结果是Promise对象

原生功能
  • 验证原生Promise 
let p1 = new Promise((resolve, reject) => {
  resolve("success");
});

let res1 = p1.then((data) => {
}, (error) => {})
console.log(res1);

let res2 = p1.then((data) => {
  return "normal success again"
})
console.log(res2);

let res3 = p1.then((data) => {
  return new Promise((resolve, reject) => {
    resolve("promise success again");
  });
})
console.log(res3);

let res4 = p1.then((data) => {
  return new Promise((resolve, reject) => {
    reject("promise fail");
  });
})
console.log(res4);
  • 结果：
<!--res1-->
[[PromiseState]]: "fulfilled"
[[PromiseResult]]: undefined
<!--res2-->
[PromiseState]]: "fulfilled"
[[PromiseResult]]: "normal success again"
<!--res3-->
[[PromiseState]]: "fulfilled"
[[PromiseResult]]: "promise success again"
<!--res4-->
[[PromiseState]]: "rejected"
[[PromiseResult]]: "promise fail"
  • 结论
  1. then方法返回的是一个新的Promise对象，这个Promise对象的PromiseResult由then指定的回调函数返回值决定的；
    p.then((data) => {}, (error) => {}) 如果第一个函数(data) => {}被调用就是这个函数的返回值决定了新的Promise对象的PromiseResult和PromiseState，如果第二个函数(error) => {}被调用就是这个函数的返回值决定了新的Promise对象的PromiseResult和PromiseState
  2. 如果被调用的函数没有返回值，则新的Promise对象的PromiseResult 为 undefined,PromiseState 为 fulfilled;
  3. 如果被调用的函数有返回值但不是Promise，则新的Promise对象的PromiseResult 为 函数的返回值, PromiseState 为 fulfilled;
  4. 如果被调用的函数返回值是Promise，则新的Promise对象的PromiseResult 为 函数的返回值Promise的PromiseResult , PromiseState 为 函数的返回值Promise的 PromiseState。
代码模拟实现
Promise.prototype.then = function (onFulfilled, onRejected) {
  var _this = this;

  // 返回一个新的Promise对象,
  return new Promise((resolve, reject) => {
    
    // 定义一个处理then函数返回值的函数，这里就处理 onFulfilled 和 onRejected 两个函数
    let handleThenValue = (cb) => {
      try {
        // 得到成功的函数的返回结果
        let result = cb(_this.PromiseResult);
        // 如果这个函数的返回结果是Promise对象
        if (result instanceof Promise) {
          // 通过then获取result这个Promise的结果和状态, 得到的结果就是新的Promise对象的结果和状态
          result.then(
            (data) => {
              resolve(data);
            },
            (error) => {
              reject(error);
            }
          );
        } else {
          // 如果不是Promise对象，直接成功，结果为函数的返回值
          resolve(result);
        }
      } catch (error) {
        // 执行错误就抛出异常
        throw error;
      }
    };

    if (_this.PromiseState == "fulfilled") {
      // 处理 执行 onFulfilled 的返回值
      handleThenValue(onFulfilled);
    } else if (_this.PromiseState == "rejected") {
      // 处理 执行 onRejected 的返回值
      handleThenValue(onRejected);
    } else if (_this.PromiseState == "pending") {
      _this.thenCbs.push({
        // 需要扩展，所以需要用另外加一层能函数对onFulfilled和onRejected进行封装
        onFulfilled: () => {
          handleThenValue(onFulfilled)
        },
        onRejected: () => {
          handleThenValue(onRejected)
        },
      });
    }
  });
};

Promise对象的then链式调用的异常穿透

原生功能
  • 验证原生Promise 
<!-- 1 -->
let p1 = new Promise((resolve, reject) => {
  reject("error");
});

p1.then((data) => {
  console.log(data);
}).catch((error) => {
  console.log(error);
});

<!-- 2 -->
let p2 = new Promise((resolve, reject) => {
  resolve("success");
})

p2.then((data) => {
  throw "error"
}).then((data) => {
  console.log(data);
}).catch((e) => {
  console.log(e);
})
  • 结果：
error
error
  • 结论

中间then的链式调用过程中如果处理失败的Promise结果，在链式调用的最后调用catch方法可以得到第一个出现错误的Promise的结果。

代码模拟实现
Promise.prototype.then = function (onFulfilled, onRejected) {
  var _this = this;

  // 如果没传onRejected就创建一个函数抛出异常，由于onRejected抛出异常会被捕获，最后会执行reject(error);
  if (typeof onRejected !== "function") {
    onRejected = (e) => {
      throw e;
    };
  }

  return new Promise((resolve, reject) => {

    let handleThenValue = (cb) => {
      try {
        let result = cb(_this.PromiseResult);
        if (result instanceof Promise) {
          result.then(
            (data) => {
              resolve(data);
            },
            (error) => {
              reject(error);
            }
          );
        } else {
          resolve(result);
        }
      } catch (error) {
        // 如果抛出异常，或者没传onRejected就会走这里
        reject(error);
      }
    };

    if (_this.PromiseState == "fulfilled") {
      handleThenValue(onFulfilled);
    } else if (_this.PromiseState == "rejected") {
      handleThenValue(onRejected);
    } else if (_this.PromiseState == "pending") {
      _this.thenCbs.push({
        onFulfilled: () => {
          handleThenValue(onFulfilled)
        },
        onRejected: () => {
          handleThenValue(onRejected)
        },
      });
    }
  });
};

// 添加Catch的方法
Promise.prototype.catch = function (onRejected) {
  return this.then(undefined, onRejected);
};

Promise对象的then的值传递

原生功能
  • 验证原生Promise 
let p1 = new Promise((resolve, reject) => {
  resolve("success");
});

p1.then()
.then((data) => {
  console.log(data);
});
  • 结果：
success
  • 结论

如果Promise的PromiseState是fulfilled, 而then函数没有传成功的函数，则then函数返回的新Promise对象的PromiseState是fulfilled，新Promise对象的PromiseResult是上个Promise的PromiseResult`。

总结：p1.then()返回值 和 p1 的PromiseResult 和PromiseState 一样。

代码模拟实现
Promise.prototype.then = function (onFulfilled, onRejected) {
  
  // 内容不变省略

  // 如果没传值就造一个默认的函数, 把成功的值直接传递下去
  if (typeof onFulfilled !== 'function') {
    onFulfilled = value => value;
  }

  return new Promise((resolve, reject) => {
    // 内容不变省略
  });
};

Promise的resolve方法

原生功能
  • 验证原生Promise 

let p1 = Promise.resolve("1");
let p2 = Promise.resolve();
let p3 = Promise.resolve(new Promise((resolve, reject) => {
  reject("fail");
}));

console.log(p1);
console.log(p2);
console.log(p3);
  • 结果：
[[Prototype]]: Promise
[[PromiseState]]: "fulfilled"
[[PromiseResult]]: "1"

[[Prototype]]: Promise
[[PromiseState]]: "fulfilled"
[[PromiseResult]]: undefined

[[Prototype]]: Promise
[[PromiseState]]: "rejected"
[[PromiseResult]]: "fail"
  • 结论
  1. Promise.resolve可以用来构建一个Promise对象；
  2. 如果传入的参数不是Promise对象，则创建的Promise对象 PromiseState 为 fulfilled,
    PromiseResult 为传入的参数；
  3. 如果传入的参数是Promise对象，这创建的Promise对象和参数的属性一致。
代码模拟实现
Promise.resolve = function(params) {
  // 返回一个新的Promise对象
  return new Promise((resolve, reject) => {
    // 如果传入的是Promise对象，则状态和结果和参数一致
    if (params instanceof Promise) {
      params.then((data) => {
        resolve(data);
      }, (error) => {
        reject(error)
      });
    } else {
      // 如果传入的不是Promise对象，直接成功，成功的结果是传入的参数
      resolve(params);
    }
  });
}

Promise的reject方法

原生功能
  • 验证原生Promise 
let p1 = Promise.reject("1");
let p2 = Promise.reject();
let p3 = Promise.reject(new Promise((resolve, reject) => {
  resolve("success");
}));

console.log(p1);
console.log(p2);
console.log(p3);
  • 结果：
[[Prototype]]: Promise
[[PromiseState]]: "rejected"
[[PromiseResult]]: "1"

[[Prototype]]: Promise
[[PromiseState]]: "rejected"
[[PromiseResult]]: undefined

[[Prototype]]: Promise
[[PromiseState]]: "rejected"
[[PromiseResult]]: Promise
  • 结论

总是返回一个失败的Promise对象，PromiseResult为传入的参数

代码模拟实现
Promise.reject = function(params) {
  console.log(params.PromiseState);
  return new Promise((resolve, reject) => {
    reject(params);
  });
}

Promise的all方法

原生功能
  • 验证原生Promise 
let p1 = Promise.resolve("1");
let p2 = Promise.resolve("2");
let p3 = Promise.resolve(new Promise((resolve, reject) => {
  resolve("success");
}));
let p4 = Promise.reject("fail");

Promise.all([p1, p2, p3]).then((data) => {
  console.log(data);
}, (error) => {
  console.warn(error);
});

Promise.all([p1, p2, p4]).then((data) => {
  console.log(data);
}, (error) => {
  console.warn(error);
});
  • 结果：
[1,2,"success"]
fail
  • 结论
  1. Promise.all返回一个新的Promise对象，Promise数组参数如果最后状态都变为fulfilled , 则返回一个数组，新的Promise对象的PromiseResult为一个数组，数组中的值是Promise的PromiseResult;
  2. Promise.all返回一个新的Promise对象，Promise数组参数如果有一个变为rejected , 则新的Promise对象PromiseState变为rejected，PromiseResult为失败的Promise的PromiseResult；
代码模拟实现
Promise.all = function(arr) {

  return new Promise((resolve, reject) => {
    try {
      let resultArr = [];
      let count = 0;
      // 遍历Promise对象
      arr.forEach((item, index) => {
        // 取每个Promise的值
        item.then((data) => {
          // 成功就记录下来
          resultArr[index] = data;
          count ++;
          // 如果都成功了，就该状态
          if (count == arr.length) {
            resolve(resultArr);
          }
        }, (error) => {
          // 只要有一个失败就失败
          reject(error);
        })
      });

    } catch (error) {
      reject(error);      
    }
  });
}

Promise的race方法

race 传入一个Promsie数组，返回一个新的Promsie对象。新的Promsie对象的PromiseState和PromiseResult 由最先完成的那个Promise决定。

代码模拟实现
Promise.race = function(arr) {
  return new Promise((resolve, reject) =>{
    try {
      // 谁先改变状态谁来决定返回的结果
      arr.forEach((item) => {
        item.then((data) => {
          resolve(data);
        }, (error) =>{
          reject(error);
        })
      })
    } catch (error) {
      reject(error);
    }
  });
}

Promise对象的finally方法

原生功能
  • 验证原生Promise 
let p1 = new Promise((resolve, reject) => {
  resolve("success");
});

p1.then((data) => {
  console.log("success called：", data);
}, (e) => {
  console.log(e);
})
.finally((a) => {
  console.log("finally called");
})

let p2 = new Promise((resolve, reject) => {
  reject("failed");
})

p2.then((data) => {
  console.log(data);
}, (e) => {
  console.log("error called：", e);
})
.finally((a) => {
  console.log("finally called");
})
  • 结果：
success called： success
finally called

error called： failed
finally called
  • 结论

Promise无论是成功还是失败，在PromiseState变化后都会调用finally方法。
finally方法的返回值也是值传递。即p.finally()返回值 和 p 的PromiseResult 和PromiseState 一样。

代码模拟实现
Promise.prototype.finally = function(onFinally) {
  // 构造两个回调函数，
  return this.then(
    function(data) {
      // 这里先执行onFinally函数，然后返回原来的值
      return Promise.resolve(onFinally()).then((data) => data);
    },
    function(error) {
      // 这里先执行onFinally函数，然后抛出错误
      return Promise.resolve(onFinally()).then(() => {throw error});
    }
  )
}

完成

function Promise(executor) {
  var _this = this;

  this.PromiseState = "pending";
  this.PromiseResult = undefined;
  this.thenCbs = [];

  function resolve(data) {
    _this.PromiseState = "fulfilled";
    _this.PromiseResult = data;
    _this.thenCbs.forEach((item) => {
      if (item.onFulfilled !== undefined) {
        item.onFulfilled(data);
      }
    });
  }

  function reject(data) {
    _this.PromiseState = "rejected";
    _this.PromiseResult = data;
    _this.thenCbs.forEach((item) => {
      if (item.onRejected !== undefined) {
        item.onRejected(data);
      }
    });
  }

  try {
    executor(resolve, reject);
  } catch (error) {
    reject(error);
  }
}

Promise.prototype.then = function (onFulfilled, onRejected) {
  var _this = this;

  if (typeof onRejected !== "function") {
    onRejected = (e) => {
      throw e;
    };
  }

  if (typeof onFulfilled !== 'function') {
    onFulfilled = value => value;
  }

  return new Promise((resolve, reject) => {

    let handleThenValue = (cb) => {
      try {
        let result = cb(_this.PromiseResult);
        if (result instanceof Promise) {
          result.then(
            (data) => {
              resolve(data);
            },
            (error) => {
              reject(error);
            }
          );
        } else {
          resolve(result);
        }
      } catch (error) {
        reject(error);
      }
    };

    if (_this.PromiseState == "fulfilled") {
      handleThenValue(onFulfilled);
    } else if (_this.PromiseState == "rejected") {
      handleThenValue(onRejected);
    } else if (_this.PromiseState == "pending") {
      _this.thenCbs.push({
        onFulfilled: () => {
          handleThenValue(onFulfilled)
        },
        onRejected: () => {
          handleThenValue(onRejected)
        },
      });
    }
  });
};

Promise.prototype.catch = function (onRejected) {
  return this.then(undefined, onRejected);
};

Promise.prototype.finally = function(onFinally) {
  return this.then(
    function(data) {
      return Promise.resolve(onFinally()).then((data) => data);
    },
    function(error) {
      return Promise.resolve(onFinally()).then(() => {throw error});
    }
  )
}

Promise.resolve = function(params) {
  return new Promise((resolve, reject) => {
    if (params instanceof Promise) {
      params.then((data) => {
        resolve(data);
      }, (error) => {
        reject(error)
      });
    } else {
      resolve(params);
    }
  });
}

Promise.reject = function(params) {
  return new Promise((resolve, reject) => {
    reject(params);
  });
}

Promise.all = function(arr) {

  return new Promise((resolve, reject) => {
    try {
      let resultArr = [];
      let count = 0;
      arr.forEach((item, index) => {
        item.then((data) => {
          resultArr[index] = data;
          count ++;
          if (count == arr.length) {
            resolve(resultArr);
          }
        }, (error) => {
          reject(error);
        })
      });

    } catch (error) {
      reject(error);      
    }
  });
}
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)

javascript

前端

typescript

手写Promise 的相关文章

  • 如何在同一页面上使用AJAX处理多个表单

    我有一个表单 当我单击 提交 时 它就被提交了 然后该表单隐藏 操作页面的结果显示在 div 中 classname dig 它工作正常 但是当我添加另一个表单时 它停止正常工作并且所有表单同时提交 我如何更改我的代码 done click

  • 如何测试 javascript 闭包内的函数

    这似乎是不可能的 也可能是 但我正在尝试更多的 TDD 但我总是在闭包方面碰壁 假设我有以下内容 function createSomething init function privateMethod param return init

  • 打字稿中枚举声明中的方括号的含义是什么？

    我正在浏览一个名为 Angular ngrx 项目的打字稿文件collection ts在那里 我看到声明了以下枚举常量 import Action from ngrx store import Book from models book

  • TypeError: props.render 不是一个函数（React hook 形式）

    我将方法作为我用react hook form制作的形式的道具传递 当从react hook form添加控制器时 它给了我 TypeError props render不是一个函数 我在网上找不到任何解决方案 因此感谢任何帮助 impor

  • 在 Wordpress 站点中进行 AJAX 调用时出现问题

    我在使用 Wordpress 站点功能的 AJAX 部分时遇到了一些问题 该功能接受在表单上输入的邮政编码 使用 PHP 函数来查找邮政编码是否引用特定位置并返回到该位置的永久链接 我的第一个问题是关于我构建的表单 现在我的表单操作是空白的

  • Google App Engine：修改云运行环境

    我正在尝试部署一个使用自定义 Node js 服务器的 Next js 应用程序 我想将自定义构建变量注入应用程序 next config js const NODE ENV process env NODE ENV const envTy

  • 如何抑制窗口鼠标滚轮滚动...？

    我正在开发嵌入页面中的画布应用程序 我有它 因此您可以使用鼠标滚轮放大绘图 但不幸的是 这会滚动页面 因为它是文章的一部分 当我在 dom 元素上滚动鼠标滚轮时 是否可以阻止鼠标滚轮在窗口上滚动 附加鼠标滚轮 不是 Gecko DOMMou

  • 如何监听 jQuery AJAX 请求？

    以下两种实现 ajaxRequest 1 2 的方法应该是等效的 话说回来 为什么验证回调已执行的单元测试 3 在 1 中成功而在 2 中失败 我应该如何重写测试 3 来监视 2 中的成功回调 如果我尝试stub jQuery ajax使用

  • Javascript正则表达式用于字母字符和空格？ [关闭]

    这个问题不太可能对任何未来的访客有帮助 它只与一个较小的地理区域 一个特定的时间点或一个非常狭窄的情况相关 通常不适用于全世界的互联网受众 为了帮助使这个问题更广泛地适用 访问帮助中心 help reopen questions 我需要一个

  • 音频 blob 的 URL.createObjectURL 在 Firefox 中给出 TypeError

    我正在尝试从创建的音频 blob 创建对象 URLgetUserMedia 该代码在 Chrome 中可以运行 但在 Firefox 中存在问题 错误 当我打电话时stopAudioRecorder 它停在audio player src

  • 如何将 Google Charts 与 Vue.js 库一起使用？

    我正在尝试使用 Vue js 库使用 Google Charts 制作图表 但我不知道如何添加到 div 这是我尝试做的 这是如何使用普通 javascript 添加图表 这是文档的代码示例 https developers google

  • Jquery/Javascript 上传和下载文件，无需后端

    是否可以在没有后端服务器的情况下在 JavaScript 函数中下载和上传文件 我需要导出和导入由 JavaScript 函数生成的 XML 我想创建按钮 保存 xml 来保存文件 但我不知道是否可行 另一方面 我希望将 XML 文件直接上

  • 表单计算器脚本基本价格未加载 OnLoad

    我的表单中有一个计算器来计算我的下拉选项选择 function select calculate on change calc input type checkbox calculate on click calc function cal

  • 提交表单并重定向页面

    我在 SO 上看到了很多与此相关的其他问题 但没有一个对我有用 我正在尝试提交POST表单 然后将用户重定向到另一个页面 但我无法同时实现这两种情况 我可以获取重定向或帖子 但不能同时获取两者 这是我现在所拥有的

  • Grails 在 javascript 内的 GSP 站点中使用 grails var

    我有一个在 GSP 文件中的 javascript 代码中使用 grails 变量值的问题 例如 我有一个会话值session getAttribute selectedValue 我想在 javascript 代码部分使用这个值 我现在的

  • HTML 离线应用程序缓存，列出下载的文件

    作为我正在构建的离线 Web 应用程序的加载屏幕的一部分 使用缓存清单 http developer apple com library safari documentation iPhone Conceptual SafariJSData

  • 如何在类似控制台的环境中运行 JavaScript？

    我正在尝试遵循这里的示例 http eloquentjavascript net chapter2 html http eloquentjavascript net chapter2 html and print blah 在浏览器中运行时

  • 如何更改此 jquery 插件的时区/时间戳？

    我正在使用这个名为 timeago 的插件 在这里找到 timeago yarp com 它工作得很好 只是它在似乎不同的时区运行 我住在美国东部 费城时区 当我将准确的 EST 时间放入 timeago 插件时 比如 2011 05 28

  • 如何仅在最后一个
  • 处给出透明六边形角度？

    • 我必须制作这样的菜单 替代文本 http shup com Shup 330421 1104422739 My Desktop png http shup com Shup 330421 1104422739 My Desktop png

  • 将 MQTTNet 服务器与 MQTT.js 客户端结合使用

    我已经启动了一个 MQTT 服务器 就像this https github com chkr1011 MQTTnet tree master例子 该代码托管在 ASP Net Core 2 0 应用程序中 但我尝试过控制台应用程序 但没有成

随机推荐

  • SQL基础教程 数据库和SQL

    目录 第一章 数据库和SQL 1 1 数据库是什么 一 数据库和数据库管理系统 二 DBMS的种类 1 2 数据库的结构 一 RDBMS的从常见系统结构 二 表的结构 1 3 SQL概要 一 SQL语句及其种类 二 SQL的基本书写规则 1

  • tomcat的Context配置项docBase和path的区别

    1 tomcat的config目录下的server xml中Context配置项docBase和path的区别如下 1 docBase是指项目ROOT所在路径 2 path是指该项目访问的路径 如

  • 9个用于本地存储JavaScript库

    The HTML5 Local Storage API part of Web Storage has excellent browser support and is being used in more and more applica

  • mysql 5.7二进制包安装

    1 上传安装安装包mysql 5 7 14 linux glibc2 5 x86 64 tar gz到 home mysqlintall目录并解压 2 建立用户mysql和组 groupadd mysql useradd r g mysql

  • Linux系统与管理 - （五）应用安装与管理❤

    自说 学习路径 RPM软件包 YUM安装 RPM与YUM的优劣 自说 在使用Linux系统的过程中我们经常需要安装和更新系统及服务 在Linux系统中软件的安装方式和模式是什么 接下来针对安装及管理作此描述 学习路径 Linux系统与管理

  • Element-Ui组件 单选框（Radio） 修改点击激活时的文本颜色，填充色和边框色

    Element Ui组件 单选框 Radio 修改点击激活时的文本颜色 填充色和边框色 官方组件显示的效果 需要的效果 直接添加样式 选中后的字体颜色 el radio input is checked el radio label col

  • 双指针、前缀和、二分、差分、递推

    维生素C吃多了会上火 个人CSDN博文目录 2022蓝桥杯 目录 前缀和 双指针 前缀和 激光炸弹 k倍区间 双指针 统计日志

  • Android的ScrollView简单使用实例(附Demo)

    目录 1 垂直滚动 Scroll 2 水平滚动 HorizontalScrollView Demo地址 https github com zGuangYuan Androidstudio example 垂直滚动 Scroll 水平滚动 H

  • Android开机流程(一)

    参考文章 Android系统开篇 一 概述 简单梳理下Andorid启动流程 一般操作系统启动流程如下图 Android系统启动流程概览 system server服务启动流程 启动过程 Loader gt Kernel gt Native

  • JSP数据交互（一）---内置对象》request（乱码解决）理解原理解决乱码问题

    Jsp内置对象之out JSp内置对象是Web容器创建的一组对象 没有进行声明创建但却可以使用out对象 不经常使用的内置对象 pageContext 内置对象的集大成者 config 指定Jsp页面初始配置的 Servlet page 当

  • C语言-----标识符、关键字、常量、变量

    这篇文章主要对C语言的标识符 关键字 常量 变量的一些细致知识点进行详细的讲解 比如 1 标识符的命名规范 也就是常量 变量 函数名的命名规则进行规范的讲解 2 C语言的关键字列表 3 常量的定义及其分类 4 对全局变量和局部变量的细节知识

  • 带你掌握Vue3新宠——快速Diff算法

    前言 我们都知道Vue 2中用的diff算法是双端Diff 而Vue 3的其中一个特性就是把底层的diff算法改成了快速Diff 与字面意思一样 快速diff是目前已知的最快的diff算法 本文将带大家解剖一下快速diff的原理 预处理 在

  • 常用服务器命令

    ssh 用户名 服务器地址 密码 nvidia smi查看当前显卡状态11 top 用户使用进程 Q 推出top CUDA VISIBLE DEVICESE 2 3 nohup python u test py gt test log 2

  • notepad++ json 排版插件 NPPJSONViewer dll

    将下载的32位或者64位插件dll文件拷贝到notepad 安装目录Notepad plugins 下面 例如我的目录 C Program Files Notepad plugins 拷贝后 或者在此路径下新建一个文件夹 重启notepad

  • cart回归树备忘录

    Cart回归树相关 决策树回顾 Cart树 分类树 回归树 最小二乘回归树 决策树回顾 1 决策树进化 ID3 C4 5 Cart 提问 异同点 2 决策树节点分裂评估准则 分类 信息增益 信息增益比率 gini系数 回归 MSE 提问 优

  • Python3，掌握这4个自动化脚本，让工作效率提升200%。

    4个自动化脚本 1 引言 2 自动发送多封邮件 2 1 模块介绍 2 2 代码实战 3 自动桌面提示 3 1 模块介绍 3 2 代码实战 4 自动生成素描草图 4 1 模块介绍 4 2 代码实战 5 自动化阅读网页新闻 5 1 模块介绍 5

  • kafka在Linux上的安装 运行,Linux下Kafka单机安装配置

    说明 操作系统 CentOS 6 x 64位 Kafka版本 kafka 2 11 0 8 2 1 实现目的 单机安装配置kafka 具体操作 一 关闭SELINUX 开启防火墙9092端口 1 关闭SELINUX vi etc selin

  • 8086汇编语言：标志寄存器的各个标志位的详细介绍

    一 基本介绍 CPU的内部的寄存器中 有一类特殊的寄存器 对于不同的处理机 其个数和结构都可能不同 它具有以下三种作用 这种特殊的寄存器在8086CPU中 被称为标志寄存器flag 8086CPU的标志寄存器有16位 其中存储的信息通常又被

  • 电路中VCC VDD VSS VEE GND的含义

    在电路中 芯片引脚经常会出现VCC VDD VSS VEE和GND这些标示 其中VCC一般表示通用芯片的电源引脚 比如一些模拟运放的正电源引脚 74系列数字芯片的电源引脚 VCC一般接相应的正电源电压 VDD一般表示数字芯片的电源引脚 如果

  • 手写Promise

    Promise是JS进行异步操作的重要API 也是开发基本上绕不开的技术 所以很有必要对其进行深入的了解 本文我们就 一步步手动实现Promise的相关功能 Promise属性和构造函数 原生功能 Promise对象的属性 验证原生Prom

热门标签