uni-app的uni.request()请求封装

直接发起uni.request()请求

onLoad() {//页面加载时调用
    this.getSwipers()
},
methods: {
    //获取轮播图数据
    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){//如果请求失败,不等于200状态码
                    return uni.showToast({
                        title:"请求失败！"
                    })
                }
                //数据请求成功
                this.swipers = res.data.message
            }
        })
    }
}

async修饰函数和await的使用

onLoad() {//页面加载时调用
    this.getSwipers()
},
methods: {
    //获取轮播图数据
    async getSwipers(){
        const res = await uni.request({
            url:"https://api-hmugo-web.itheima.net/api/public/v1/home/swiperdata",
            method:"GET" //默认是GET,可省
        })
        console.log(res)
    }
}

es6异步promise封装这种发起请求接口

一个项目有N多个接口，但前面的一段url基本是一致不变的（专业点说也就是前面那一段是域名，域名是不变的+后面一段是变化的，是接口地址）。

可以抽离封装了api了。

api.js

bash
//功能：暴露接口

const BASE_URL = 'https://api-hmugo-web.itheima.net' //域名或选取所有接口不变的那一部分
export const myRequest = (options) => { //暴露一个function：myRequest，使用options接收页面传过来的参数
        return new Promise((resolve, reject) => { //异步封装接口，使用Promise处理异步请求
            uni.request({ //发送请求
                url: BASE_URL + options.url, //接收请求的API
                method: options.method || 'GET', //接收请求的方式,如果不传默认为GET
                data: options.data || {}, //接收请求的data,不传默认为空
                success: (res) => { //数据获取成功
                    if (res.data.meta.status !== 200) { //因为200是返回成功的状态码，如果不等于200,则代表获取失败,
                        return uni.showToast({
                            title: "数据获取失败！"
                        })
                    }
                    resolve(res) //成功,将数据返回
                },
                fail: (err) => { //失败操作
                    uni.showToast({
                        title: "请求接口失败！"
                    })
                    reject(err)
                }
            })
        })
    }

/*下面代码不作用途：仅参照演示，模仿页面调用函数，将实参传进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的原型上

页面调用（index.vue想使用）：

data() {
    return {
        swipers: []
    }
},
onLoad() { //页面加载时调用
    this.getSwipers()
},
methods: {
    //获取轮播图数据
    async getSwipers() {
        const res = await this.$myRequest({//调用封装好的API请求函数
            url:'/api/public/v1/home/swiperdata',//把接口传过去
            method:'GET',
        })
        console.log(res)
        this.swipers = res.data.message //保存值
    }
}