비동기 로딩(이미지, CSS, js 등)을 해결하기 위해 Javascript에서 Promise를 사용합니다.

정적 리소스를 로드한 후 일부 작업을 완료해야 하는 경우가 있습니다. 콜백 함수를 사용하는 것이 일반적인 방법이지만 이 접근 방식은 다중 콜백 함수를 생성하여 코드 구조를 더 복잡하게 만들 수 있습니다. 따라서 Promise를 사용하여 이 문제를 해결할 수 있습니다.

예시(이미지 로딩)

function loadImg(imgSrc) {
  return new Promise(function(resolve, reject){
    img.load = () => {
      // asynchronous code here
      resolve()
    }

    img.onError = () => {
      reject()
    }
  })
}


loadImg('src.jpg').then(()=>{
  // operations after loading image here
}).catch(()=>{
 // error handling
})

여러 이미지를 로드하는 예

function loadImg(imgSrc) {
  return new Promise(function(resolve, reject){
    img.load = () => {
      // asynchronous code here
      resolve()
    }

    img.onError = () => {
      reject()
    }
  })
}

const imgList = ['1.jpg', '2.jpg', '3.jpg', '4.jpg']
let imgLoadingPromise = []
for(let img of imgList) imgLoadingPromise.push(loadImg(img))

Promise.all(imgLoadingPromise).then(()=>{
  // operations after loading image here
}).catch(()=>{
 // error handling
})

Promise.all()은 모든 Promise가 fullfilled 상태가 될 때만 fullfilled 상태가 되는 promise 배열을 받습니다

위 내용은 비동기 로딩(이미지, CSS, js 등)을 해결하기 위해 Javascript에서 Promise를 사용합니다.의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!