微信小程序基于Promise的网络请求接口封装两种方式。

一、最基础的封装，小程序文档中调用 API---request请求，对其公共参数进行封装。简单易懂，适合刚开始做项目的小白使用。

在项目中单独建立一个文件夹里面存放api.js 、request.js和env.js文件

1、request.js

// 引入env中的url
const { baseUrl } = require('./env.js').test   //测试环境
  // 专属域名
  module.exports = {
    request: (url, method = 'POST', data = {}) => {
      // console.log(baseUrl)
      let _url = `${baseUrl}${url}`
      return new Promise((resolve, reject) => {
        wx.showLoading({
          title:"正在加载"
        })
  
        wx.request({
          url: _url, //请求路径
          data: data,    //请求参数
          method: method,   //请求方法get和post
          header: {
            'content-type': 'application/x-www-form-urlencoded'  //请求头
          },
          success: (res) => {
            // console.log(res)
            if(res.data.ret == 200){
              wx.hideLoading()
              resolve(res.data)
            }else{
              wx.showToast({
                title: '数据请求失败',
              })
            }
          }
        })
      })
    }
  
  }
  
  

2、env.js

//设置公共访问的url，即环境变量

module.exports = {
    // 开发环境
     dev: {
       baseUrl: 'https://localhost:3000'
    },
    // 测试环境
    test: {
      baseUrl: 'https://localhost:4000'
    },
    // 线上环境
    prod: {
      baseUrl:  'https://localhost:5000'
    }
  
  }
  
  

3、api.js

const { request } = require('./request')
module.exports = {
    getList: (data) => {
      return request('/GetList','get',data); //第一个参数为地址，第二个参数为请求方式，第三个参数为传递的参数
    }
  
   
  }

最后一步，在需要调用接口的地方直接拿来使用。

import {getLsit} from "../../request/api";



getList({data:data}).then(res=>{

console.log(res)
)

二、第二种方式是基于Promise的async异步网络请求封装。优点:1、当向后台发送请求后，会在sucess处等待后台返回值，此时其之后的代码仍然会继续执行，此时就会出现多线程执行的情况，使用异步可以加快执行的效率。2、从用户体验来讲，异步请求可以完全不影响用户的体验效果，无论请求的时间长或者短，用户都在专心的操作页面的其他内容，并不会有等待的感觉。缺点:有些手机型号不支持async请求方式。同上面方式一样，建立三个文件夹。

1、request.js

import apiBaseUrl from "./env";

function singRequest(params) {
    //测试版
    const baseUrl = apiBaseUrl();
    return new Promise(function (resolve, reject) {
        wx.request({
            ...params,
            url: baseUrl + params.url,
            success(ret) {
                resolve(ret);
            },
            fail() {
                wx.navigateTo({
                    url: '/pages/Lose/Lose',
                })
            }
        })
    })
}

// 封装单个及多个网络请求，多次请求按顺序请求
async function Request(params) {
    wx.showLoading({
        title: '正在加载...',
    });

    let datas;
    if (params instanceof Array) {
        datas = [];
        for (let i = 0; i < params.length; i++) {
            let data = await singleRequest(params[i]);
            datas.push(data);
        }
        setTimeout(function () {
            wx.hideLoading({
                fail: () => { },
                success: () => { },
                complete: (complete) => { }
            })
        }, 1000)
        return datas;
    } else {
        datas = await singleRequest(params);
        setTimeout(function () {
            wx.hideLoading({
                fail: () => { },
                success: () => { },
                complete: (complete) => { }
            })
        }, 1000)
        return datas;
    }
}

export default Request;

env.js

function apiBaseUrl() {
    //测试版本
    return "https://113113";   
    //线上版本 
    // return "https://123";    
}

export default apiBaseUrl;

api.js

export const getList = {
    url: 'getList.Info'
 }

需要的页面直接引用

import request from "../../request/request"
import {getList} from "../../request/api"
Page({

onLoad(){
    request({...getList,
    data:data,
    method:'POST'
 }}).then(res=>{
console.log(res)

})



})

两种方式各有不同，大家选择最适合自己的就行。也请大家各抒己见，继续完善！