基于jQuery封装全局Ajax便捷方法，咨询Promise回调实现方案

Absolutely! Using Promise is a perfect fit here—it not only simplifies your repeated Ajax calls but also makes handling callbacks and additional operations way cleaner. Let’s walk through how to build this global do_ajax_request method step by step.

Step 1: Build the Global Promise-Wrapped Ajax Method #

Since you need this method to be globally accessible, we’ll attach it to the window object (so it’s available everywhere in your app). We’ll wrap jQuery’s Ajax call in a Promise to support flexible callback chaining:

// Define the global method (load this script before any code that uses it)
window.do_ajax_request = function(requestConfig) {
  // Basic validation to ensure required parameters exist
  if (!requestConfig.url) {
    return Promise.reject(new Error("Request URL is required!"));
  }

  // Destructure and set defaults for the request config
  const {
    url,
    data = {},
    method = "POST", // Default to POST as per your original code
    contentType = "application/x-www-form-urlencoded; charset=UTF-8"
  } = requestConfig;

  // Return a Promise to handle async flow
  return new Promise((resolve, reject) => {
    $.ajax({
      url: url,
      method: method,
      data: data,
      contentType: contentType,
      success: (response) => {
        // Optional: Add global success handling here (e.g., check for API error codes)
        resolve(response);
      },
      error: (xhr, status, err) => {
        // Optional: Add global error handling here (e.g., log errors, show user alerts)
        reject(new Error(`Request failed: ${err}`));
      }
    });
  });
};

Step 2: Use the Method with Promise Callbacks #

Now you can use do_ajax_request with .then()/.catch() for clean, readable async flow, or even async/await for synchronous-style code:

Example 1: Using .then()/.catch()

const requestData = {
  url: "/api/submit-user",
  data: { firstName: "John", lastName: "Doe", age: 46 }
};

do_ajax_request(requestData)
  .then((response) => {
    // Handle successful response (your custom logic here)
    console.log("Data submitted successfully:", response);
    // Add additional operations here (e.g., update UI, fetch more data)
  })
  .catch((error) => {
    // Handle errors gracefully
    console.error("Oops, something went wrong:", error.message);
    // Optional: Show user-friendly error message
  });

Example 2: Using async/await (Cleaner for Sequential Operations)

async function handleUserSubmission() {
  try {
    const requestData = {
      url: "/api/submit-user",
      data: { firstName: "John", lastName: "Doe", age: 46 }
    };

    const response = await do_ajax_request(requestData);
    console.log("Data submitted successfully:", response);
    
    // Add additional async operations here (e.g., fetch updated user list)
    // const updatedUsers = await do_ajax_request({ url: "/api/users" });
  } catch (error) {
    console.error("Request failed:", error.message);
  }
}

// Call the async function
handleUserSubmission();

Bonus: Add Global Helpers (Optional) #

You can extend this method with extra features like loading states or request cancellation by adding logic inside the Promise:

• Show a loading spinner when the request starts, hide it in finally()
• Allow passing a cancellation token to abort requests if needed

内容的提问来源于stack exchange，提问作者Jude Fernandes