一、uni-app中调取接口的三种方式
1、uni.request({})
uni.request({
url:'/api/getIndexCarousel.jsp',
method:'get',
success:res=>{
console.log(res.data);
this.carouselData = res.data
}
})
2、uni.request({}).then()
uni.request({
url:'/api/getIndexCarousel.jsp',
method:'get',
}).then((result)=>{
let [error,res] = result;
//result将返回一个数组[error,{NativeData}]
//NativeData:调取接口后返回的原生数据
if(res.statusCode === 200){
this.carouselData = res.data
}
if(res.statusCode === 404){
console.log('请求的接口没有找到');
}
})
3、async/await
async:用在函数定义的前面
async request(){ //函数体;}
await:用在标明了async关键字的函数内部,异步操作的前面。
onLoad() {
this.request();
},
methods: {
async request(){
let result = await uni.request({
url:'/api/getIndexCarousel.jsp'
})
console.log(result)
let [err,res] = result;
if(res.statusCode === 200){
this.carouselData = res.data;
}
}
}
二、封装uni.request();
1、创建一个对象,将该对象挂在Vue的原型下
新建@/common/request.js
文件
初步写法(仅供参考):
export default {
request(options){
uni.request({
...options,
success:res=>{
console.log(res)
}
})
},
get(url,data={},options={}){
options.url=url,
options.data=data,
options.method='get',
this.request(options)
},
post(url,data={},options={}){
options.url=url,
options.data=data,
options.method='post',
this.request(options)
}
}
二次更改:
export default{
//封装uni.request():
request(options){
return new Promise((resolve,reject)=>{
//书写异步操作的代码
uni.request({
...options,
success:res=>{
if(options.native){
resolve(res) //调取接口后返回的原生数据
}
if(res.statusCode === 200){
resolve(res.data) //异步操作执行成功
}else{
console.log('请求的接口没有找到');
reject(res) //异步操作执行失败
}
}
})
})
},
get(url,data={},options={}){
options.url=url;
options.data=data;
options.method='get';
return this.request(options)
},
post(url,data={},options={}){
options.url=url;
options.data=data;
options.method='post';
return this.request(options)
}
}
2、进入main.js文件
import request from '@/common/request.js';
Vue.prototype.$Z = request;
例:在任意文件中书写下列代码可以调用。this.$Z.get();
3、在页面中调用
//封装uni.request():
this.$Z.get('/api/getIndexCarousel.jsp',{},{
native:false
}).then(res=>{
//异步操作成功
console.log(res)
}).catch(res=>{
//异步操作失败
console.log(res)
}).finally(res=>{
//异步操作完成
});