#原生态的请求接口写法
methods(){
getSwiperList() { //方法名
uni.request({
url: "你的数据接口",
success: (res) => { //如果成功了
// 打印数据
console.log(res);
// 如果请求成功，就把数据转存起来，方便页面使用
this.swipeList = res.data.message;
},
fail: (res) => {
console.log('请求失败');
}
})
}
}
console.log(res);中，res是请求接口返回的所有数据。你需要在res中，找到你所需的数据，你可以在控制台中观测到类似以下的数据结构
在上面的图中，我们可以看到，我们想要的数据在data下的message的里面（这是返回的数据），那我们就只需要按着数据结构写，就可以把接口数据赋值给this.swiperList了。
发起一个网络请求时，如果请求成功，这个API通常会提供一个响应对象作为回调函数的参数。在这个例子中，这个参数被命名为 res。
所以，你现在能理解这行代码的意思了吗？
this.swipeList = res.data.message; 在这里面，this.swiperList是在Vue组件的data函数中定义的一个属性或数据项。用来存储请求接口获得的数据。
如下：
data() {
return {
swipeList: [], // 轮播图数据
};
},请求到数据后，你得调用 getSwiperList()方法（为了得到数据后，在页面渲染），但我们一般不在页面代码中调用，根据项目的实际功能，我需要页面加载时后就调用getgetSwiperList()方法，所以，我们可以把这个方法放到onLoad()函数中，让它帮我们使用这个方法。
如下：
onLoad() {
this.getSwiperList(); // 获取轮播图数据
},然后，我们就可以到页面上，渲染swiper的数据了。
原生态完整代码
下面是完整代码参考：
<template>
<view>
<view class="swiper-box">
<swiper :indicator-dots="true" :autoplay="true" :interval="3000" :duration="1000">
<swiper-item class="swiper" v-for="(item,index) of swipeList" :key="index">
<navigator :url="item.navigator_url">
<!-- mode宽不变，高自动变化 -->
<image :src="item.image_src" mode="widthFix"></image>
</navigator>
</swiper-item>
</swiper>
</view>
</view>
</template>
<script>
export default {
data() {
return {
swipeList: [], // 轮播图数据
};
},
onLoad() {
this.getSwiperList(); // 获取轮播图数据
},
methods: {
// 轮播图请求（没有封装的)
getSwiperList() {
uni.request({
url: "请求接口",
success: (res) => {
// 打印数据
console.log(res);
// 把数据存起来
this.swipeList = res.data.message;
},
fail: (res) => {
console.log('请求失败');
}
})
},
}
}
</script>
#接口的Promise写法
在开始之前，我们先思考，我们为什么不直接用原生态写法，而选择Promise写法呢？原因就在于，原生态写法太过于繁琐了，假如我们一个项目有多个接口，那我们每一个接口，就要写一个uni.request({})方法，而每个方法就要包含url、data、method、header，等等，这样代码很明显就变得多而杂，而用了Promise写法，在编写代码时，我们就可以使用async和await写法来简化请求接口代码了。
在写Promise前，我们要先创建一个.js文件 ，来放我们请求接口必写的和会用到的东西。
创建.js文件
我们先新建一个目录
给这个目录取名（取什么名都可以）
然后在shop-js目录下建.js文件
设置.js文件
这之后就可以获得一个空白的.js文件了
在这里面，我们就可以开始写param写法的请求接口了
Promise方法写请求接口
我们分段来看
export default (param) => {}
export default (param) => {}这里的param英语翻译是参数的意思，它的作用也是当作一个请求参数，它是一个对象类型的请求参数
然后在里面写上请求接口要用上的东西
export default (param) => {
var url = param.url,
// 若在使用的那边写有method，那么就用写有的那个，没写有就默认get
method = param.method||'get', //默认为Get
header =param.header|| {},//请求头
data = param.data || {}, //向服务器接口发请求时发送的数据 ,对象类型
token = param.token || "",
hideLoading = param.hideLoading || false; //隐藏加载动画
}在uni-app官方网站，请求接口的方法，会有几个常用的参数名（原生态写法）
url 、data 、method 、header
//官网的代码
uni.request({
url: 'https://www.example.com/request', //仅为示例，并非真实接口地址。
data: {
text: 'uni.request'
},
method："GET",
header: {
'custom-header': 'hello' //自定义请求头信息
},
success: (res) => {
console.log(res.data);
this.text = 'request success';
}
});解释一下这里的代码：
export default (param) => {
var url = param.url,
// 若在使用的那边写有method，那么就用写有的那个，没写有就默认get
method = param.method||'get', //默认为Get
//这里的请求头后面有些，如果没有请求头，就默认为空对象{}
header =param.header|| {},//请求头
\\以下同上
data = param.data || {}, //向服务器接口发请求时发送的数据 ,对象类型
token = param.token || "",
hideLoading = param.hideLoading || false; //隐藏加载动画
}
url
因为我这个项目是多个接口，接口是一体的，所以我需要拼接url，这里面 const baseUrl = 你接口的公共部分
而下面的requestUrl =你接口的公共部分 + 你在页面里写的url的独特部分（就是 url = param.url)，
export default (param) => {
var url = param.url,
// 若在使用的那边写有method，那么就用写有的那个，没写有就默认get
method = param.method||'get', //默认为Get
header =param.header|| {},//请求头
data = param.data || {}, //向服务器接口发请求时发送的数据 ,对象类型
token = param.token || "",
hideLoading = param.hideLoading || false; //隐藏加载动画
//拼接完整请求地址
const baseUrl = 'https://api-接口公共部分'
var requestUrl = baseUrl + url;
}什么是接口公共部分？
以这个举例 url: 'https://www.example.com/request', //仅为示例，并非真实接口地址。
https://www.example.com/request这是公共部分，而完整的接口可能是这样的
接口1：https://www.example.com/request/sreach //搜索接口
接口2：https://www.example.com/request/detail //详情接口
method & header
然后是method，请求头根据method的不同 ，而有不同的请求头
// param：对象类型，请求参数
export default (param) => {
// uni.request(OBJECT): 参考官网 OBJECT：请求参数
var url = param.url,
// 若在使用的那边写有method，那么就用写有的那个，没写有就默认get
method = param.method||'get', //默认为Get
header =param.header|| {},//请求头
data = param.data || {}, //向服务器接口发请求时发送的数据 ,对象类型
token = param.token || "",
hideLoading = param.hideLoading || false; //隐藏加载动画
//拼接完整请求地址
const baseUrl = 'https://api-接口公共部分'
var requestUrl = baseUrl + url;
//请求方式:GET或POST
//POST方式需配置为： header: {'content-type' : "application/x-www-form-urlencoded"},)
if (method) {
method = method.toUpperCase(); //转换为大写
if (method == "POST") {
header = {
'content-type': "application/x-www-form-urlencoded"
};
} else {
header = {
'content-type': "application/json"
};
}
}
}这里的加载动画就不解释了，不是重点
//加载圈
if (!hideLoading) {
//显示加载动画
uni.showLoading({
title: '加载中...'
});
}返回promise
前面是准备工作的准备工作，接下来只要一个萝卜一个坑，把前面设置好的url,data,method...放进uni.request({ }）就好了，加载动画这个可写可不写。后面就是判断，请求接口是否成功的代码，一般请求接口用，code判断:200就是成功,不等于200错误（请求接口失败），uni.showToast方法是用于输出信息的。
若请求成功，就
// 将结果抛出
resolve(res.data)
return new Promise((resolve, reject) => {
// 发请求
uni.request({
url: requestUrl,
data: data,
method: method,
header: header,
success: (res) => {
uni.hideLoading();//隐藏加载动画
// console.log(res)
// 判断 请求api 格式是否正确
if (res.statusCode && res.statusCode != 200) {
uni.showToast({
title: "api错误" + res.errMsg,
icon: 'none'
});
return;
}
// code判断:200成功,不等于200错误
if (res.data.meta.status) {
if (res.data.meta.status != '200') {
uni.showToast({
title: "" + res.data.meta.msg,
icon: 'none'
});
return;
}
}
// 将结果抛出
resolve(res.data)
},
//请求失败
fail: (e) => {
uni.hideLoading();//隐藏加载动画
// console.log(e)
uni.showToast({
title: "" + e.data.msg,
icon: 'none'
});
reject(e.data);
}
})
})完整的.js文件
// param：对象类型，请求参数
export default (param) => {
// uni.request(OBJECT): 参考官网 OBJECT：请求参数
var url = param.url,
// 若在使用的那边写有method，那么就用写有的那个，没写有就默认get
method = param.method||'get', //默认为Get
header =param.header|| {},//请求头
data = param.data || {}, //向服务器接口发请求时发送的数据 ,对象类型
token = param.token || "",
hideLoading = param.hideLoading || false; //隐藏加载动画
//拼接完整请求地址
const baseUrl = 'https:你接口的公共部分'
var requestUrl = baseUrl + url;
//请求方式:GET或POST
//POST方式需配置为： header: {'content-type' : "application/x-www-form-urlencoded"},)
if (method) {
method = method.toUpperCase(); //转换为大写
if (method == "POST") {
header = {
'content-type': "application/x-www-form-urlencoded"
};
} else {
header = {
'content-type': "application/json"
};
}
}
//加载圈
if (!hideLoading) {
//显示加载动画
uni.showLoading({
title: '加载中...'
});
}
// 返回promise
return new Promise((resolve, reject) => {
// 发请求
uni.request({
url: requestUrl,
data: data,
method: method,
header: header,
success: (res) => {
uni.hideLoading();//隐藏加载动画
// console.log(res)
// 判断 请求api 格式是否正确
if (res.statusCode && res.statusCode != 200) {
uni.showToast({
title: "api错误" + res.errMsg,
icon: 'none'
});
return;
}
// code判断:200成功,不等于200错误
if (res.data.meta.status) {
if (res.data.meta.status != '200') {
uni.showToast({
title: "" + res.data.meta.msg,
icon: 'none'
});
return;
}
}
// 将结果抛出
resolve(res.data)
},
//请求失败
fail: (e) => {
uni.hideLoading();//隐藏加载动画
// console.log(e)
uni.showToast({
title: "" + e.data.msg,
icon: 'none'
});
reject(e.data);
}
})
})
}
引入.js 使用.js
写完js文件后，我们要用它呀，怎么用呢？在全局文件main.js中引入它，这样整个项目都可以使用它了
这里做了几件事，
1.从'shop-js/shop.js'模块中导入了shop
2.使用Vue.prototype.$Shop = shop ；将shop附加到Vue的原型上，并命名为$Shop
然后，你就可以在Vue的任何组件中（或页面），通过this.$Shop来访问shop对象的属性和方法。
页面使用.js
那么页面怎么使用.js呢？
通过上面我们知道，通过this.$Shop来访问，但我们该怎么写在页面上呢？用async 、 await方法
如下：
<template>
<view>
<view class="swiper-box">
<swiper :indicator-dots="true" :autoplay="true" :interval="3000" :duration="1000">
<swiper-item class="swiper" v-for="(item,index) of swipeList" :key="index">
<navigator :url="item.navigator_url">
<!-- mode宽不变，高自动变化 -->
<image :src="item.image_src" mode="widthFix"></image>
</navigator>
</swiper-item>
</swiper>
</view>
</view>
</template>
<script>
export default {
data() {
return {
swipeList: [], // 轮播图数据
};
},
onLoad() {
this.getData();//获取全部数据
//this.getSwiperList(); // 获取轮播图数据
},
methods: {
// 轮播图请求（没有封装的)
// getSwiperList() {
// uni.request({
// url: "请求接口",
// success: (res) => {
// // 打印数据
// console.log(res);
// // 把数据存起来
// this.swipeList = res.data.message;
// },
// fail: (res) => {
// console.log('请求失败');
// }
// })
// },
async getData(){
const res1=await this.$Shop({
url:"接口的独特部分"
})
//打印数据
console.log(res1);
//转存数据
this.swipeList=res1.message;
}
}
}
</script>通过原生态的方法和Promise方法的对比，就可以看出代码的简洁了。
#总结
Promise接口写法的步骤：
1.创建目录和.js文件
2.在.js文件中写入接口请求必要的东西
3.在main.js中引入.js文件
4.页面通过async方法和this.$Shop来使用.js文件
最后，在这里放个uni-app的官网，方便学习uni-app的uni.request
扫一扫
4824
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
