微信小程序封装request请求方法

第一步：新建utils/request文件

//导出方法
// 1.直接导出 用 export导出声明的变量
// export const xx = ({})=>{}
// 2.模块导出如下module.exports = {}
//注意:直接导出的需要使用解构赋值{} 不能直接引文件名

const baseURL = 'http://localhost:3000'

// 1 封装公共请求接口方法
export const request = ({
  url,
  data = {},
  method = "get"
}) => {
  // 2 请求前加载 最后在请求后隐藏
  wx.showLoading({
    title: "拼命加载中..."
  })
  // 3 Promise 
  return new Promise((resolve, reject) => {
    wx.request({
      url: baseURL + url,
      data,
      method,
      timeout: 6000,
      success: (res) => {
        resolve(res.data) // 请求成功返回的数据
      },
      fail: (err) => {
        reject(err) // 请求失败返回的消息
      },
      complete() {
        wx.hideLoading() // 请求完做的事
      }
    })
  })
};

// 第二步：新建utils/api.js文件

// 引入封装的uni.request请求方法
import {
  request
} from './request.js';

// 获取轮播图数据的方法
export const getSwiperListAPI = () => {
  return request({
    url: '/banner',
    data: {
      type: 2
    }
  })
}

// 第三步：在app.js文件中通过import * as api from '/utils/api'将所有的api接口文件引入，在挂载到wx上

// 在main.js入口文件中引入封装的api
import * as api from '@/utils/api.js'

// 挂载在wx原型上
App({
  onLaunch: function () {
    // 小程序初始化时就将所有的api函数和封装的showToast函数挂载在wx上
    wx.$api = api
  },

})

// 接着就可以在.vue文件中直接引用，以后都不需要在引入接口文件
async getSwiperListFn() {
      const res = await this.api.getSwiperListAPI();
      console.log(res);
    }