微信小程序用Promise封装请求,统一管理接口

第一步

先在util文件夹下面新建一个如下的目录

1、url.js里面保存的是正式服测试服的域名,也可以添加其他的一些项目中会使用的域名信息

2、ajax.js里是用promise封装的网络请求

3、api.js里是用来统一管理页面中的接口

主要代码如下

url.js

// let mainUrl = 'https://xxx'      //正式服
let mainUrl = 'http://xxxx' //测试服

module.exports = {
  mainUrl: mainUrl,
}

ajax.js

/*Promise封装请求   options是一个对象里面的属性有url, data, method, load
url 对应请求路径  
data对应请求的参数  
method对应请求方法  
load对应是否显示加载中 1显示 0不显示
*/
function fetch(options) {
  if (options.load == 1) {
    wx.showLoading({
      mask: true,
      title: '加载中'
    })
  }

  return new Promise((resolve, reject) => {
    //如果你需要在所有的请求加上固定的参数(需要区分是简单请求还是特色请求)
    //如果options.data是对象 表示是简单请求
    if (Object.prototype.toString.call(options.data) === '[Object Object]') {
      options.data.auth_token = '';
      options.data.uuid = '';
    }
    //如果options.data是json字符串的是特殊请求
    if (Object.prototype.toString.call(options.data) == "[object String]"){
      let obj=JSON.parse(options.data)
      obj.auth_token = '';
      obj.uuid = '';
      options.data = JSON.stringify(obj)
    }
   //上面这段根据你自己的逻辑看下是否需要   


    wx.request({
      url: options.url,
      data: options.data,
      header: {
        "content-type": "application/json"
      },

      
      method: options.method,
      success: function(res) {   //接口请求成功之后的操作  根据你自己的业务逻辑来判断

        options.load == 1 ? wx.hideLoading() : '';  //请求结束之后关闭登录中的弹框

        //如果没有登录的操作
        if (res.data.code == 'login') {
          console.log('请先登录')
          return;
        }

        //如果后端抛出错误信息显示错误信息
        if (res.data.code != 1) {
          wx.showToast({
            title: res.errMsg,
            mask: "true",
            icon: 'none',
            duration: 3000
          })
          return;
        }

        //请求成功并且没有抛错把请求到的数据发到引用请求的地方
        resolve(res);
      },
      fail: function(err) {
        reject(err)
        options.load == 1 ? wx.hideLoading() : ''
        wx.showToast({
          title: "网络连接超时",
          icon: 'none',
          duration: 3000,
        })
      }
    })
  });
}


module.exports = {
  fetch
}

 

api.js ------ 这里是管理所需后台接口的文件

const app = getApp()
const myUrl = require("./url.js");
import {
  fetch
} from "./ajax.js"   //引入封装的请求

export function homeList(parmas) {
  return fetch({
    url: myUrl.mainUrl+'/homeList',   //请求的域名   
    data: parmas,         //请求的参数
    method: 'GET',        //请求的方法
    load: 0               //是否需要显示加载中的图标
  })
}

//特殊请求
export function addAdvertisements(params) {
  return fetch({
    url: myUrl.mainUrl+'/addAdvertisements',
    data: JSON.stringify(params),
    method: 'post',
    load: 0
  })
}

 

项目中使用

//引入api.js里需要用的的请求
import {
  homeList,
  addAdvertisements
} from "../../utils/requst/api.js";

//简单请求   特殊请求在这里的写法是一样的
//简单请求
getList: function() {
    let parmas = {
      controller: 'ssss',
      act: 'getlist',
      //这里是后台请求需要用到的参数
    }
    homeList(parmas).then(function(res) {
      console.log(res)
     //这里写你网络请求的正常逻辑
    })


  }


  // 特殊请求
  frim: function() {
    let parmas = {
      launchDate: "12:00~14:00",
      timeSlot: "2019-08-31~2019-08-31",
      userId: "388",
      videLength: "15",
    };

   addAdvertisements(parmas).then(function(res){
      console.log(res)
    })
  }