uni-app中调取接口的三种方式
对于 POST 方法且 header[‘content-type’] 为 application/x-www-form-urlencoded 的数据,会将数据转换为 query string。例如 { name: ‘name’, age: 18 } 转换后的结果是 name=name&age=18。对于 POST 方法且 header[‘content-type’] 为 application/j
·
uni-app中调取接口的三种方式与封装uni.request()
一、uni-app中调取接口的三种方式
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();
新建@/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();
//封装uni.request():
this.$Z.get('/api/getIndexCarousel.jsp',{},{
native:false
}).then(res=>{
//异步操作成功
console.log(res)
}).catch(res=>{
//异步操作失败
console.log(res)
}).finally(res=>{
//异步操作完成
});
uniapp的网络请求方法
CODE
uni.request({
url: 'https://www.example.com/request', //仅为示例,并非真实接口地址。
data: {
name: 'name',
age: 18
},
header: {
'custom-header': 'hello' //自定义请求头信息
},
success: function (res) {
console.log(res.data);
}
});
uniapp网络请求的get和post
对于 GET 方法,会将数据转换为 query string。例如 { name: ‘name’, age: 18 } 转换后的结果是 name=name&age=18。
对于 POST 方法且 header[‘content-type’] 为 application/json 的数据,会进行 JSON 序列化。
对于 POST 方法且 header[‘content-type’] 为 application/x-www-form-urlencoded 的数据,会将数据转换为 query string。
请求的 header 中 content-type 默认为 application/json
注意 post请求必须加header[‘content-type’]
更多推荐
所有评论(0)