> 웹 프론트엔드 > JS 튜토리얼 > 약속이란 무엇입니까? 그것을 사용하는 방법?

약속이란 무엇입니까? 그것을 사용하는 방법?

不言
풀어 주다: 2019-03-23 16:02:51
앞으로
3996명이 탐색했습니다.

이 기사는 Laravel 다형성 연관(코드 포함)에 대한 소개를 제공합니다. 이는 특정 참조 가치가 있으므로 도움이 필요한 경우 참고할 수 있기를 바랍니다.

Promise란 무엇입니까

공식 웹사이트 설명 Promise는 비동기 작업의 최종 결과를 나타냅니다.

번역 == Promise는 상태 기계로 이해될 수 있습니다 ==, 세 가지 다른 상태가 있으며 특정 시간에 하나의 상태만 가질 수 있습니다.

pending은 여전히 ​​실행 중, 해결됨, 성공적인 실행 거부, 실행 실패를 의미합니다

하나의 약속은 비동기 작업을 캡슐화한 것입니다. 비동기 작업에는 약속의 세 가지 상태에 해당하는 완료 대기, 성공 및 실패라는 세 가지 가능한 결과가 있습니다.

Promise 상태는 보류 중인 변환 비트만 해결되거나 보류 상태 변환이 거부됨으로 변환될 수 있습니다.

Promise를 사용하여 비동기 작업을 봉인한다고 가정하면 작업이 생성될 때 보류 상태가 됩니다. 비동기 작업이 성공적으로 완료되면
실행 중에 오류가 발생하면 상태를 해결됨으로 변환합니다. 상태를 거부됨으로 변환하겠습니다.

var promise=new Promise(function(resolve,reject){
  // code
  if(){
    /*异步操作成功 */
    resolve(value)
  }else{
    reject(error)
  }
})
로그인 후 복사

then 메소드를 사용하여 결과를 얻으세요

var fs=require('fs')
function readFile_promise(path){
  return new Promise(function(resolve,reject){
    fs.readFile(path, 'utf-8',function(err,data){
      if(data){
        resolve(data)
      }else{
        reject(err)
      }
    })
  })
}

var result=readFile_promise('./1.txt')
result.then(function(value){
  //success
  console.log('success', value)
},function(error){
  //failure
  console.log('failure',error)
})
// 将一个异步函数封装成promise,只要在回调函数中针对不同的返回结果调用resolve或者reject方法。

// resolve函数会在异步操作成功完成时被调用,并将异步操作的返回值作为参数传递到外部。
// reject是在异步操作出现异常时被调用,会将错误信息作为参数传递出去。
로그인 후 복사

then 메소드의 반환 값

Then 메소드는 항상 새로운 Promise 객체를 반환합니다. then 메소드를 여러 번 호출하면 기본적으로 빈 Promise 객체가 반환됩니다.
return을 사용하여 반환하세요. .

var promise=readFile_promise('./foo.txt')
promise.then(function(value){
  //success
  console.log('success', value) // foo
  return readFile_promise('./bar.txt')
},function(error){
  //failure
  console.log('failure',error)
}).then(function(value){
  console.log('then', value) // bar
})
로그인 후 복사
Promise 실행
  • then 메소드를 통해 Promise의 결과를 얻더라도, Promise는 then 메소드가 호출된 후에만 실행되나요?
var promise=new Promise((resolve, reject)=>{
  console.log('begin')
  resolve()
})

setTimeout(()=>{
  promise.then(()=>{
    console.log('end')
  })
},5000)
// 开始begin 5s后end
// 运行顺序是,当promise从被创建的那一刻起就开始执行了,then方法只是提供了访问promise状态的接口,与promise的执行无关。
로그인 후 복사
promise Common API
  • resolved
  • rejected
  • all
  • race 메소드는 Promise 배열을 매개변수로 받아 새로운 Promise를 반환하며 동시에 배열의 Promise가 실행되기 시작합니다. race에 의해 반환된 Promise의 배열에서 가장 먼저 실행된 Promise의 상태가 결정됩니다
  • catch 실행 오류가 발생하면 throw 키워드를 사용하여 오류를 던지고 catch 메소드를 사용하여 캡처할 수 있습니다
 // 如果有多个promise需要执行,可以使用promise.all()
// 方法统一声明,改方法可以将多个promise对象包装成一个promise
// 该方法接收一个数组作为参数,数据的元素如果不是promise对象,则回先调用resolve方法转换。
//  如果中间有一个promise状态是reject,那么转换后的promise也会变成reject,并且将错误信息传给catch方法
var promises=['foo.txt','bar.txt','baz.txt']
promises.map(function(path){
  // console.log(path)
  return readFile_promise(path)
})

Promise.all(promises).then(function(results){
  console.log(results) // [ 'foo.txt', 'bar.txt', 'baz.txt' ] 顺序排列的
}).catch(function(err){
  // 
})
로그인 후 복사
Promise를 사용하여 비동기 코드 구성
// 例子; 有三个文本文件需要顺序读取
var lists=['foo.txt','bar.txt','baz.txt']
var count=0;
readFile_promise('foo.txt').then(readCB).then(readCB).then(readCB);

function readCB(data){
  console.log(data) // foo bar baz
  if(++count>2){
    return
  }
  return readFile_promise(lists[count])
}
로그인 후 복사

async/await

await 키 단어 뒤에는 Promise가 오는 경우가 많습니다. 그렇지 않은 경우 Promise.resolve가 암시적으로 호출되어 Promise로 변환됩니다.
await는 다음 단계로 진행하기 전에 후속 Promise가 실행될 때까지 기다립니다.

var asyncReadFile=async function(){
  var result1=await readFile_promise('./foo.txt')
  console.log(result1.toString()) // foo
}
asyncReadFile()
로그인 후 복사
async 반환 값

비동기 함수는 항상 Promise 객체를 반환합니다. return 키워드 뒤에 Promise가 없으면 기본적으로 Promise가 호출됩니다. 변환 방법을 해결합니다.

async function asyncFunc(){
  return 'hello Node'
}
asyncFunc().then(function(data){
  console.log(data) // hello Node
})
로그인 후 복사
비동기 함수의 실행 과정
    비동기 함수가 실행되기 시작하면 Promise 객체가 자동으로 생성됩니다.
  1. 메서드 본체 실행 시작 시 return 키워드나 throw 키워드를 만나면 실행이 즉시 종료됩니다.
await 키워드를 만나면 실행이 일시 중지되고 Wait 이후 비동기 작업 후 실행이 재개됩니다. iscomplete

    실행 후 Promise가 반환됩니다
  1. async function asyncFunc(){
      console.log('begin')
      return 'hello Node'
    }
    asyncFunc().then(function(data){
      console.log(data) // hello Node
      console.log('end')
    })
    // begin 
    // hello 
    // end
    로그인 후 복사
await
await Wait 연산자의 결과는 그 뒤에 있는 Promise 개체의 작업 결과에 따라 결정됩니다. 나중에 Promise 개체가 해결되면 값이 반환됩니다. Wait 연산자는 값을 해결합니다. Promise 객체의 상태가 거부되면 Wait도 거부 값을 던집니다.

async function readFile(){
  var result=await readFile_promise('./foo.txt')
  console.log(result) // foo
}
readFile()

// 等价于
readFile_promise('foo.txt').then(function(data){
  console.log(data) // foo
})
로그인 후 복사

await in 병렬
await는 다음 작업을 수행하기 전에 후속 약속이 완료될 때까지 기다립니다. 즉, 여러 개의 대기 작업이 발생하면 프로그램은 완전한
직렬 작업이 됩니다.


비동기 작업 간에 종속성이 없는 경우 promise.all을 사용하여 병렬성을 달성할 수 있습니다.

async function readFile(){
  const [result1, result2]=await Promise.all([
    readFile_promise('./foo.txt'),
    readFile_promise('./bar.txt')
  ])
  console.log(result1, result2) // foo bar
}
readFile()

// 等价于
function readFile(){
  return Promise.all([
    readFile_promise('./foo.txt'),
    readFile_promise('./baz.txt')
  ]).then((result)=>{
    console.log(result) // [ 'foo', 'baz' ]
  })
}
readFile()
로그인 후 복사

await 요약

await 키워드 사용 시 몇 가지 핵심 사항

await 키워드는 비동기 함수 내부에 있어야 합니다.
  • await 키워드 뒤에는 promise 개체가 와야 합니다(그렇지 않은 경우 변환 확인이 호출됩니다)
  • wait 키워드의 반환 결과는 그 뒤에 실행된 promise의 결과이며, 이는 해결되거나 거부된 값일 수 있습니다. 일반 화살표 함수에서는 async 키워드를 화살표 함수 앞에 추가해야 합니다. .
  • await는 비동기 작업을 직렬로 실행하는 데 사용됩니다. promise.all을 병렬로 사용하려는 경우
  • 비동기 함수의 단점
  • 메서드 호출 계층이 많고 가장 낮은 비동기 작업이 비동기 메서드로 캡슐화되어 있다고 가정해 보겠습니다. 그러면 함수의 모든 상위 수준 메서드가 비동기 메서드가 되어야 할 수도 있습니다.
  • 이 기사는 여기서 끝났습니다. 더 흥미로운 내용을 보려면 PHP 중국어 웹사이트의
JavaScript 비디오 튜토리얼

칼럼을 주목하세요!

위 내용은 약속이란 무엇입니까? 그것을 사용하는 방법?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

관련 라벨:
원천:segmentfault.com
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿