简单封装uni小程序请求

最近在复习uni小程序，没事干记录一下自己的学习点滴。

目录：src --> main.js

import Vue from 'vue'
import App from './App'
// 引用封装的请求
import request from '@/utils/request';

Vue.config.productionTip = false;

App.mpType = 'app';

const plugin = request({
  // 公共请求路径
  baseURL: 'https://xxx.xxx.com'
});
// 挂载插件
Vue.use(plugin);

const app = new Vue({
  ...App
})
app.$mount()

目录：utils --> request.js

export default function (config) {
    const {baseURL} = config;
    return function (Vue) {  
      Vue.prototype.http = async function (params) {
        const {url, method, data} = params;
        // 显示加载框
        uni.showLoading({title: '正在加载...'});
        const res = await uni.request({
          url: baseURL + url,
          method,
          data
        })
        // 关闭加载框
        uni.hideLoading();
        // 响应结果
        return res[1].data;
      }
    }
}

在页面中使用：

  methods:{
    async getBannerList(){
    	// 调用request.js 目录 挂载在Vue 原型上的 http 方法 
        const {message} = await this.http({
          url: '/api/xxxx/xxx/',
          // 参数
          data:{
            id:参数
          },
          // 请求方式
          method:'POST'
        });
        // 打印结果
        console.log(message)
    },
  },