uni-app的uni.request()请求封装
<p>第一种:常见的直接发起uni.request()请求</p><div class="cnblogs_Highlighter">
<pre class="brush:javascript;gutter:true;"> 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
}
})
}
}
</pre>
</div>
<p> <img src="https://img2020.cnblogs.com/blog/1189352/202112/1189352-20211220165031789-354055366.webp"></p>
<p id="1639990231359"> 第二种：async修饰函数和await的使用，这个好像是es7的</p>
<div class="cnblogs_Highlighter">
<pre class="brush:javascript;gutter:true;"> 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)
}
}
</pre>
</div>
<p> </p>
<div>
<div>
<p><strong>第三种：es6异步promise封装这种发起请求接口，跟axios封装差不多</strong></p>
<p>一个项目有N多个接口，但前面的一段url基本是一致不变的（专业点说也就是前面那一段是域名，域名是不变的+后面一段是变化的，是接口地址）。</p>
</div>
<img src="https://img2020.cnblogs.com/blog/1189352/202112/1189352-20211220165139209-445060088.webp">
<p id="1639990298641">这时候我们就可以抽离封装了api了。</p>
<p><img src="https://img2020.cnblogs.com/blog/1189352/202112/1189352-20211220165200902-1472603967.webp"></p>
<p id="1639990320309"> </p>
api.js</div>
<div>
<div class="cnblogs_code">
<pre><span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)">功能：暴露接口</span>
<span style="color: rgba(0, 0, 255, 1)">const</span> BASE_URL = <span style="color: rgba(128, 0, 0, 1)">'</span><span style="color: rgba(128, 0, 0, 1)">https://api-hmugo-web.itheima.net</span><span style="color: rgba(128, 0, 0, 1)">'</span> <span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)">域名或选取所有接口不变的那一部分</span>
export <span style="color: rgba(0, 0, 255, 1)">const</span> myRequest = (options) => { <span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)">暴露一个function：myRequest，使用options接收页面传过来的参数</span>
<span style="color: rgba(0, 0, 255, 1)">return</span> <span style="color: rgba(0, 0, 255, 1)">new</span> Promise((resolve, reject) => { <span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)">异步封装接口，使用Promise处理异步请求</span>
uni.request({ <span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)">发送请求</span>
url: BASE_URL + options.url, <span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)">接收请求的API</span>
method: options.method || <span style="color: rgba(128, 0, 0, 1)">'</span><span style="color: rgba(128, 0, 0, 1)">GET</span><span style="color: rgba(128, 0, 0, 1)">'</span>, <span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)">接收请求的方式,如果不传默认为GET</span>
data: options.data || {}, <span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)">接收请求的data,不传默认为空</span>
success: (res) => { <span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)">数据获取成功</span>
<span style="color: rgba(0, 0, 255, 1)">if</span> (res.data.meta.status !== <span style="color: rgba(128, 0, 128, 1)">200</span>) { <span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)">因为200是返回成功的状态码，如果不等于200,则代表获取失败,</span>
<span style="color: rgba(0, 0, 255, 1)">return</span><span style="color: rgba(0, 0, 0, 1)"> uni.showToast({
title: </span><span style="color: rgba(128, 0, 0, 1)">"</span><span style="color: rgba(128, 0, 0, 1)">数据获取失败！</span><span style="color: rgba(128, 0, 0, 1)">"</span><span style="color: rgba(0, 0, 0, 1)">
})
}
resolve(res) </span><span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)">成功,将数据返回</span>
<span style="color: rgba(0, 0, 0, 1)"> },
fail: (err) </span>=> { <span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)">失败操作</span>
<span style="color: rgba(0, 0, 0, 1)"> uni.showToast({
title: </span><span style="color: rgba(128, 0, 0, 1)">"</span><span style="color: rgba(128, 0, 0, 1)">请求接口失败！</span><span style="color: rgba(128, 0, 0, 1)">"</span><span style="color: rgba(0, 0, 0, 1)">
})
reject(err)
}
})
})
}
</span><span style="color: rgba(0, 128, 0, 1)">/*</span><span style="color: rgba(0, 128, 0, 1)">下面代码不作用途：仅参照演示，模仿页面调用函数，将实参传进myRequest，也就是上面myRequest使用(options)接收。
myRequest({
url: '/getInfo',
method: 'POST',
})
</span><span style="color: rgba(0, 128, 0, 1)">*/</span></pre>
</div>
<p>在uni-app的main.js中将api.js挂载到全局，让所有页面都能接收</p>
<div class="cnblogs_Highlighter">
<pre class="brush:javascript;gutter:true;">import { myRequest } from './utils/api.js'
//挂载到全局，让所有页面都能接收
Vue.prototype.$myRequest = myRequest //挂载到Vue的原型上
</pre>
</div>
<p> 页面调用（index.vue想使用）：</p>
<div class="cnblogs_Highlighter">
<pre class="brush:javascript;gutter:true;"> 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 //保存值
}
}
</pre>
</div>
<p> </p>
<br><br>作者：似朝朝我心<br>链接：https://www.jianshu.com/p/8276ca362e5c<br>来源：简书<br>著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。</div>
<div> </div>
<h1 class="_1RuRku">uni-app封装一个request请求 案例二</h1>
<p>在上一篇文章里面，写到使用uni.request请求的方法<br>https://www.jianshu.com/p/bc62c9e1beed</p>
<div class="cnblogs_Highlighter">
<pre class="brush:javascript;gutter:true;">getList() {
uni.request({
url: "https://unidemo.dcloud.net.cn/api/news",
method: 'get',
dataType: 'json',
success: (res) => {
console.log(res.data);
this.productList = res.data;
},
});
},
</pre>
</div>
<p> </p>
<p>但是实际做项目的时候，会发现每个界面都要重复的写这些，看起来重复又啰嗦，心情就十分的不美丽了。</p>
<p>如果不封装那么我们会面临几个不方便的地方：</p>
<div>
<div>
<p>那么，该怎么使用uni-app封装一个request请求？步骤很简单，且听我一一道来。</p>
<p>注意：使用的例子，来自于这篇文章的相关的代码，修改封装请求是基于这个文章里面代码。进行相关的修改的。<br>
https://www.jianshu.com/p/bc62c9e1beed</p>
<p>步骤如下：</p>
<h5>1、项目下新建common文件夹，再创建request.js文件</h5>
</div>
<h4>2、打开request.js文件，开始写封装的代码</h4>
<p>思路很简单</p>
<p>定义域名：baseUrl；<br>定义方法：api；<br>通过promise异步请求，最后导出方法。</p>
<p>request.js参考代码如下</p>
<div class="cnblogs_Highlighter">
<pre class="brush:javascript;gutter:true;">const baseUrl = 'https://unidemo.dcloud.net.cn'
const request = (url = '', date = {}, type = 'GET', header = {
}) => {
return new Promise((resolve, reject) => {
uni.request({
method: type,
url: baseUrl + url,
data: date,
header: header,
dataType: 'json',
}).then((response) => {
setTimeout(function() {
uni.hideLoading();
}, 200);
let = response;
resolve(res.data);
}).catch(error => {
let = error;
reject(err)
})
});
}
export default request
</pre>
</div>
<p> </p>
<h5>3、在main.js全局注册</h5>
<div class="cnblogs_Highlighter">
<pre class="brush:javascript;gutter:true;">import request from 'common/request.js'
Vue.prototype.$request = request
</pre>
</div>
<p> </p>
<h5>4、页面调用</h5>
<div class="cnblogs_Highlighter">
<pre class="brush:javascript;gutter:true;">this.$request('/api/news', {
// 传参参数名：参数值,如果没有，就不需要传
}).then(res => {
// 打印调用成功回调
console.log(res)
})
</pre>
</div>
<p> 页面调用的index.vue</p>
<div class="cnblogs_Highlighter">
<pre class="brush:javascript;gutter:true;"><template>
<view>
<uni-list v-for="(item,index) in productList" :key="index">
<uni-list-item :title="item.author_name" :note="item.title"></uni-list-item>
</uni-list>
</view>
</template>
<script>
import uniList from "@/components/uni-list/uni-list.vue"
import uniListItem from "@/components/uni-list-item/uni-list-item.vue"
export default {
components: {
uniList,
uniListItem
},
data() {
return {
productList: [],
};
},
onLoad() {
this.getList();
},
methods: {
getList() {
this.$request('/api/news', {
// 传参参数名：参数值,如果没有，就不需要传
// "username": "john",
// "key": this.searchValue
}).then(res => {
// 打印调用成功回调
console.log(res)
this.productList = res;
})
},
}
}
</script>
<style>
</style>
</pre>
</div>
<p> </p>
</div>
<p> </p><br><br>
来源：https://www.cnblogs.com/yszr/p/15711646.html
頁:
[1]