微信小程序api请求封装（多环境）

一、untils.js封装常用消息提示加载模态框

// 显示消息提示框
export function Toast(title, type, time, isshow) {
  wx.showToast({
    title: title,
    icon: type,
    duration: time,
    mask: isshow
  })
}
// 显示 loading 提示框。需主动调用 wx.hideLoading 才能关闭提示框
export function Loading(title) {
  wx.showLoading({
    title: title,
  })
}
// 显示模态对话框
export function Modal(title,content) {
  return new Promise((resolve,reject)=>
  wx.showModal({
    title: '提示',
    content: '这是一个模态弹窗',
    success (res) {
      if (res.confirm) {
        console.log('用户点击确定')
        resolve(res.confirm)
      } else if (res.cancel) {
        console.log('用户点击取消')
        resolve(res.cancel)
      }
    }
  })
  )  
}

二、新建api文件夹以及api文件夹下的api.js request.js config.js 三个文件

1.config.js(主要放各种环境)

代码如下（示例）：

// 开发环境url 
export const dev = 
   baseUrl: "http://192.168.125.2xxxxx",
;
// 测试环境url
export const test = 
  baseUrl: "http://www.xxx.com"
;
// 线上环境url
export const prod = 
  baseUrl: 'https://www.xxx.com'
;

2.request.js

//引入untils.js封装的一些消息提示框
import 
  Toast,
  Loading,
  Modal
 from './utils.js'

// 引入config中的url(后面点什么就是 什么环境)
 const 
  baseUrl
 = require('./config').dev  //这里用的是ES6的写法

module.exports = 
  // 二次封装wx.request
  request: (url, method, data) => 
    //url： 为网络接口后面要拼接的动态路径
    //method: 为请求方式
    //data: 为要传递的参数 object类型
     let _url = `$baseUrl/$url` //子域名按需添加
    // let _url = `$baseUrl$son/$url`

         //设置请求头
      var header = 'content-type': 'application/json'
      
      //检查缓存中有没有token
      var token = wx.getStorageSync('token')
      if(token != '') 
        //  header.Authorization = token;
        header['X-Access-Token'] = token;   // 键由后端定义
      
    return new Promise((resolve, reject) => 
      Loading('正在加载中')
      wx.request(
        url: _url,
        data: data,
        method: method,
        header: header,
       /* success: (res) => 
           if (res.data.code == 200) 
             resolve(res)
             wx.hideLoading();
            else 
             Toast('数据请求错误', 'error', 1000)
            //  console.log('操作失误：',res);
             wx.hideLoading();
           
        ,
        fail: (err) => 
          reject(err)
         */
		 complete: (res) =>      //根据公司业务需求做出调整
                wx.hideLoading()
                if(res.statusCode==200)
                    if(res.data.status)
                        resolve(res.data.data)
                    else
                        Toast(res.data.msg)
                        reject(res.data.data)
                    
                else if (res.statusCode === 401)  
                    //没有登录转跳到登录页面
                    wx.reLaunch(
                        url: '/pages/login/index'
                    )
                else   
                    Toast('请求失败,请稍后重试');
                
            
      )
    )

3.api.js

import request from './request'
export function login(data) => 
    return request('/appletslogin/appletsLogin/login', 'post', data);
  ,

三、页面使用

// 注意引入路径
const api = require('../../api/index')
 
// 在方法中调用(注意)
 goRegister(){
 //需要传入的参数
    let data = {
      aaa: this.data.cardCur,
      bbb: this.data.notice,
    }
    api.login(data).then((res) => {
      console.log(res,'res');
    }).catch()
  },