약속은 es6을 기반으로합니까?-프런트엔드 Q&A-php.cn

약속은 es6을 기반으로합니까?

青灯夜游

풀어 주다： 2022-11-03 19:20:55

원래의

1866명이 탐색했습니다.

그렇습니다. Promise는 비동기 작업의 최종 완료 또는 실패를 나타내는 ECMAScript 6의 새로운 참조 유형입니다. Promise는 비동기 프로그래밍 호출 코드에서 지나치게 복잡한 논리 작성 문제를 해결합니다. 네트워크 요청이 매우 복잡할 때 콜백 지옥이 발생합니다. 이런 식으로 이러한 코드를 함께 작성하면 매우 복잡해 보이고 읽기에 도움이 되지 않습니다. Promises를 사용하면 코드가 더욱 아름답고 우아해 보입니다.

약속은 es6을 기반으로합니까?

이 튜토리얼의 운영 환경: Windows 7 시스템, ECMAScript 버전 6, Dell G3 컴퓨터.

ECMAScript 6에는 Promises/A+ 사양, 즉 Promise 유형에 대한 완전한 지원이 추가되었습니다. Promise는 출시된 후 엄청난 인기를 얻었으며 지배적인 비동기 프로그래밍 메커니즘이 되었습니다. 모든 최신 브라우저는 ES6 기대치를 지원하며 다른 많은 브라우저 API는 기대치를 기반으로 합니다.

Promise는 비동기 작업의 최종 완료 또는 실패를 나타내는 ECMAScript 6의 새로운 참조 유형입니다.

1. Promise 함수란? 비동기 프로그래밍 호출 코드 로직이 너무 복잡하게 작성되는 문제를 해결하기 위한 것입니다. 따라서 이러한 코드를 함께 작성하면 콜백 지옥이 발생합니다. Promise를 사용하면 코드가 더 아름답고 우아해 보일 것입니다.

2. Promise의 세 가지 상태

우선, 개발에 비동기 작업이 있을 때, 비동기 작업에 대한 약속을 래핑할 수 있습니다 비동기 작업 이후에는 세 가지 상태가 있습니다

pending：等待状态，比如正在进行网络请求，或者定时器没有到时间。
fulfill：满足状态，当我们主动回调了resolve时，就处于该状态，并且会回调.then()
reject：拒绝状态，当我们主动回调了reject时，就处于该状态，并且会回调.catch()

로그인 후 복사

3. 구현

1, 그리고 catch

1 상태의 함수는 동기식입니다. 즉시 실행

2. Promise 객체에 비동기 작업이 없고 then 메서드나 catch가 즉시 실행되더라도 여기 두 메서드는 이벤트 큐에 추가되어 실행을 기다릴 수 있습니다

//参数 函数（resolve,reject）
    new Promise((resolve, reject) => {
        setTimeout(() => {
            //请求成功的时候调用resolve
            resolve(&#39;22222&#39;)
            //请求失败的时候调用reject
            reject(&#39;error message&#39;)
        }, 1000)
    }).then((data) => { //请求成功处理函数
        console.log(data)
    }).catch((err) => { //请求失败处理函数
        console.log(err)
    })

로그인 후 복사

2. 상태 확인

1. 보류 상태 처리 기능에서 포착되지 않은 오류가 발생하면 상태는 보류 상태가 되며 바로 거부 상태가 되며 catach

var pro = new Promise((resolve, reject) => {
            throw new Error("123");

            // try{
            //     throw new Error("123"); 
            // } catch(e) {}

            resolve(12);
            reject(34);
        })

        // pro.then(data => {
        //     console.log(data);
        // }, err => {
        //     console.log(err);
        // })


        console.log(pro);
        

        pro.then(data => {
            console.log(data);
            
        })

        pro.catch(data => {
            console.log(data);
            
        })

로그인 후 복사

3. 그리고 wait

1. Promise 사용:

const makeRequest = () =>
        getJSON().then(data => {
            console.log(data)
            return "done"
        })

    makeRequest()

로그인 후 복사

2. 비동기 사용:

async 및 wait는 ES7에서 제안됩니다.

비동기의 역할: 함수 반환 값에서 Promise 개체 생성을 단순화합니다. 
일반적으로 async는 함수 끝에 작성합니다. 이전에는 수정된 함수의 반환 값이 Promise 객체여야 했습니다. 일부 특별한 경우에만 Promise 객체가 수동으로 반환됩니다.
기능: Promise와 같은 비동기 문제를 해결하지만 비동기 코드를 동기 코드와 동일하게 만든다는 장점이 있습니다!!

참고: 동기 메서드에서는 반환 값을 통해 결과를 얻고, 비동기 메서드에서는 결과를 얻습니다. 콜백 함수를 통해. async 및 wait 사용을 위한 기본 구문
:

일반 함수 앞에 async를 추가하는 것입니다. 호출은 일반 함수와 동일합니다.

Async는 일반적으로 wait와 함께 사용됩니다
await 뒤에는 비동기 함수

const makeRequest = async () => {
 // await getJSON()表示console.log会等到getJSON的promise成功reosolve之后再执行。
        console.log(await getJSON)
        return "done"
    }

    makeRequest()

로그인 후 복사

3에서 Promise 개체를 사용해야 합니다. 차이점

1. 함수 앞에 추가 aync 키워드가 있습니다. Await 키워드는 aync로 정의된 함수 내에서만 사용할 수 있습니다. 비동기 함수는 암시적으로 약속을 반환하며 약속의 확인 값은 함수 반환 값입니다. (예제에서 reosolve 값은 "done" 문자열입니다.) 2. 가장 바깥쪽 코드는 비동기 함수 내에 있지 않기 때문에 Wait를 사용할 수 없습니다.

4.promise method

var r1 = new Promise((resolve,reject) => {
            setTimeout(function(){
                resolve("我是第一个请求");
            },1000)
        })
        var r2 = new Promise((resolve,reject) => {
            setTimeout(function(){
                resolve("我是第二个请求");
            },3000)
        })
        var r3 = new Promise((resolve,reject) => {
            setTimeout(function(){
                resolve("我是第三个请求");
            },4000)
        })
        var r4 = new Promise((resolve,reject) => {
            setTimeout(function(){
                resolve("我是第四个请求");
            },500)
        })

로그인 후 복사

1.all method다음 단계로 진행하기 전에 두 개 이상의 요청이 성공적으로 반환될 때까지 기다려야 하는 경우가 있습니다. 콜백

Promise.all([r1,r2,r3,r4]).then(data => {
            console.log(data);
            
        })

로그인 후 복사

2.race method

의 다음 단계에서는 요청이 동시에 전송되며, 먼저 돌아온 사람이 누구의 데이터를 사용하게 됩니다.

Promise.race([r1,r2,r3,r4]).then(data => {
           console.log(data);
           
       })

로그인 후 복사

Five.promise 캡슐화 Ajax 케이스

<script>
       function toData(obj) {
               
               // 声明一个数组 来装每一组的数据
               var arr = [];
               if(obj !== null) {
                   for(var key in obj) {
                       let str = key + "=" + obj[key];
                       arr.push(str);
                   }
                   return arr.join("&");
               }
       }

       function ajax(obj) {
           return new Promise(function(resolve, reject) {
               // 给ajax所需要的参数设置默认值
               obj.type = obj.type || "get";
               obj.async = obj.async|| "true";
               obj.dataType = obj.dataType || "json";
               obj.data = obj.data || null;

               // 开始发送ajax请求
               var xhr;

               if(window.XMLHttpRequest) {
                   xhr = new XMLHttpRequest();
               } else {
                   // IE低版本的浏览器
                   xhr = new ActiveXObject("Microsoft.XMLHttp");
               }

               // 判断是post请求 还是get请求
               if(obj.type === "post") {
                   xhr.open(obj.type, obj.url, obj.async);
                   // 设置请求头
                   xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");

                   xhr.send(toData(obj.data));

               } else {
                   var url = obj.url + "?" + toData(obj.data);
                   xhr.open(obj.type, url, obj.async);
                   xhr.send();
               }

               // 处理响应体
               xhr.onreadystatechange = function() {

                   if(xhr.readyState == 4) {
                       if(xhr.status >= 200 && xhr.status < 300 || xhr.status == 304) {
                           resolve(JSON.parse(xhr.responseText));

                       } else {
                           reject(xhr.status);
                       }
                   }
               }
           })
       }

       ajax({
           url : "./data.php",
           data : {
               name : "jack",
               age : 16
           }
       }).then(res => {
           console.log(res);
           
       }, err => {
           console.log(err);
           
       })
   
   </script>

로그인 후 복사