單獨類中的 JavaScript AJAX、xmlHttpRequest

Question

所以我的計划是讓您的普通 JavaScript 與 html 一起使用來創建和動態更改您的網頁。 但是，我不想在同一個類中使用不同的函數創建 xmlhttp 對象，而是想在一個單獨的類中創建一個對象，以便它可以與任何類一起使用。 我試圖找到有關如何執行此操作的示例，但似乎每個人都在創建它並在同一個類中使用它。 所以在 xmlRequest 類中，我會有類似這樣的函數（）創建新的 xml 對象

onError() 發生錯誤時

success() 內容已被檢索並加載

我只是不明白如何與任何其他單獨的課程一起使用。

Answer 1

這是我在我的項目中使用的“ajax 服務”的一個例子，你可以做類似的事情（我建議在這個例子中使用 Axios）

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 響應的結構進行了一些手動錯誤處理，當然您可以設置自己的。

使用這種方法，您需要在“上層代碼”中做的就是在 try/catch 塊內等待 get/post 函數。

Answer 2

您需要一個框架來管理您的依賴項，例如 RequireJs。 用於加載 JavaScript 文件，它是管理 JavaScript 文件之間依賴關系的框架，在模塊化編程中，所有功能都划分在不同的模塊中，因此 RequireJs 是從不同模塊組裝不同 JavaScript 文件的最佳工具，它通過它有助於提高代碼的速度和質量。 CommonJs 是另一個可以以類似方式使用的框架。

下面是 RequireJs 的基本用法： RequireJs for CommonJs 與 require CommonJs基本相同

另一種選擇是，如果您使用的是 javascript ES6，則在每個模塊中實現導出/導入。 您導出模塊並將其導入到要訪問其方法的模塊中。

這是文檔導入/導出 ES6 模塊