html教程

Appearance

promise ​

ts
const p1 = new Promise((resolve, reject) => {
  resolve(1)
})
const p2 = new Promise((resolve, reject) => {
  setTimeout(() => {
    resolve(2)
  }, 500)
})
const p3 = new Promise((resolve, reject) => {
  setTimeout(() => {
    reject(3)
  }, 500)
})

console.log(p1)
console.log(p2)
console.log(p3)
setTimeout(() => {
  console.log(p2)
}, 1000)
setTimeout(() => {
  console.log(p3)
}, 1000)

p1.then((value) => {
  console.log(value)
})
p2.then((value) => {
  console.log(value)
})
p3.catch((err) => {
  console.log(err)
})
// Promise的内部实现是一个状态机。Promise有三种状态：pending，resolved，rejected。当Promise刚创建完成时，处于pending状态；当Promise中的函数参数执行了resolve后，Promise由pending状态变成resolved状态；如果在Promise的函数参数中执行的不是resolve方法，而是reject方法，那么Promise会由pending状态变成rejected状态。
// p2、p3刚创建完成时，控制台输出的这两台Promise都处于pending状态，但为什么p1是resolved状态呢？ 这是因为p1 的函数参数中执行的是一段同步代码，Promise刚创建完成，resolve方法就已经被调用了，因而紧跟着的输出显示p1是resolved状态。我们通过两个setTimeout函数，延迟1s后再次输出p2、p3的状态，此时p2、p3已经执行完成，状态分别变成resolved和rejected。
export {}
const p1 = new Promise((resolve, reject) => {
  resolve(1)
})
const p2 = new Promise((resolve, reject) => {
  setTimeout(() => {
    resolve(2)
  }, 500)
})
const p3 = new Promise((resolve, reject) => {
  setTimeout(() => {
    reject(3)
  }, 500)
})

console.log(p1)
console.log(p2)
console.log(p3)
setTimeout(() => {
  console.log(p2)
}, 1000)
setTimeout(() => {
  console.log(p3)
}, 1000)

p1.then((value) => {
  console.log(value)
})
p2.then((value) => {
  console.log(value)
})
p3.catch((err) => {
  console.log(err)
})
// Promise的内部实现是一个状态机。Promise有三种状态：pending，resolved，rejected。当Promise刚创建完成时，处于pending状态；当Promise中的函数参数执行了resolve后，Promise由pending状态变成resolved状态；如果在Promise的函数参数中执行的不是resolve方法，而是reject方法，那么Promise会由pending状态变成rejected状态。
// p2、p3刚创建完成时，控制台输出的这两台Promise都处于pending状态，但为什么p1是resolved状态呢？ 这是因为p1 的函数参数中执行的是一段同步代码，Promise刚创建完成，resolve方法就已经被调用了，因而紧跟着的输出显示p1是resolved状态。我们通过两个setTimeout函数，延迟1s后再次输出p2、p3的状态，此时p2、p3已经执行完成，状态分别变成resolved和rejected。
export {}
ts
let p = new Promise(function (resolve, reject) {
  resolve(1)
})
p.then(function (value) {
  //第一个then
  console.log(value)
  return value * 2
})
  .then(function (value) {
    //第二个then
    console.log(value)
  })
  .then(function (value) {
    //第三个then
    console.log(value)
    return Promise.resolve('resolve')
  })
  .then(function (value) {
    //第四个then
    console.log(value)
    return Promise.reject('reject')
  })
  .then(
    function (value) {
      //第五个then
      console.log('resolve: ' + value)
    },
    function (err) {
      console.log('reject: ' + err)
    },
  )
// Promise对象的then方法返回一个新的Promise对象，因此可以通过链式调用then方法。then方法接收两个函数作为参数，第一个参数是Promise执行成功时的回调，第二个参数是Promise执行失败时的回调。两个函数只会有一个被调用，函数的返回值将被用作创建then返回的Promise对象。这两个参数的返回值可以是以下三种情况中的一种：

// return 一个同步的值 ，或者 undefined（当没有返回一个有效值时，默认返回undefined），then方法将返回一个resolved状态的Promise对象，Promise对象的值就是这个返回值。
// return 另一个 Promise，then方法将根据这个Promise的状态和值创建一个新的Promise对象返回。
// throw 一个同步异常，then方法将返回一个rejected状态的Promise,  值是该异常。

// 根据以上分析，代码中第一个then会返回一个值为2（1*2），状态为resolved的Promise对象，于是第二个then输出的值是2。第二个then中没有返回值，因此将返回默认的undefined，于是在第三个then中输出undefined。第三个then和第四个then中分别返回一个状态是resolved的Promise和一个状态是rejected的Promise，依次由第四个then中成功的回调函数和第五个then中失败的回调函数处理。
let p = new Promise(function (resolve, reject) {
  resolve(1)
})
p.then(function (value) {
  //第一个then
  console.log(value)
  return value * 2
})
  .then(function (value) {
    //第二个then
    console.log(value)
  })
  .then(function (value) {
    //第三个then
    console.log(value)
    return Promise.resolve('resolve')
  })
  .then(function (value) {
    //第四个then
    console.log(value)
    return Promise.reject('reject')
  })
  .then(
    function (value) {
      //第五个then
      console.log('resolve: ' + value)
    },
    function (err) {
      console.log('reject: ' + err)
    },
  )
// Promise对象的then方法返回一个新的Promise对象，因此可以通过链式调用then方法。then方法接收两个函数作为参数，第一个参数是Promise执行成功时的回调，第二个参数是Promise执行失败时的回调。两个函数只会有一个被调用，函数的返回值将被用作创建then返回的Promise对象。这两个参数的返回值可以是以下三种情况中的一种：

// return 一个同步的值 ，或者 undefined（当没有返回一个有效值时，默认返回undefined），then方法将返回一个resolved状态的Promise对象，Promise对象的值就是这个返回值。
// return 另一个 Promise，then方法将根据这个Promise的状态和值创建一个新的Promise对象返回。
// throw 一个同步异常，then方法将返回一个rejected状态的Promise,  值是该异常。

// 根据以上分析，代码中第一个then会返回一个值为2（1*2），状态为resolved的Promise对象，于是第二个then输出的值是2。第二个then中没有返回值，因此将返回默认的undefined，于是在第三个then中输出undefined。第三个then和第四个then中分别返回一个状态是resolved的Promise和一个状态是rejected的Promise，依次由第四个then中成功的回调函数和第五个then中失败的回调函数处理。
ts
let p1 = new Promise(function (resolve, reject) {
  foo.bar()
  resolve(1)
})

p1.then(
  function (value) {
    console.log('p1 then value: ' + value)
  },
  function (err) {
    console.log('p1 then err: ' + err)
  },
).then(
  function (value) {
    console.log('p1 then then value: ' + value)
  },
  function (err) {
    console.log('p1 then then err: ' + err)
  },
)

let p2 = new Promise(function (resolve, reject) {
  resolve(2)
})

p2.then(
  function (value) {
    console.log('p2 then value: ' + value)
    foo.bar()
  },
  function (err) {
    console.log('p2 then err: ' + err)
  },
)
  .then(
    function (value) {
      console.log('p2 then then value: ' + value)
    },
    function (err) {
      console.log('p2 then then err: ' + err)
      return 1
    },
  )
  .then(
    function (value) {
      console.log('p2 then then then value: ' + value)
    },
    function (err) {
      console.log('p2 then then then err: ' + err)
    },
  )
// Promise中的异常由then参数中第二个回调函数（Promise执行失败的回调）处理，异常信息将作为Promise的值。异常一旦得到处理，then返回的后续Promise对象将恢复正常，并会被Promise执行成功的回调函数处理。另外，需要注意p1、p2 多级then的回调函数是交替执行的 ，这正是由Promise then回调的异步性决定的。
let p1 = new Promise(function (resolve, reject) {
  foo.bar()
  resolve(1)
})

p1.then(
  function (value) {
    console.log('p1 then value: ' + value)
  },
  function (err) {
    console.log('p1 then err: ' + err)
  },
).then(
  function (value) {
    console.log('p1 then then value: ' + value)
  },
  function (err) {
    console.log('p1 then then err: ' + err)
  },
)

let p2 = new Promise(function (resolve, reject) {
  resolve(2)
})

p2.then(
  function (value) {
    console.log('p2 then value: ' + value)
    foo.bar()
  },
  function (err) {
    console.log('p2 then err: ' + err)
  },
)
  .then(
    function (value) {
      console.log('p2 then then value: ' + value)
    },
    function (err) {
      console.log('p2 then then err: ' + err)
      return 1
    },
  )
  .then(
    function (value) {
      console.log('p2 then then then value: ' + value)
    },
    function (err) {
      console.log('p2 then then then err: ' + err)
    },
  )
// Promise中的异常由then参数中第二个回调函数（Promise执行失败的回调）处理，异常信息将作为Promise的值。异常一旦得到处理，then返回的后续Promise对象将恢复正常，并会被Promise执行成功的回调函数处理。另外，需要注意p1、p2 多级then的回调函数是交替执行的 ，这正是由Promise then回调的异步性决定的。
ts
let p1 = Promise.resolve(1)
let p2 = Promise.resolve(p1)
let p3 = new Promise(function (resolve, reject) {
  resolve(1)
})
let p4 = new Promise(function (resolve, reject) {
  resolve(p1)
})

console.log(p1 === p2)
console.log(p1 === p3)
console.log(p1 === p4)
console.log(p3 === p4)

p4.then(function (value) {
  console.log('p4=' + value)
})

p2.then(function (value) {
  console.log('p2=' + value)
})

p1.then(function (value) {
  console.log('p1=' + value)
})
// Promise.resolve(...)可以接收一个值或者是一个Promise对象作为参数。当参数是普通值时，它返回一个resolved状态的Promise对象，对象的值就是这个参数；当参数是一个Promise对象时，它直接返回这个Promise参数。因此，p1 === p2。但通过new的方式创建的Promise对象都是一个新的对象，因此后面的三个比较结果都是false。另外，为什么p4的then最先调用，但在控制台上是最后输出结果的呢？因为p4的resolve中接收的参数是一个Promise对象p1，resolve会对p1”拆箱“，获取p1的状态和值，但这个过程是异步的
let p1 = Promise.resolve(1)
let p2 = Promise.resolve(p1)
let p3 = new Promise(function (resolve, reject) {
  resolve(1)
})
let p4 = new Promise(function (resolve, reject) {
  resolve(p1)
})

console.log(p1 === p2)
console.log(p1 === p3)
console.log(p1 === p4)
console.log(p3 === p4)

p4.then(function (value) {
  console.log('p4=' + value)
})

p2.then(function (value) {
  console.log('p2=' + value)
})

p1.then(function (value) {
  console.log('p1=' + value)
})
// Promise.resolve(...)可以接收一个值或者是一个Promise对象作为参数。当参数是普通值时，它返回一个resolved状态的Promise对象，对象的值就是这个参数；当参数是一个Promise对象时，它直接返回这个Promise参数。因此，p1 === p2。但通过new的方式创建的Promise对象都是一个新的对象，因此后面的三个比较结果都是false。另外，为什么p4的then最先调用，但在控制台上是最后输出结果的呢？因为p4的resolve中接收的参数是一个Promise对象p1，resolve会对p1”拆箱“，获取p1的状态和值，但这个过程是异步的
ts
let p1 = new Promise(function (resolve, reject) {
  resolve(Promise.resolve('resolve'))
})

let p2 = new Promise(function (resolve, reject) {
  resolve(Promise.reject('reject'))
})

let p3 = new Promise(function (resolve, reject) {
  reject(Promise.resolve('resolve'))
})

p1.then(
  function fulfilled(value) {
    console.log('p1: fulfilled: ' + value)
  },
  function rejected(err) {
    console.log('p1: rejected: ' + err)
  },
)

p2.then(
  function fulfilled(value) {
    console.log('p2: fulfilled: ' + value)
  },
  function rejected(err) {
    console.log('p2: rejected: ' + err)
  },
)

p3.then(
  function fulfilled(value) {
    console.log('p3: fulfilled: ' + value)
  },
  function rejected(err) {
    console.log('p3: rejected: ' + err)
  },
)
// Promise回调函数中的第一个参数resolve，会对Promise执行"拆箱"动作。即当resolve的参数是一个Promise对象时，resolve会"拆箱"获取这个Promise对象的状态和值，但这个过程是异步的。p1"拆箱"后，获取到Promise对象的状态是resolved，因此fulfilled回调被执行；p2"拆箱"后，获取到Promise对象的状态是rejected，因此rejected回调被执行。但Promise回调函数中的第二个参数reject不具备”拆箱“的能力，reject的参数会直接传递给then方法中的rejected回调。因此，即使p3 reject接收了一个resolved状态的Promise，then方法中被调用的依然是rejected，并且参数就是reject接收到的Promise对象。
let p1 = new Promise(function (resolve, reject) {
  resolve(Promise.resolve('resolve'))
})

let p2 = new Promise(function (resolve, reject) {
  resolve(Promise.reject('reject'))
})

let p3 = new Promise(function (resolve, reject) {
  reject(Promise.resolve('resolve'))
})

p1.then(
  function fulfilled(value) {
    console.log('p1: fulfilled: ' + value)
  },
  function rejected(err) {
    console.log('p1: rejected: ' + err)
  },
)

p2.then(
  function fulfilled(value) {
    console.log('p2: fulfilled: ' + value)
  },
  function rejected(err) {
    console.log('p2: rejected: ' + err)
  },
)

p3.then(
  function fulfilled(value) {
    console.log('p3: fulfilled: ' + value)
  },
  function rejected(err) {
    console.log('p3: rejected: ' + err)
  },
)
// Promise回调函数中的第一个参数resolve，会对Promise执行"拆箱"动作。即当resolve的参数是一个Promise对象时，resolve会"拆箱"获取这个Promise对象的状态和值，但这个过程是异步的。p1"拆箱"后，获取到Promise对象的状态是resolved，因此fulfilled回调被执行；p2"拆箱"后，获取到Promise对象的状态是rejected，因此rejected回调被执行。但Promise回调函数中的第二个参数reject不具备”拆箱“的能力，reject的参数会直接传递给then方法中的rejected回调。因此，即使p3 reject接收了一个resolved状态的Promise，then方法中被调用的依然是rejected，并且参数就是reject接收到的Promise对象。
ts
const fetch = require(`node-fetch`)
const { URLSearchParams } = require(`url`)

const params = new URLSearchParams()
params.append(`a`, 1)

fetch(`https://httpbin.org/post`, { method: `POST`, body: params })
  .then((res) => res.json())
  .then((json) => console.log(json))
const fetch = require(`node-fetch`)
const { URLSearchParams } = require(`url`)

const params = new URLSearchParams()
params.append(`a`, 1)

fetch(`https://httpbin.org/post`, { method: `POST`, body: params })
  .then((res) => res.json())
  .then((json) => console.log(json))

async ​

js
/*
 * @Author: your name
 * @Date: 2020-04-08 15:45:38
 * @LastEditTime: 2020-04-08 15:46:07
 * @LastEditors: your name
 * @Description: In User Settings Edit
 * @FilePath: \jstutor\asyne.js
 */
/* 选自 小美娜娜 文章 */
async function async1() {
  console.log("async1 start");
  await async2();
  console.log("async1 end");
}

async function async2() {
  console.log("async2");
}

console.log("script start");

setTimeout(() => {
  console.log("settimeout");
}, 0);

async1();

new Promise(function (resolve) {
  console.log("promise1");
  resolve();
}).then(function () {
  console.log("promise2");
});
console.log("script end");
/*
 * @Author: your name
 * @Date: 2020-04-08 15:45:38
 * @LastEditTime: 2020-04-08 15:46:07
 * @LastEditors: your name
 * @Description: In User Settings Edit
 * @FilePath: \jstutor\asyne.js
 */
/* 选自 小美娜娜 文章 */
async function async1() {
  console.log("async1 start");
  await async2();
  console.log("async1 end");
}

async function async2() {
  console.log("async2");
}

console.log("script start");

setTimeout(() => {
  console.log("settimeout");
}, 0);

async1();

new Promise(function (resolve) {
  console.log("promise1");
  resolve();
}).then(function () {
  console.log("promise2");
});
console.log("script end");

Released under the MIT License.

Copyright © 2019-present yzqdev