封裝 ajax 爲Promise異步函數

使用 Promise 封裝 $.ajax 請求函數。 集中處理 錯誤返回。 沒有太多細節,直接上代碼。javascript

代碼:java

/** * @Description: 封裝 基本請求函數 * @author 蔡昂 (cgh1999520@gmail.com) * @date 2019/5/5 */
function f_request() {
  // 默認配置信息
  let baseConfig = {
    BASE_URL: '',  // 基本URL 地址
    contentType: 'application/json;charset=utf-8'
  };

  /** * @Description: 封裝內部請求函數 * @date 2019/5/5 * * @param url: 請求Url 地址,可經過設置 BASE 地址 * @param data: 請求數據 * @param method: 請求方式 */
  function request(url, data, method) {
    return new Promise((resolve, reject) => {
      $.ajax({
        url: baseConfig.BASE_URL + url,
        type: method,
        data: data,
        xhrFields: {  // 攜帶Cookie 信息
          withCredentials: true
        },
        crossDomain: true, // 使用跨域的XMLHttpRequest
        contentType: baseConfig.contentType,
        dataType: 'json',
        success: res => {
          // 判斷當前code 是不是正確,不正確則返回。
          if (!res.state) {
            reject(res);
            return;
          }
          // 若是請求成功,則返回數據結果
          resolve(res.data);
        },
        error: err => {
          alert('服務器請求失敗');
          reject(err)
        }
      })
    })
  }

  /** * @Description: get請求 * @date 2019/5/5 9:46 * * @param url: 請求Url 地址,可經過設置 BASE 地址 * @param data: 請求數據 * @param config: 配置參數,能夠本身定義BaseConfig 擴展。 */
  function get(url, data = {}, config = {}) {
    // 經過對象合併,覆蓋本地的baseConfig 配置
    Object.assign(baseConfig, config);
    return request(url, data, 'GET')
  }

  /** * @Description: post 請求 * @date 2019/5/5 9:46 * * @param url: 請求Url 地址,可經過設置 BASE 地址 * @param data: 請求數據 * @param config: 配置參數,能夠本身定義BaseConfig 擴展。 */
  function post(url, data = {}, config = {}) {
    // 經過對象合併,覆蓋本地的baseConfig 配置
    Object.assign(baseConfig, config);
    return request(url, data, 'POST')
  }

  // 經過閉包, 只返回 get / post 請求函數
  return {
    get,
    post
  }
}
複製代碼

請求代碼使用:git

// GET 請求
f_request().get('/test/api').then(res => {
  console.error(res, '請求成功')
},err => {
  console.error(err, '請求錯誤')
});


// POST 請求
f_request().post('/test/api', {
  id: '123'
}).then(res => {
  console.error(res, '請求成功')
}).catch(err => {
  console.error(err, '請求錯誤')
});
複製代碼

GIT 還有其它一些公共的 函數封裝,和平常使用的類庫。 github.com/cgh1999520/…github

相關文章
相關標籤/搜索