微信小程序封装请求,接口模块化管理

第一步

先在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 = '';
    }
    //如果是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)
    }
    console.log(options.data)
 
    wx.request({
      url: options.url,
      data: options.data,
      header: {
        "content-type": "application/json"
      },
 
      // header: {
      //   "application/x-www-form-urlencoded;charset=utf-8"
      // },
      
      method: options.method,
      success: function(res) {
        // console.log(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)
    })
  }