封装 ajax 为Promise异步函数

使用 Promise 封装 $.ajax 请求函数。 集中处理 错误返回。 没有太多细节,直接上代码。

代码:

/**
 * @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
  }
}
复制代码

请求代码使用:

// 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/…



转载于:https://juejin.im/post/5cce99e0e51d456e4c4c00b9

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值