使用uniapp開發小程序中封裝請求並使用promise處理

使用uniapp開發小程序中封裝請求並使用promise處理

1.在src中建立一個工具文件夾utils，在utils下建立請求封裝文件request.js：

2.在request.js中封裝本身的小程序請求,如：

export default function(config) {
    // 從參數中解構 baseURL參數
    const { baseURL } = config;

    // 真正的vue插件
    return function(Vue) {

        // 添加全局方法
        Vue.prototype.http = async function(params) {
            // 請求參數
            // console.log(params);

            const { url, method, data } = params;

            // 真正的請求發出
            const res = await uni.request({
                url: baseURL + '' + url,
                method,
                data,
            });

            return res[1].data;
        };
    };
}

這裏因爲小程序中promise返回的是一個數組，數組索引爲0的是錯誤信息，爲null則沒有錯誤，數組索引爲1的項的data則是咱們想要得到的放回數據，因此直接return出去

3.將咱們本身封裝的request請求引入到main.js中，並使用插件掛載的方式掛載

import Vue from 'vue';
import App from './App';

// 導入封裝的request接口
import request from '@/utils/request';

Vue.config.productionTip = false;

App.mpType = 'app';

// 插件
const plugin = request({
    baseURL: 'https://www.uinav.com',
});
Vue.use(plugin);

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

4.咱們在main.js中將請求http掛載到了vue的原型上，因此頁面中能夠直接經過this.http調用，如：

async getFloorList() {
      const res = await this.http({
        url: "/api/public/v1/home/floordata",
        method: "get"
      });
      // console.log(res);
      this.floorList = res.message;
    }
  },

async getNavList() {
      const res = await this.http({
        url: "/api/public/v1/home/catitems",
        method: "get"
      });

      this.categoryList = res.message;
    },