JavaScript AJAX, xmlHttpRequest в отдельном классе

Question

поэтому я планирую, чтобы ваша обычная JavaScript работала с html для создания и динамического изменения вашей веб-страницы. Но вместо того, чтобы иметь и создавать объект xmlhttp с различными функциями внутри одного класса, я хочу создать его в отдельном классе, чтобы его можно было использовать с любым классом. Я пытаюсь найти примеры того, как это сделать, но все, кажется, создают его и используют один и тот же класс. Таким образом, в классе xmlRequest я хотел бы что-то вроде этой функции () создать новый xml объект

onError (), когда и если произойдет ошибка

success (), содержимое было извлечено и загружено

Я просто не понимаю, как заставить это работать с любым другим отдельным классом.

Answer 1

Это пример "ajax сервиса", который я использую в своих проектах, вы можете сделать что-то подобное (и я рекомендую использовать Ax ios, как в этом примере)

import axios from 'axios';    


class AjaxService {//Simple wrapper for Axios, in order to manually handle errors which aren't 500

    /**
     * NOTE: This is NOT an abstraction layer, but just a wrapper for Axios. All consuming modules should expect Axio's response format(response.data). 
     * @public
     * @param {string} url 
     * @param {Object} config 
     */
    static async post(url, config) {       
        return await this.shootAjax('post',url, config);

    }   


    /**
     * @public
     * @param {string} url 
     * @param {Object} config 
     */
    static async get(url, config) {

       return await this.shootAjax('get',url, config);            

    }

    /**
     * @public
     * @param {string} key 
     * @param {string} value 
     */
    static setHeader(key,value){
        axios.defaults.headers.common[key] = value;
    }    

    /**
     * @private
     * @param {string} method 
     * @param {string} url 
     * @param {Object} config 
     */

    static async shootAjax(method, url, config) {
        // debugger;
        // url = this.processUrl(url);
        let response;
        if (method === 'get') {
            response = await axios.get(url, config);
        } else {
            response = await axios.post(url, config);
        }

        if (response.data.status !== 'ok') {//Manual promise rejection.
            const error = new Error(response.data.error);
            error.errorCode = response.data.errorCode;
            throw error;
        }
        return response;
    }
}

export default AjaxService;

Обратите внимание, что в этом примере у меня есть некоторая ручная обработка ошибок в соответствии со структурой моих ответов API, конечно, вы можете настроить свои собственные.

При таком подходе все, что вам нужно сделать, в "верхнем коде" "ждать функций get / post внутри блока try / catch.

Answer 2

Вам нужна среда для управления вашими зависимостями, например Require Js. который используется для загрузки файлов JavaScript, это платформа для управления зависимостями между файлами JavaScript, а в модульном программировании все функциональные возможности делятся на разные модули, поэтому Require Js - лучший инструмент для сборки различных JavaScript файлов из разных модулей, с помощью которых можно улучшить скорость и качество вашего кода. Common Js - это еще один фреймворк, который можно использовать аналогичным образом.

Вот базовое c использование Require Js: Require Js для Common Js это в основном то же самое, что требуется Common Js

Другой вариант, если вы используете javascript ES6, это реализовать экспорт / импорт в каждом модуле. Вы экспортируете модуль и импортируете его в модуль, к которому хотите получить доступ к его методам.

Вот документация Импорт / Экспорт модулей ES6