Promise 와 async await 면접 지식

Promise 의 정상 적 인 용법

function xx(){
    return new Promise((resolve,reject)=>{
        setTimeout(()=>{
            resovle('     ')
            reject('    ')
        },3000)
    })
}

xx().then(fn1,s1).then(fn2,s2)//fn      ，s      

Promise API

Promise. resolve () 제조 성공 또는 실패

Promise. reject () 제조 실패

Promise. all (배열) 이 모든 성공 을 기다 리 거나 실패

Promise. race (배열) 첫 번 째 상태 가 바 뀌 기 를 기다린다

Promise. allSettled (배열) 는 모든 상태 가 바 뀌 기 를 기다 리 고 있 습 니 다. API 가 새 롭 고 브 라 우 저 지원 이 적 습 니 다

Promise 의 문법 사탕
Promise. then (fn1). catch (s1) 는 Promise. then (fn1, s1) 과 같다. 
Promise 면접 문제
페이지 에는 두 개의 단추 가 있 습 니 다. 8195 ° A 와 B, 그리고 하나의 입력 상자 가 있 습 니 다. A 단 추 를 누 르 면 하나의 요청 을 보 내 고 하나의 문자열 A 를 되 돌려 주 며 B 도 요청 을 보 냅 니 다. 그러나 문자열 B 를 되 돌려 주 고 돌아 오 면 입력 상자 에 문자열 을 할당 합 니 다. 그러나 A, B 가 보 낸 두 개의 요청 이 돌아 오 는 시간 이 다 르 고 두 단 추 를 누 르 는 순서 도 꼭 필요 하지 않 습 니 다. B 는 A 보다 먼저 돌아 가 야 합 니 다.최종 효 과 는 입력 상자 문자 의 순서 가 AB 입 니 다.
primise. all () 은 이 수 요 를 만족 시 키 기 어렵다.이것 은 하나의 배열 로 그들 을 기록 해 야 한다. B 가 돌아 오 라 고 요청 할 때 배열 에 가서 비교 한 다음 에 순서 가 1 이 아니 라 기 다 렸 다가 A 가 돌아 오 면 A 를 출력 한 다음 에 B 를 출력 하면 된다.
실 현 된 코드 를 직접 보 세 요.

A
  B
  

let ajax1 = ()=>{
  return new Promise((resolve, reject)=>{
    setTimeout(()=>{
      resolve(1111)
    },5000)
  })
}
let ajax2 = ()=>{
  return new Promise((resolve, reject)=>{
    setTimeout(()=>{
      resolve(2222)
    },3000)
  })
}

let batai = []
let duiwu = []

let hi = () =>{
  let lastN = batai[batai.length - 1][0]
  let lastS = batai[batai.length - 1][1]
  console.log(duiwu,'  ')
  console.log(batai,'  ')
  if(duiwu[0][0] === lastN) {
    duiwu[0][1](lastS)
    duiwu.shift()
    batai.pop()
    hi()
  }
}

b1.onclick = ()=>{
  const n = 1
  ajax1().then(res=>{
    batai.push([n, res])
    hi()
  })
  duiwu.push([n, s=>{
    input1.value = s
  }])
}

b2.onclick = ()=>{
  const n = 2
  ajax2().then(res=>{
    batai.push([n, res])
    hi()
  })
  duiwu.push([n, s=>{
    input1.value = s
  }])
}

 
async await 의 기본 용법

const fn = async ()=>{
    const fn1 = await newPromise()
    return fn1 + 1
}

Promise 에 비해 동기 코드 를 쓰 는 것 처럼 잠 겨 있 지 않 습 니 다.
왜 async await 함수 앞 에 async 가 있어 야 합 니까? 
오래된 코드 를 호 환 하기 위해 이전에 누군가가 async / await 기능 과 같은 await 함 수 를 실현 했다. 예 를 들 어 다음 과 같다.

await(newPromise())

그래서 구분 하기 위해 함수 앞 에 async 를 추가 하여 다른 의미 가 없습니다. 
async await 오류 처리 최적화
일반적인 오류 처리 방법 try / catch

let response
try{
    response = await axios.get('/xx')
}.catch(err){
    if(err.response){
        console.log(err.response.states)
    }
    throw err
}
console.log(response)

이렇게 처리 하면 기분 이 그다지 좋 지 않 습 니 다. 우 리 는 최적화 시 켜 Promise 와 결합 하여 다음 과 같은 코드 를 쓸 수 있 습 니 다.

const response = await axios.get('/xx').then(null, err)
console.log(response)

response 처리 성공 결과, then (null, err) 의 err 처리 실패 결과.
async / await 는 사실상 Promise 의 문법 사탕 이다.
async await 면접 문제

let a = 0;
let test = async () => {
  a = a + await 10;
  console.log(a)
}
test()
console.log(++a)

로그 에서 각각 무엇 을 출력 합 니까?
답: 1, 10 여기 서 고찰 한 지식 포인트: a + await 10 앞의 a  await 와 함께 비동기 로 확인 하 시 겠 습 니까? 아니면 a 가 먼저 값 을 확인 하 시 겠 습 니까? 
사실 await 앞의 값 은 모두 동기 화 되 어 실 행 됩 니 다. await 뒤의 값 은 비동기 로 실 행 됩 니 다. 이 점 을 기억 하면 이해 하기 쉽 습 니 다.
제목 에 log + + a 가 먼저 있 지만 a 값 은 1 이 어야 합 니 다.하지만 test () 함수 에서 a + await 10  중의 a 는 test () 가 실 행 될 때 이미 값 을 확정 하 였 으 며, 값 은 0 이다.
0 + 비동기 의 await 10 은 10 입 니 다.