微信小程序之 wx.request 封装 ajax加载数据封装案例

微信小程序之 wx.request

1. pages 同级 创建文件夹 utils；
   
   2.utils 文件夹中创建 requst 文件夹；
   
   3.requst 中创建 文件 ajax.js api.js url.js
   
   4.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)
    // console.log(options)
    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() : '';
        // 如果没有登录的操作
        // console.log(res.data.code);
        if (res.data.code == 'login') {
          console.log('请先登录')
          return;
        }
        if (res.data.statusCode == 500) {
          wx.showToast({
            title: '系统错误，请联系开发人员！',
            mask: "true",
            icon: 'none',
            duration: 2000
          })
          return;
        }
        // if (res.data.code != 1) {
        //   wx.showToast({
        //     title: res.errMsg,
        //     mask: "true",
        //     icon: 'none',
        //     duration: 3000
        //   })
        //   return;
        // }

        resolve(res); //把请求到的数据发到引用请求的地方
      },
      fail: function (err) {
        options.load == 1 ? wx.hideLoading() : ''
        wx.showToast({
          title: "网络连接超时",
          icon: 'none',
          duration: 2000,
        })
        reject(err)
        console.log(err);

      }
    })
  });
}


module.exports = {
  fetch
}

5.url.js

let mainUrl = 'https://wx.xxx.com/wechat' //测试服
module.exports = {
  mainUrl: mainUrl,
}

6.api.js

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

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

// 获取服务器时间
export function get_time(parmas) {
  return fetch({
    url: myUrl.mainUrl + '/get_time',
    data: parmas,
    method: 'GET',
    load: 0
  })
}


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

7. 小程序页面中使用；xx.js 文件

import {
  activityInfo
} from "../../utils/requst/api.js";
Page({
	data: {
		la_id:1,
		groupinfo:[]
	},
	onLoad: function (options) {	
	    this.getactivityInfo();
	},
	getactivityInfo: function () {//调用封装的接口
    let params = {
      la_id: this.data.la_id
    }
    activityInfo(params).then((res) => { //调用封装的接口
      // console.log(res);
      this.setData({
        groupinfo: res.data.data
      })
    })
  },
  
})

完成。。。
ajax.js页也是百度抄来的 其他不懂的可以留言给我。。。