Código de JavaScript - Ajax - Promises

Imágen de perfil

Ajax - Promisesgráfica de visualizaciones


JavaScript

estrellaestrellaestrellaestrellaestrella(3)
Publicado el 15 de Abril del 2017 por abZer0x
1.321 visualizaciones desde el 15 de Abril del 2017. Una media de 21 por semana
Esta clase permite realizar peticiones vía ajax de forma fácil, utilizando los métodos GET y POST.
La sencillez de la clase se ve beneficiada por el uso del objeto Promise implementado en el último estándar de ECMASCRIPT 6 - ES2015.

Requerimientos

navegador web

1.0
estrellaestrellaestrellaestrellaestrella(3)

Actualizado el 04 de Junio del 2017 (Publicado el 15 de Abril del 2017)gráfica de visualizaciones de la versión: 1.0
1.322 visualizaciones desde el 15 de Abril del 2017. Una media de 21 por semana
estrellaestrellaestrellaestrellaestrella
estrellaestrellaestrellaestrella
estrellaestrellaestrella
estrellaestrella
estrella

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
'use strict';
 
/**
 * Ajax
 * Esta clase permite realizar peticiones vía ajax de forma fácil,
 * utilizando los métodos GET y POST. 
 * La sencillez de la clase se ve beneficiada por el uso del objeto Promise 
 * implementado en el último estándar de ECMASCRIPT 6 - ES2015.
 * 
 * Ejemplo - Request POST:
 * 
 * let data = {
 *   name: "Juan",
 *   lastname: "Perez"
 * };
 * 
 * Ajax
 *  .post({
 *     url: 'http://localhost/test.php',
 *          responseType: 'json',
 *          data: data
 *      })
 *      .then((response) => {
 *          console.log(response);
 *      })
 *      .catch((error) => {
 *          console.log(error);
 *      });
 * 
 * Tanto el método .post como .get reciben como parámetro un objeto. 
 * Dicho objeto,cuenta con 3 propiedades:
 * url: String, de la dirección url (relativa o absoluta). 
 * [ responseType ]: String, Debe ser uno de los siguientes valores:                                              
 *                - text (default)
 *                - arraybuffer
 *                - blob
 *                - json
 *                - document
 * [ data ]: String|FormData|Object.  
 * @author  Alejandro Berón
 * @version 1.0.0
 */
class Ajax {
 
    /**
     * _validateData
     * @param {String|Object} data 
     * @return {Boolean}     
     */
    static _validateData(data) {
        if (/^(([a-z0-9]+)=.)+(.)*$/.test(data)) {
            return true;
        } else if (typeof data === 'object') {
            if (data.constructor === Object || data.constructor === FormData) {
                return true;
            }
        }
        return false;
    }
 
    /**
     * _validateParams
     * @param {String} url 
     * @param {String} responseType 
     * @param {String|Object} data 
     * @return {Boolean}
     */
    static _validateParams(url, responseType, data) {
        const RESPONSE_TYPE = new Set();
        RESPONSE_TYPE.add('');
        RESPONSE_TYPE.add('arraybuffer');
        RESPONSE_TYPE.add('blob');
        RESPONSE_TYPE.add('json');
        RESPONSE_TYPE.add('document');
        RESPONSE_TYPE.add('text');
 
        if (!url) {
            throw new Error(`[ ERROR ] the url parameter is required.`);
        }
 
        if (!RESPONSE_TYPE.has(responseType)) {
            throw new Error(`[ ERROR ] ${responseType} not valid.`);
        }
 
        if (data) {
            if (!this._validateData(data)) {
                throw new Error(`[ ERROR ] ${data} Is not a valid type.`);
            }
        }
    }
 
    /**
     * _getJSON
     * @param {Object} data 
     * @return {String}
     */
    static _getJSON(data) {
        return JSON.stringify(data);
    }
 
    /**
     * init
     * Create new object XMLHttpRequest.
     * @return {Object}
     */
    static _init() {
        if (window.XMLHttpRequest) {
            return new XMLHttpRequest();
        }
    }
 
    /**
     * _request
     * @param {Object} request 
     */
    static _request(request, resolve, reject) {
        let http = Ajax._init();
        http.responseType = request.responseType;
 
        // open request
        http.open(request.method, request.url, true);
 
        if (request.data) {
            if (request.method === 'POST') {
                if (request.data.constructor === Object) {
                    request.data = Ajax._getJSON(request.data);
                    http.setRequestHeader('Content-Type', 'application/json; charset=UTF-8');
                } else if (request.data.constructor === String || typeof request.data === 'string') {
                    http.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
                }
            }
        }
 
        http.onload = () => {
            if (http.status === 200) {
                resolve(http.response);
            } else {
                reject(new Error(`[ ERROR ] ${http.statusText}: ${http.statusText}`));
            }
        };
 
        http.onerror = () => {
            reject(new Error('Network Error'));
        };
 
        http.send(request.data);
    }
 
    /**
     * get
     * @param {Object} 
     *        url          {String}
     *        responseType {String}
     *        data         {String|Object}
     * @return {Object} - Promise
     */
    static get({ url, responseType = '', data = '' }) {
        return new Promise((resolve, reject) => {
            Ajax._validateParams(url, responseType, data);
 
            if (typeof data === 'string' || data.constructor === String) {
                url += `?${data}`;
            }
 
            Ajax._request({
                url: url,
                responseType: responseType,
                data: null,
                method: 'GET'
            }, resolve, reject);
        });
    }
 
    /**
     * post
     * @param {Object} 
     *         url          {String}
     *         responseType {String}
     *         data         {String|Object}
     * @return {Object} - Promise
     */
    static post({ url, responseType = '', data = '' }) {
        return new Promise((resolve, reject) => {
            Ajax._validateParams(url, responseType, data);
            Ajax._request({
                url: url,
                responseType: responseType,
                data: data,
                method: 'POST'
            }, resolve, reject);
        });
    }
}



Comentarios sobre la versión: 1.0 (3)

Imágen de perfil
kip
15 de Abril del 2017
estrellaestrellaestrellaestrellaestrella
Cabe recalcar que es solo válido para navegadores que soporten el nuevo estándar, puede usarse tal vez algun tipo de transpilador como Babel para compilarlo a ES5 que es el estándar(por ahora) mas compatible.
Responder
Imágen de perfil
Alejandro
15 de Abril del 2017
estrellaestrellaestrellaestrellaestrella
Tienes razón kip, me falto comentar eso, debería haber dicho hice uso de Babel para convertir el código a ES5 y de esta manera sea compatible con aquellos navegadores que aun no soportan el nuevo estándar. Solo comparti el código es6.
Responder
Imágen de perfil
xve
15 de Abril del 2017
estrellaestrellaestrellaestrellaestrella
No ha dejado ningún comentario
Responder

Comentar la versión: 1.0

Nombre
Correo (no se visualiza en la web)
Valoración
Comentarios
Es necesario revisar y aceptar las políticas de privacidad

http://lwp-l.com/s3949  
Revisar política de publicidad