[Web] à l'aide package Promise pour chercher la demande de terminaison de fonction de temporisation réseau

Reproduit de: https://www.jianshu.com/p/d66421c826ae

Cette référence à Fetch Guide avancé

origine

FETCH n'est pas un délai d' attente des mécanismes réseau, ni sur le mécanisme.
Le processus de développement quotidien, assurez - vous de gérer le délai d' attente de la demande, mais aussi une résiliation rapide des demandes de réseau indésirables.
Donc, nous avons besoin de chercher leur propre paquet pour atteindre.

réalisation

Promise.race (promise1, promise2, ...) méthode retourne un des objets Promise, tant que le paramètre est un quelconque d'une résolution ou de rejeter Promise, sera à l'extérieur détermination Promise ou de rejeter à la même valeur.

importation React, {} composant de 'réagir' ;

/ * *
 * Utilisation de l'emballage Fetch Promise, ayant un délai d'attente de réseau, la demande de mettre fin à la fonction
 * /
étend la classe netutil composant {

    statique baseUrl = "http: // xxxx: 81 / api /" ;
    jetons statiques = « » ;

    / * *
     * Publier une demande Publier
     * Url: Demander l'adresse
     * Données: Paramètre (objet JSON)
     * Rappel: la fonction de rappel
     * * / 
    Statique fetch_request (url, méthode, params = '' ) {
        laissez - tête = {
             'Accepter': 'application / json' ,
             'Content-Type': 'application / json; charset = UTF-8' ,
             'accesstoken' : NetUtil.token,
        }
        laissez promesse = null ;
        si (params == '' ) {
            promesse = nouvelle promesse ((résolution, rejeter) => {
                fetch (NetUtil.baseUrl + url, {méthode: méthode, en- têtes: en- tête})
                    .alors (réponse => response.json ())
                    .alors (responseData => détermination (responseData))
                    .alors (err => rejet (err))
            })
        } Autre {
            promesse = nouvelle promesse ((résolution, rejeter) => {
                fetch (NetUtil.baseUrl + url, {méthode: méthode, en- têtes: tête, corps: JSON.stringify (params)})
                    .alors (réponse => response.json ())
                    .alors (responseData => détermination (responseData))
                    .alors (err => rejet (err))
            })
        }
        retour NetUtil.warp_fetch (promesse);
    }

    / * *
     * Promesse de créer deux objets, l'un pour les demandes de réseau et un autre responsable de la synchronisation, si plus que le temps spécifié, il sera d'abord chronométré promesse de rappel au nom d'un délai d'attente du réseau.
     * @Param {Promise} fetch_promise FETCH retourné Promise
     * @Param {number} [timeout = 10000] Unité: ms, il est prévu le délai par défaut est de 10 secondes
     * @Return retour Promise
     * / 
    Warp_fetch statique (fetch_promise, délai d' attente = 10 000 ) {
        laisser timeout_fn = null ;
        ABANDON let = null ;
         // Création d' un délai d' attente promesse 
        let timeout_promise = new new Promise ( fonction (Resolve, Rejeter) {
            timeout_fn = fonction () {
                Rejeter ( 'Timed out' );
            };
        });
        // Créer une terminaison promesse 
        let abort_promise = new new Promise ( fonction (Resolve, Rejeter) {
            abort = fonction () {
                Rejeter ( « demande d'arrêt » );
            };
        });
        // 竞赛 
        laisser abortable_promise = Promise.race ([
            fetch_promise,
            timeout_promise,
            abort_promise,
        ]);
        // Timing 
        le setTimeout (timeout_fn, délai d' attente);
         // fin 
        abortable_promise.abort = ABORT;
         retour abortable_promise;
    }
}

l' exportation par défaut netutil;