纵横研究院React技术专题社区

回调函数/异步函数/promise/async,await

2019-10-27  本文已影响0人  李幸娟

相关文章

回调函数

定义

举例

// click事件的回调函数
$('div').click(()=>{
    alert(1)
})

// ajax的回调函数
$.get('/del.html',function(data){
    $('.new').html(data);
})

异步函数

1. 什么是异步函数？

官方

我理解的

2. 异步函数有哪些？

3. js中事件的执行顺序问题

任务分类

精细划分 =>

执行顺序

举例

/*
* 下面的代码b并不会等事件a完全执行完毕在执行
* 在延迟函数被触发的过程中就执行了函数b
* 当js引擎的event 队列空闲时才会去执行队列里等待的setTimeout的回调函数

调用 setTimeout 函数会在一个时间段过去后在队列中添加一个消息。这个时间段作为函数的第二个参数被传入。如果队列中没有其它消息，消息会被马上处理。但是，如果有其它消息，setTimeout 消息必须等待其它消息处理完。因此第二个参数仅仅表示最少的时间 而非确切的时间
*/
function a() {
  setTimeout(() => {
    console.log('执行a函数的延迟函数')
  }, 3000)
  console.log('执行a函数')
}
function b() {
  console.log('执行b函数')
}
a();
b();
// 执行a函数
// VM640:8 执行b函数
// undefined
// VM640:3 执行a函数的延迟函数

4. 回调函数是什么？

定义

举例

// click事件的回调函数
$('div').click(()=>{
    alert(1)
})

// ajax的回调函数
$.get('/del.html',function(data){
    $('.new').html(data);
})

Promise

promise解决的什么问题?

doSomething(){
    ...
    doSomething2(){
        ...
    }
}

!promise特点

1. promise构造函数立即执行，then是异步执行

const d = new Promise((resolve,reject)=>{
    console.log(1)
resolve()
})
d.then(()=>{
    console.log(3)
})
console.log(2)

2. promise.then()返回一个新的promise,因此可以实行then链式调用

const promise1 = new Promise((resolve,reject)=>{
    console.log(1)
reject()
})
const promise2 = promise1.then(()=>{
    console.log(2)
},()=>{
    console.log(3)
})

console.log(promise1)  
// 打印结果
// Promise {<resolved>: undefined}
// __proto__: Promise
// [[PromiseStatus]]: "rejected"
// [[PromiseValue]]: undefined

console.log(promise2)
// 打印结果
// Promise {<resolved>: undefined}
// __proto__: Promise
// [[PromiseStatus]]: "resolved"
// [[PromiseValue]]: undefined

3. promise的状态只有一次改变机会，一旦改变就不会再变

const promise = new Promise((resolve,reject)=>{
    resolve('success1')
    reject('error')
    resolve('success2')
})
promise.then((res)=>{
    console.log('成功',res)
},(err)=>{
    console.log('失败',err)
})
// '成功' success1

4. Promise只能执行一次，但是then/catch都可以多次调用，且每次调用都能立即拿到promise内部返回值

const promise1 = new Promise((resolve,reject)=>{
    resolve('success')
})
const promise2 = new Promise((resolve,reject)=>{
    reject('error')
})
promise1.then((res)=>{
    console.log(res)
} // success
promise1.then((res)=>{
    console.log(res)
} // success
promise1.catch((res)=>{
    console.log(res)
} // error

5. .then .catch种return一个 Error对象,并不会抛出错误，所以并不会被后续的.catch捕获

const promise1 = new Promise((resolve,reject)=>{
    resolve('success')
})
Promise.resolve()
  .then(() => {
    return new Error('error!!!')
  })
  .then((res) => {
    console.log('then: ', res)
  })
  .catch((err) => {
    console.log('catch: ', err)
  })
  
// 打印结果
// then:  Error: error!!!

引出async/await的作用

// 读取文件
const readFile = (originUrl) => {
  return new Promise((resolve, reject) => {
    fs.readFile(originUrl, 'utf-8', (err, data) => {
      if (err) {
        reject(err);
      } else {
        resolve(data)
      }
    });
  })
}

const generateCodeFun = async () => {
    const originCode = await readFile('./test.js');
    console.log(originCode)
}

async特点

// 无return
const a = async ()=>{
    console.log(1)
}
a()
// 返回值：Promise {<resolved>: undefined}
const b = async ()=>{
    console.log(1)
    return 1
}
b()
// 返回值：Promise {<resolved>: 1}

/* 1.使用未声明的变量 */
const a = async ()=>{
    console.log(b);
}
a()
// 返回值： Promise {<rejected>: ReferenceError: b is not defined

/* 2.方法使用错误 */
const b = async ()=>{
    const c = {name:1}
    c.push(1)
}
b()
// 返回值：Promise {<rejected>: TypeError: c.push is not a function

/* 3.手动抛出一个错误 */
const c = async ()=>{
    throw new Error;
}
c()
// 返回值：Promise {<rejected>: Error


/* 4.手动return Promise.reject() */
const e = async ()=>{
    return Promise.reject(1);
}
e()
// 返回值：Promise {<rejected>: 1}

async函数内部一定要return

// 正确的reject方法。必须将reject状态return出去。
async function PromiseError() {    
   return Promise.reject('有错误');
}
PromiseError()
    .then(success => console.log('成功', success))          
    .catch(error => console.log('失败', error));
    // 打印结果：失败 有错误
    
/*
* 错误的reject方法。必须将reject状态return出去
*/
async function PromiseError() {    
   Promise.reject('有错误');
}
PromiseError()
    .then(success => console.log('成功', success))          
    .catch(error => console.log('失败', error));
    // 打印结果：成功 undefined

await 特点

timeout() {
    return new Promise((resolve) => {
      setTimeout(() => {
        console.log(1)
        resolve()
      }, 3000);
    });
}

test = async () => {
    await this.timeout();
    console.log(2)
}
this.test()
  // 3秒后打印
  // 1
  // 2

async函数内部的map内使用await报错await is a reserved word解决方法

const generateCodeFun = async (flagArr) => {
+  flagArr.map(async (item) => {
    ...
    return item
  })
}

async/await滥用问题

async/await 应用

并行处理多个异步结果：

async function asyncFunc() {
  const [result1, result2] = await Promise.all([
    otherAsyncFunc1(),
    otherAsyncFunc2()
  ]);
  console.log(result1, result2);
}
上一篇 下一篇

猜你喜欢

热点阅读