第一种:常见的直接发起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的使用,这个好像是es7的
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封装这种发起请求接口,跟axios封装差不多
一个项目有N多个接口,但前面的一段url基本是一致不变的(专业点说也就是前面那一段是域名,域名是不变的+后面一段是变化的,是接口地址)。
这时候我们就可以抽离封装了api了。
api.js
//功能:暴露接口
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 //保存值
}
}
效果: