第一步：新建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);
    }