第一種:常見的直接發(fā)起uni.request()請(qǐng)求

        onLoad() {//頁面加載時(shí)調(diào)用
            this.getSwipers()
        },
        methods: {
            //獲取輪播圖數(shù)據(jù)
            getSwipers(){
                uni.request({
                    url:"https://api-hmugo-web.itheima.net/api/public/v1/home/swiperdata",
                    method:"GET",
                    success: (res) => {
                        console.log(res)
                        if(res.data.meta.status !== 200){//如果請(qǐng)求失敗,不等于200狀態(tài)碼
                            return uni.showToast({
                                title:"請(qǐng)求失敗！"
                            })
                        }
                        //數(shù)據(jù)請(qǐng)求成功
                        this.swipers = res.data.message
                    }
                })
            }
        }

第二種：async修飾函數(shù)和await的使用，這個(gè)好像是es7的

        onLoad() {//頁面加載時(shí)調(diào)用
            this.getSwipers()
        },
        methods: {
            //獲取輪播圖數(shù)據(jù)
            async getSwipers(){
                const res = await uni.request({
                    url:"https://api-hmugo-web.itheima.net/api/public/v1/home/swiperdata",
                    method:"GET" //默認(rèn)是GET,可省
                })
                console.log(res)
            }
        }

第三種：es6異步promise封裝這種發(fā)起請(qǐng)求接口，跟axios封裝差不多

一個(gè)項(xiàng)目有N多個(gè)接口，但前面的一段url基本是一致不變的（專業(yè)點(diǎn)說也就是前面那一段是域名，域名是不變的+后面一段是變化的，是接口地址）。

這時(shí)候我們就可以抽離封裝了api了。

//功能：暴露接口

const BASE_URL = 'https://api-hmugo-web.itheima.net' //域名或選取所有接口不變的那一部分
export const myRequest = (options) => { //暴露一個(gè)function：myRequest，使用options接收頁面?zhèn)鬟^來的參數(shù)
        return new Promise((resolve, reject) => { //異步封裝接口，使用Promise處理異步請(qǐng)求
            uni.request({ //發(fā)送請(qǐng)求
                url: BASE_URL + options.url, //接收請(qǐng)求的API
                method: options.method || 'GET', //接收請(qǐng)求的方式,如果不傳默認(rèn)為GET
                data: options.data || {}, //接收請(qǐng)求的data,不傳默認(rèn)為空
                success: (res) => { //數(shù)據(jù)獲取成功
                    if (res.data.meta.status !== 200) { //因?yàn)?00是返回成功的狀態(tài)碼，如果不等于200,則代表獲取失敗,
                        return uni.showToast({
                            title: "數(shù)據(jù)獲取失?。?
                        })
                    }
                    resolve(res) //成功,將數(shù)據(jù)返回
                },
                fail: (err) => { //失敗操作
                    uni.showToast({
                        title: "請(qǐng)求接口失??！"
                    })
                    reject(err)
                }
            })
        })
    }

/*下面代碼不作用途：僅參照演示，模仿頁面調(diào)用函數(shù)，將實(shí)參傳進(jìn)myRequest，也就是上面myRequest使用(options)接收。
myRequest({
    url: '/getInfo',
    method: 'POST',
})
*/

在uni-app的main.js中將api.js掛載到全局，讓所有頁面都能接收

import { myRequest } from './utils/api.js'

//掛載到全局，讓所有頁面都能接收
Vue.prototype.$myRequest = myRequest //掛載到Vue的原型上

頁面調(diào)用（index.vue想使用）：

        data() {
            return {
                swipers: []
            }
        },
        onLoad() { //頁面加載時(shí)調(diào)用
            this.getSwipers()
        },
        methods: {
            //獲取輪播圖數(shù)據(jù)
            async getSwipers() {
                const res = await this.$myRequest({//調(diào)用封裝好的API請(qǐng)求函數(shù)
                    url:'/api/public/v1/home/swiperdata',//把接口傳過去
                    method:'GET',
                })
                console.log(res)
                this.swipers = res.data.message //保存值
            }
        }

效果：