Mevcut bir geri arama API'sını vaatlere nasıl dönüştürebilirim?

Ben vaatlerle çalışmak istiyorum ama ben gibi bir biçimde geri çağrı API var:

1. DOM yükü veya başka bir defalık etkinlik:

window.onload; // set to callback
...
window.onload = function() {

};

2. Düz geri arama:

function request(onChangeHandler) {
    ...
}
request(function() {
    // change happened
    ...
});

3. Düğüm stili geri arama ("düğüm"):

function getStuff(dat, callback) {
    ...
}
getStuff("dataParam", function(err, data) {
    ...
})

4. Düğüm stili geri çağrıları olan bütün bir kütüphane:

API;
API.one(function(err, data) {
    API.two(function(err, data2) {
        API.three(function(err, data3) {
            ...
        });
    });
});

API ile vaatlerde nasıl çalışırım, nasıl "söz veriyorum"?

Vaatlerin durumu vardır, beklemede olarak başlarlar ve şunlara yerleşebilirler:

• yerine hesaplama başarıyla tamamlandı anlamına gelir.
• hesaplama başarısız olduğu için reddetti .

Söz döndüren işlevler asla atmamalı , bunun yerine reddetmeleri döndürmelidir. Bir söz dönen işlevinden Fırlatma a ikisini de kullanmak için zorlar } catch { ve bir .catch. Vaat edilmiş API'leri kullanan kişiler vaatlerin verilmesini beklemezler. Zaman uyumsuz API'ların JS'de nasıl çalıştığından emin değilseniz - lütfen önce bu cevaba bakın .

1. DOM yükü veya başka bir defalık etkinlik:

Bu nedenle, vaatler oluşturmak genellikle ne zaman yerleşeceklerini belirtmek anlamına gelir - bu da verilerin kullanılabilir olduğunu (ve bunlara erişilebildiğini .then) belirtmek için yerine getirilen veya reddedilen aşamaya geçtikleri anlamına gelir .

PromiseDoğal ES6 vaatleri gibi kurucuyu destekleyen modern vaat uygulamaları ile :

function load() {
    return new Promise(function(resolve, reject) {
        window.onload = resolve;
    });
}

Daha sonra ortaya çıkan sözü aşağıdaki gibi kullanırsınız:

load().then(function() {
    // Do things after onload
});

Ertelemeyi destekleyen kitaplıklarla (Burada bu örnek için $ q kullanalım, ancak daha sonra jQuery kullanacağız):

function load() {
    var d = $q.defer();
    window.onload = function() { d.resolve(); };
    return d.promise;
}

Veya API gibi bir jQuery ile bir kez gerçekleşen bir etkinliğe bağlanma:

function done() {
    var d = $.Deferred();
    $("#myObject").once("click",function() {
        d.resolve();
    });
    return d.promise();
}

2. Düz geri arama:

Bu API'lar oldukça yaygındır çünkü JS'de geri aramalar yaygındır. Ortak sahip olma durumuna bakalım onSuccessve onFail:

function getUserData(userId, onLoad, onFail) { …

PromiseDoğal ES6 vaatleri gibi kurucuyu destekleyen modern vaat uygulamaları ile :

function getUserDataAsync(userId) {
    return new Promise(function(resolve, reject) {
        getUserData(userId, resolve, reject);
    });
}

Ertelemeyi destekleyen kütüphanelerle (burada bu örnek için jQuery kullanalım, ancak yukarıda $ q da kullandık):

function getUserDataAsync(userId) {
    var d = $.Deferred();
    getUserData(userId, function(res){ d.resolve(res); }, function(err){ d.reject(err); });
    return d.promise();
}

jQuery , aşağıdaki gibi $.Deferred(fn), new Promise(fn)formu çok yakından taklit eden bir ifade yazmamıza olanak sağlayan bir form da sunar :

function getUserDataAsync(userId) {
    return $.Deferred(function(dfrd) {
        getUserData(userId, dfrd.resolve, dfrd.reject);
    }).promise();
}

Not: Burada, bir jQuery ertelenmiş yöntem resolveve rejectyöntemlerin "ayrılabilir" olduğu gerçeğini kullanırız ; yani. jQuery.Deferred () örneğine bağlıdırlar . Tüm kütüphaneler bu özelliği sunmaz.

3. Düğüm stili geri arama ("düğüm"):

Düğüm stili geri çağrıları (düğüm geri çağrıları), geri çağrıların her zaman son argüman olduğu ve ilk parametresinin bir hata olduğu belirli bir biçime sahiptir. İlk önce manuel olarak söz verelim:

getStuff("dataParam", function(err, data) { …

Kime:

function getStuffAsync(param) {
    return new Promise(function(resolve, reject) {
        getStuff(param, function(err, data) {
            if (err !== null) reject(err);
            else resolve(data);
        });
    });
}

Ertelemelerle aşağıdakileri yapabilirsiniz (Q şimdi tercih etmeniz gereken yeni sözdizimini desteklese de, bu örnek için Q kullanalım ):

function getStuffAsync(param) {
    var d = Q.defer();
    getStuff(param, function(err, data) {
        if (err !== null) d.reject(err);
        else d.resolve(data);
    });
    return d.promise;   
}

Genel olarak, şeyleri çok fazla elle vaat etmemelisiniz, Düğüm göz önünde bulundurularak tasarlanan çoğu söz kitaplığı ve Düğüm 8+'daki yerel sözlerin düğüm geri dönüşlerini vaat etmek için yerleşik bir yöntemi vardır. Örneğin

var getStuffAsync = Promise.promisify(getStuff); // Bluebird
var getStuffAsync = Q.denodeify(getStuff); // Q
var getStuffAsync = util.promisify(getStuff); // Native promises, node only

4. Düğüm stili geri çağrıları olan bütün bir kütüphane:

Burada altın bir kural yok, onları tek tek söz ediyorsunuz. Bununla birlikte, bazı vaat uygulamaları bunu örneğin Bluebird'de toplu olarak yapmanıza izin verir, bir geri dönüş API'sini bir söz API'sına dönüştürmek şu kadar basittir:

Promise.promisifyAll(API);

Veya ile yerli vaatler içinde Düğüm :

const { promisify } = require('util');
const promiseAPI = Object.entries(API).map(([key, v]) => ({key, fn: promisify(v)}))
                         .reduce((o, p) => Object.assign(o, {[p.key]: p.fn}), {});

Notlar:

• Tabii ki, bir .thenişleyicide olduğunuzda şeyleri vaat etmeniz gerekmez. Bir .thenişleyiciden bir sözün geri verilmesi söz konusu değerin değerine çözümlenecek veya reddedilecektir. Bir .thenişleyiciden atmak da iyi bir uygulamadır ve sözünü reddedecektir - bu ünlü söz atma güvenliği.
• Gerçek bir onloaddurumda, kullanmak addEventListeneryerine kullanmalısınız onX.

Bugün, kullanabilir Promiseiçinde Node.jsdüz JavaScript yöntemi olarak.

Basit ve temel bir örnek Promise( KISS yolu ile):

Düz Javascript Async API kodu:

function divisionAPI (number, divider, successCallback, errorCallback) {

    if (divider == 0) {
        return errorCallback( new Error("Division by zero") )
    }

    successCallback( number / divider )

}

Promise Javascript Async API kodu:

function divisionAPI (number, divider) {

    return new Promise(function (fulfilled, rejected) {

        if (divider == 0) {
            return rejected( new Error("Division by zero") )
        }

        fulfilled( number / divider )

     })

}

( Bu güzel kaynağı ziyaret etmenizi öneririm )

Ayrıca Promisetoplu olarak birlikte kullanılabilir async\awaitiçinde ES7bir program akış beklemesi için fullfiledaşağıdaki gibi sonuç:

function getName () {

    return new Promise(function (fulfilled, rejected) {

        var name = "John Doe";

        // wait 3000 milliseconds before calling fulfilled() method
        setTimeout ( 
            function() {
                fulfilled( name )
            }, 
            3000
        )

    })

}


async function foo () {

    var name = await getName(); // awaits for a fulfilled result!

    console.log(name); // the console writes "John Doe" after 3000 milliseconds

}


foo() // calling the foo() method to run the code

.then()Yöntemi kullanarak aynı kodla başka bir kullanım

function getName () {

    return new Promise(function (fulfilled, rejected) {

        var name = "John Doe";

        // wait 3000 milliseconds before calling fulfilled() method
        setTimeout ( 
            function() {
                fulfilled( name )
            }, 
            3000
        )

    })

}


// the console writes "John Doe" after 3000 milliseconds
getName().then(function(name){ console.log(name) })

PromiseNode.js tabanlı herhangi bir platformda da kullanılabilir react-native.

Bonus : Karma bir yöntem
(Geri arama yönteminin hata ve sonuç olarak iki parametresi olduğu varsayılır)

function divisionAPI (number, divider, callback) {

    return new Promise(function (fulfilled, rejected) {

        if (divider == 0) {
            let error = new Error("Division by zero")
            callback && callback( error )
            return rejected( error )
        }

        let result = number / divider
        callback && callback( null, result )
        fulfilled( result )

     })

}

Yukarıdaki yöntem eski moda geri arama ve Promise kullanımları için sonucu yanıtlayabilir.

Bu yardımcı olur umarım.

Bir işlevi söz olarak dönüştürmeden önce Node.JS

var request = require('request'); //http wrapped module

function requestWrapper(url, callback) {
    request.get(url, function (err, response) {
      if (err) {
        callback(err);
      }else{
        callback(null, response);             
      }      
    })
}


requestWrapper(url, function (err, response) {
    console.log(err, response)
})

Dönüştürdükten Sonra

var request = require('request');

function requestWrapper(url) {
  return new Promise(function (resolve, reject) { //returning promise
    request.get(url, function (err, response) {
      if (err) {
        reject(err); //promise reject
      }else{
        resolve(response); //promise resolve
      }
    })
  })
}


requestWrapper('http://localhost:8080/promise_request/1').then(function(response){
    console.log(response) //resolve callback(success)
}).catch(function(error){
    console.log(error) //reject callback(failure)
})

Birden fazla isteği yerine getirmeniz gerekiyorsa

var allRequests = [];
allRequests.push(requestWrapper('http://localhost:8080/promise_request/1')) 
allRequests.push(requestWrapper('http://localhost:8080/promise_request/2'))
allRequests.push(requestWrapper('http://localhost:8080/promise_request/5'))    

Promise.all(allRequests).then(function (results) {
  console.log(results);//result will be array which contains each promise response
}).catch(function (err) {
  console.log(err)
});

window.onloadYüklemeden sonra çağrılıp çağrılmadığını tespit etmediğinden, @Benjamin tarafından sunulan önerinin her zaman çalışacağını düşünmüyorum . Birçok kez ısırıldım. İşte her zaman çalışması gereken bir sürüm:

function promiseDOMready() {
    return new Promise(function(resolve) {
        if (document.readyState === "complete") return resolve();
        document.addEventListener("DOMContentLoaded", resolve);
    });
}
promiseDOMready().then(initOnLoad);

Node.js 8.0.0, util.promisify()standart Node.js geri arama stili API'lerinin bir Promise döndüren bir işleve sarılmasına izin veren yeni bir API içerir . util.promisify()Aşağıda örnek bir kullanım gösterilmiştir.

const fs = require('fs');
const util = require('util');

const readFile = util.promisify(fs.readFile);

readFile('/some/file')
  .then((data) => { /** ... **/ })
  .catch((err) => { /** ... **/ });

Bkz . Vaatler için geliştirilmiş destek

Node.js 8.0.0 için sürüm adayında, herhangi bir işlevi vaat etme kapasitesini kapsayan yeni bir yardımcı program var util.promisify( util.promisify hakkında yazdım ).

Diğer cevaplarda önerilen yaklaşımlardan çok farklı değildir, ancak çekirdek bir yöntem olma avantajına sahiptir ve ek bağımlılıklar gerektirmez.

const fs = require('fs');
const util = require('util');

const readFile = util.promisify(fs.readFile);

Sonra readFileyerel bir döndüren bir yöntem var Promise.

readFile('./notes.txt')
  .then(txt => console.log(txt))
  .catch(...);

Node JS ile JavaScript yerel vaatlerini kullanabilirsiniz.

Cloud 9 kod bağlantım: https://ide.c9.io/adx2803/native-promises-in-node

/**
* Created by dixit-lab on 20/6/16.
*/

var express = require('express');
var request = require('request');   //Simplified HTTP request client.


var app = express();

function promisify(url) {
    return new Promise(function (resolve, reject) {
        request.get(url, function (error, response, body) {
            if (!error && response.statusCode == 200) {
                resolve(body);
            }
            else {
                reject(error);
            }
        })
    });
}

//get all the albums of a user who have posted post 100
app.get('/listAlbums', function (req, res) {
    //get the post with post id 100
    promisify('http://jsonplaceholder.typicode.com/posts/100').then(function (result) {
        var obj = JSON.parse(result);
        return promisify('http://jsonplaceholder.typicode.com/users/' + obj.userId + '/albums')
    })
    .catch(function (e) {
        console.log(e);
    })
    .then(function (result) {
        res.end(result);
    })
})

var server = app.listen(8081, function () {
    var host = server.address().address
    var port = server.address().port

    console.log("Example app listening at http://%s:%s", host, port)
})

//run webservice on browser : http://localhost:8081/listAlbums

Sade eski vanilya javaScript ile, api geri aramasını vaat etmek için bir çözüm.

function get(url, callback) {
        var xhr = new XMLHttpRequest();
        xhr.open('get', url);
        xhr.addEventListener('readystatechange', function () {
            if (xhr.readyState === 4) {
                if (xhr.status === 200) {
                    console.log('successful ... should call callback ... ');
                    callback(null, JSON.parse(xhr.responseText));
                } else {
                    console.log('error ... callback with error data ... ');
                    callback(xhr, null);
                }
            }
        });
        xhr.send();
    }

/**
     * @function promisify: convert api based callbacks to promises
     * @description takes in a factory function and promisifies it
     * @params {function} input function to promisify
     * @params {array} an array of inputs to the function to be promisified
     * @return {function} promisified function
     * */
    function promisify(fn) {
        return function () {
            var args = Array.prototype.slice.call(arguments);
            return new Promise(function(resolve, reject) {
                fn.apply(null, args.concat(function (err, result) {
                    if (err) reject(err);
                    else resolve(result);
                }));
            });
        }
    }

var get_promisified = promisify(get);
var promise = get_promisified('some_url');
promise.then(function (data) {
        // corresponds to the resolve function
        console.log('successful operation: ', data);
}, function (error) {
        console.log(error);
});

Kriskowal'in Q kütüphanesi, geri çağrı vaat eden fonksiyonları içerir. Bunun gibi bir yöntem:

obj.prototype.dosomething(params, cb) {
  ...blah blah...
  cb(error, results);
}

Q.ninvoke ile dönüştürülebilir

Q.ninvoke(obj,"dosomething",params).
then(function(results) {
});

Geri arama alan birkaç fonksiyonunuz olduğunda ve bunun yerine bir söz vermelerini istediğinizde, dönüşüm yapmak için bu fonksiyonu kullanabilirsiniz.

function callbackToPromise(func){

    return function(){

        // change this to use what ever promise lib you are using
        // In this case i'm using angular $q that I exposed on a util module

        var defered = util.$q.defer();

        var cb = (val) => {
            defered.resolve(val);
        }

        var args = Array.prototype.slice.call(arguments);
        args.push(cb);    
        func.apply(this, args);

        return defered.promise;
    }
}

Vaatler ve zaman uyumsuzlaştırılmış v7.6 + düğümü altında:

// promisify.js
let promisify = fn => (...args) =>
    new Promise((resolve, reject) =>
        fn(...args, (err, result) => {
            if (err) return reject(err);
            return resolve(result);
        })
    );

module.exports = promisify;

Nasıl kullanılır:

let readdir = require('fs').readdir;
let promisify = require('./promisify');
let readdirP = promisify(readdir);

async function myAsyncFn(path) {
    let entries = await readdirP(path);
    return entries;
}

Node.js 8'de yapabilirsiniz promisify nesne yöntemlerini anında bu npm modülü kullanarak:

https://www.npmjs.com/package/doasync

Util.promisify ve Proxies kullanır, böylece nesneleriniz değişmeden kalır. Notlama ayrıca WeakMaps kullanılarak yapılır). İşte bazı örnekler:

Nesnelerle:

const fs = require('fs');
const doAsync = require('doasync');

doAsync(fs).readFile('package.json', 'utf8')
  .then(result => {
    console.dir(JSON.parse(result), {colors: true});
  });

Fonksiyonları ile:

doAsync(request)('http://www.google.com')
  .then(({body}) => {
    console.log(body);
    // ...
  });

Yerel callve applybazı bağlamları bağlamak için bile kullanabilirsiniz :

doAsync(myFunc).apply(context, params)
  .then(result => { /*...*/ });

SetTimeout ile örnek olarak ilgilenmek için ES6'da yerel Promise kullanabilirsiniz :

enqueue(data) {

    const queue = this;
    // returns the Promise
    return new Promise(function (resolve, reject) {
        setTimeout(()=> {
                queue.source.push(data);
                resolve(queue); //call native resolve when finish
            }
            , 10); // resolve() will be called in 10 ms
    });

}

Bu örnekte, Sözün başarısız olmak için bir nedeni yoktur, bu yüzden reject()asla çağrılmaz.

Geri arama stili işlevi her zaman böyle (node.js'deki neredeyse tüm işlevler bu stildir):

//fs.readdir(path[, options], callback)
fs.readdir('mypath',(err,files)=>console.log(files))

Bu stil aynı özelliğe sahiptir:

1. geri arama işlevi son argüman tarafından iletilir.

2. geri çağrı işlevi her zaman hata nesnesini ilk bağımsız değişken olarak kabul eder.

Yani, aşağıdaki gibi bu stile sahip bir işlevi dönüştürmek için bir işlev yazabilirsiniz:

const R =require('ramda')

/**
 * A convenient function for handle error in callback function.
 * Accept two function res(resolve) and rej(reject) ,
 * return a wrap function that accept a list arguments,
 * the first argument as error, if error is null,
 * the res function will call,else the rej function.
 * @param {function} res the function which will call when no error throw
 * @param {function} rej the function which will call when  error occur
 * @return {function} return a function that accept a list arguments,
 * the first argument as error, if error is null, the res function
 * will call,else the rej function
 **/
const checkErr = (res, rej) => (err, ...data) => R.ifElse(
    R.propEq('err', null),
    R.compose(
        res,
        R.prop('data')
    ),
    R.compose(
        rej,
        R.prop('err')
    )
)({err, data})

/**
 * wrap the callback style function to Promise style function,
 * the callback style function must restrict by convention:
 * 1. the function must put the callback function where the last of arguments,
 * such as (arg1,arg2,arg3,arg...,callback)
 * 2. the callback function must call as callback(err,arg1，arg2,arg...)
 * @param {function} fun the callback style function to transform
 * @return {function} return the new function that will return a Promise,
 * while the origin function throw a error, the Promise will be Promise.reject(error),
 * while the origin function work fine, the Promise will be Promise.resolve(args: array),
 * the args is which callback function accept
 * */
 const toPromise = (fun) => (...args) => new Promise(
    (res, rej) => R.apply(
        fun,
        R.append(
            checkErr(res, rej),
            args
        )
    )
)

Daha özlü olması için yukarıdaki örnekte ramda.js kullanılmıştır. Ramda.js, işlevsel programlama için mükemmel bir kütüphanedir. Yukarıdaki kodda, uygula (javascript gibi function.prototype.apply) ve append (javascript gibi function.prototype.push) kullandık. Yani, bir geri arama stili işlevini şimdi stil işlevine söz verebiliriz:

const {readdir} = require('fs')
const readdirP = toPromise(readdir)
readdir(Path)
    .then(
        (files) => console.log(files),
        (err) => console.log(err)
    )

toPromise ve checkErr işlevi çılgına dönme kütüphanesine aittir , ramda.js (benim oluşturduğum) tarafından işlevsel bir programlama kütüphanesi çatalıdır .

Umarım bu cevap sizin için yararlıdır.

Böyle bir şey yapabilirsin

// @flow

const toPromise = (f: (any) => void) => {
  return new Promise<any>((resolve, reject) => {
    try {
      f((result) => {
        resolve(result)
      })
    } catch (e) {
      reject(e)
    }
  })
}

export default toPromise

Sonra kullan

async loadData() {
  const friends = await toPromise(FriendsManager.loadFriends)

  console.log(friends)
}

es6-promisify geri arama tabanlı işlevleri Promise tabanlı işlevlere dönüştürür.

const promisify = require('es6-promisify');

const promisedFn = promisify(callbackedFn, args);

Ref: https://www.npmjs.com/package/es6-promisify

Bir callbackfonksiyonun benim promisify sürümü Pfonksiyon:

var P = function() {
  var self = this;
  var method = arguments[0];
  var params = Array.prototype.slice.call(arguments, 1);
  return new Promise((resolve, reject) => {
    if (method && typeof(method) == 'function') {
      params.push(function(err, state) {
        if (!err) return resolve(state)
        else return reject(err);
      });
      method.apply(self, params);
    } else return reject(new Error('not a function'));
  });
}
var callback = function(par, callback) {
  var rnd = Math.floor(Math.random() * 2) + 1;
  return rnd > 1 ? callback(null, par) : callback(new Error("trap"));
}

callback("callback", (err, state) => err ? console.error(err) : console.log(state))
callback("callback", (err, state) => err ? console.error(err) : console.log(state))
callback("callback", (err, state) => err ? console.error(err) : console.log(state))
callback("callback", (err, state) => err ? console.error(err) : console.log(state))

P(callback, "promise").then(v => console.log(v)).catch(e => console.error(e))
P(callback, "promise").then(v => console.log(v)).catch(e => console.error(e))
P(callback, "promise").then(v => console.log(v)).catch(e => console.error(e))
P(callback, "promise").then(v => console.log(v)).catch(e => console.error(e))

PFonksiyon geri arama imzası olması gerektiğini gerektirir callback(error,result).

Aşağıda bir işlevin (geri arama API'sı) bir vaat haline nasıl dönüştürülebileceğinin uygulanması yer almaktadır.

function promisify(functionToExec) {
  return function() {
    var array = Object.values(arguments);
    return new Promise((resolve, reject) => {
      array.push(resolve)
      try {
         functionToExec.apply(null, array);
      } catch (error) {
         reject(error)
      }
    })
  }
}

// USE SCENARIO

function apiFunction (path, callback) { // Not a promise
  // Logic
}

var promisedFunction = promisify(apiFunction);

promisedFunction('path').then(()=>{
  // Receive the result here (callback)
})

// Or use it with await like this
let result = await promisedFunction('path');

5 yıl geç oldu, ancak geri çağrılar API'sından işlevleri alan ve onları sözlere dönüştüren promesify sürümümü göndermek istiyorum

const promesify = fn => {
  return (...params) => ({
    then: cbThen => ({
      catch: cbCatch => {
        fn(...params, cbThen, cbCatch);
      }
    })
  });
};

Bu çok basit sürüme buradan göz atın: https://gist.github.com/jdtorregrosas/aeee96dd07558a5d18db1ff02f31e21a