【微信小程序】接口请求封装

打开app.js
/*
    接口地址
*/
const urlRoot = 'https:// www.xxx.com'
const apiRoot = urlRoot + 'api/

/*
    全局数据
*/
globalData: {
   urlRoot: urlRoot,
   apiRoot: apiRoot,
},


/*
    获取url
*/
 getUrlRoot: function () {
   return this.globalData.urlRoot
 },

/**
  * 获取完整访问路径(域名 + 路径)
*/
  getFullUrl: function (uri) {
    return this.getUrlRoot() + uri
  },
/**
   * HTTP GET请求
   * 
   * @param url 接口地址
   * @param data 请求数据
   * @param success 接口请求成功回调
   * @param fail 接口请求失败回调(一般不怎么用)
   */
  httpGet: function (url, data = {}, success, fail) {
    let app = this
    // 显示导航栏加载动效
    wx.showNavigationBarLoading()

    let token = app.getToken()

    wx.request({
      // 请求地址
      url: this.getApiRoot() + url,
      // 请求头信息
      header: {
        'content-type': 'application/x-www-form-urlencoded',
        'Auth-Token': token,
      },
      // 请求方式
      method: 'GET',
      // 请求数据
      data: data,
      
      success: res => {
        // 接口请求成功
       

      },
      
      fail: errorRes => {
        // 接口请求失败
        console.log(errorRes)
        fail && fail(errorRes)
      },
      // 请求完成(不管成功失败)
      complete: () => {
        // 隐藏导航栏加载动效
        wx.hideNavigationBarLoading()
      }
    })
  },


 /**
   * HTTP POST请求
   * 
   * @param url 接口地址
   * @param data 请求数据
   * @param success 接口请求成功回调
   * @param fail 接口请求失败回调(一般不怎么用)
   */
  httpPost: function (url, data, success, fail) {
    let app = this
    // 显示导航栏加载动效
    wx.showNavigationBarLoading()

    let token = app.getToken()

    wx.request({
      // 请求地址
      url: this.getApiRoot() + url,
      // 请求头信息
      header: {
        'content-type': 'application/x-www-form-urlencoded',
        'Auth-Token': token,
      },
      // 请求方式
      method: 'POST',
      // 请求数据
      data: qs.stringify(data),
      // 接口请求成功
      success: res => {
        // 响应状态码为401时为登录过期或未登录
        if (res.statusCode === 401) {
          // 根据refresh_token获取新token，并重新请求
          app.refreshToken(res => {
            app.httpPost(url, data, success, fail)
          })
          return false
        } else if (res.statusCode !== 200) {
          // 响应状态码不为401，也不为200时调用失败回调函数
          fail && fail(res)
          return false
        } else {
          // 响应状态码为200，请求成功，调用成功回调函数
          success && success(res.data)
        }
      },
      // 接口请求失败
      fail: errorRes => {
        console.log(errorRes)
        fail && fail(errorRes)
      },
      // 请求完成(不管成功失败)
      complete: () => {
        // 隐藏导航栏加载动效
        wx.hideNavigationBarLoading()
      }
    })
  },

page页面声明：
    
    const app = getApp();
    
    /*
        post 请求
    */

    app.httpPost('接口',data,(res)=>{
        // 成功请求
    },(errRes)=>{
    
        // 失败请求
    }); 

    /*
        get 请求
    */

    app.httpGet('接口',data,(res)=>{
        // 成功请求
    },(errRes)=>{
    
        // 失败请求
    });