Three ways to call interface in uni-app and encapsulation uni.request()
1. Three ways to call the interface in 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;
}
}
}
2. Encapsulate uni.request();
1. Create an object and hang the object under the prototype of Vue
new @/common/request.js
file
Preliminary writing (for reference only):
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)
}
}
Secondary change:
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. Enter the main.js file
import request from '@/common/request.js';
Vue.prototype.$Z = request;
Example: Writing the following code in any file can be called.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 's network request method
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);
}
});
get and post of uniapp network request
For the GET method, the data is converted to a query string. For example { name: 'name', age: 18 } The converted result is name=name&age=18.
For data with POST method and header['content-type'] is application/json, JSON serialization will be performed.
For POST method and header['content-type'] is application/x-www-form-urlencoded data, the data will be converted into query string.
The content-type in the header of the request defaults to application/json
Note that the post request must add header['content-type']