小程序的请求封装(避免回调地狱)

女爷i 2021-11-05 04:36 431阅读 0赞

### 文章目录 ###

*   *   *  场景
         *  分析
         *  实现

### 场景 ###

*  为了避免回调地域的感概， 小程序的请求是必须要进行promise的封装的

### 分析 ###

*  必须是一个promise
 *  必须有请求异常的提示
    
     *  http 状态码异常
     *  接口内部的异常状态码
     *  wx.showToast() 完成异常的渲染
 *  附加接口基础地址
    
     *  在校验到没有传递http https的时候自动附加到接口地址上
 *  附加token
    
     *  header 附加token完成鉴权的流程

### 实现 ###

import config from '../config.js';
    import TokenModel from '../models/token.js';
    let token_model = new TokenModel();
    
    export default class  HTTP { 
    
      // 错误展示
      _show_error(params) { 
        wx.showToast({ 
          title: params.msg ? params.msg : '抱歉, 出现了一个错误',
          icon: params.icon ? params.icon : 'none',
          duration: params.duration ? params.duration : 2000
        })
      }
      // 发起请求
      request({ url, data = { }, method = 'GET', header = { 'content-type': 'application/json'}}){ 
        return new Promise((resolve, reject)=>{ 
          this._request(resolve, reject, url, data, method, header);
        });
      }
    
      // 获取header配置
      _getHeader(header){ 
        // 如果存在 personal token 
        header.Authorization = 'Bearer ' + token_model.getPersonalToken();
        return header;
      }
    
      // 发起请求
      _request(resolve,reject,url, data = { }, method = 'GET', header = {  'content-type': 'application/json' }){ 
            header = this._getHeader(header);
         
            // url, data, method,
            wx.request({ 
              url:  url.startsWith('http') ? url : (config.api_base_url + url),
              method,
              header,
              data,
              success: response => { 
                let code = response.statusCode.toString();
                if (code.startsWith(2) && response.data.status === 0) { 
                  // 如果请求的状态是异常的花
                  let status = response.data.status;
                  console.log('接口正常返回的情况', response, url);
                  if (status !== 0) { 
                    this._warningWhenError(response, reject);
                  } else { 
                    resolve(response.data);
                  }
                } else { 
                  this._warningWhenError(response, reject);
                }
              },
              fail: (response) => { 
                  console.log('接口异常返回的情况', response, url);
                this._warningWhenError(response, reject);
              }
            }); 
       }
    
      // 请求返回异常的时候 预警
      _warningWhenError(response, reject){ 
        let msg = response.data.errors ? response.data.errors.msg : '请求发生异常';
         this._show_error({  msg });
         reject(msg);
       }
    }