uniapp封装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 请求前加载 最后在请求后隐藏
  uni.showLoading({
    title: "拼命加载中..."
  })
  // 3 Promise 
  return new Promise((resolve, reject) => {
    uni.request({
      url: baseURL + url,
      data,
      method,
      timeout: 6000,
      success: (res) => {
        resolve(res.data) // 请求成功返回的数据
      },
      fail: (err) => {
        reject(err) // 请求失败返回的消息
      },
      complete() {
        uni.hideLoading() // 请求完做的事
      }
    })
  })
};

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

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

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

第三步：使用，在.vue文件中引入封装的api，并且使用

<script>
import { getSwiperListAPI } from '@/utils/api.js';
export default {
  data() {
    return {};
  },
  onLoad() {
    this.getSwiperListFn();
  },
  methods: {
    // 获取轮播图的请求方法
    async getSwiperListFn() {
      const res = await getSwiperListAPI();
      console.log(res);
    }
  }
};
</script>

第三步：上面第三步也可以这样使用，在vue原型上挂在所有的api接口函数

在main.js入口文件中引入封装的api

import * as api from '@/utils/api.js'

挂载在vue原型上

const app = new Vue({
  ...App,
  beforeCreate() {
    Vue.prototype.api = api
  }
})

接着就可以在.vue文件中直接引用，以后都不需要在引入接口文件

async getSwiperListFn() {
      const res = await this.api.getSwiperListAPI();
      console.log(res);
    }