如何在uniapp中封装request,像Vue Axios一样调用API接口
vue axios请求示例
funname({ param: param_value }).then((res) => { if (res.success) { /** * 成功后业务处理 */ console.log(res) } else { /** * 失败后业务处理 */ console.log(res) } })
以上是在vue中使用axios封装的request请求,使用起来非常优雅,那么我们在uniapp中能不能将uni.request封装成这样使用呢,请继续往下看
uni.request封装实现步骤
1、新建项目XXX略过
2、在项目的任意目录(这里建议统一放在util文件夹)创建request.js
3、在request中编写以下代码,实现了请求头加token以及配合后端实现token过期能力
// 引入vue原型,以调用挂载在原型上的实例 import Vue from 'vue' const vm = new Vue() /* 开发 */ const baseUrl = 'http://127.0.0.1:8080/api/' const request = (config) => { // 请求头加入authToken config.header = { authToken: vm.$commonUtil.cache('authToken', null) } // 处理 apiUrl config.url = baseUrl + config.url // 处理api请求参数 if (!config.data) { config.data = {} } let promise = new Promise(function(resolve, reject) { uni.request(config).then(res => { // 异常 if (res[0]) { reject({ message: "网络超时" }); } else { // token过期,清理前端缓存,便于任意页面发起重新登录 if(res.data.code === 401) { uni.clearStorage() } // 返回后端数据 resolve(res.data) } }).catch(error => { reject(error) }) }) return promise } export default request
解释:
我们为了在js中调用vue原型实例中挂在的节点,故使用如下方式引入了vue原型// 引入vue原型,以调用挂载在原型上的实例 import Vue from 'vue' const vm = new Vue()
4、调用示例,为每个业务建立单独的api.js,在其中引入我们封装的request.js
import request from '@/util/request.js' // 抖音视频去水印 export function getDouYin (data) { return request({ method: "GET", // 请求方式 url: '/miniPrograms/videoProcess', // 请求url data: data // 参数 }) }
5、在具体画面中,引入建立的api
<template> <view class="content"> <!-- 主体内容 --> <view class="func-body"> <view class="content-group link-content"> <uni-easyinput v-model="url" focus placeholder="在这里输入视频分享链接"></uni-easyinput> <view> <button style="height: 37px;line-height: 37px;margin-left: -1px;" type="primary" size="mini" @tap="extractVideo">提取</button> </view> </view> </view> </view> </template> <script> import { getDouYin } from '@/api/video.js' export default { data() { return { url: '', video_src: '', video_title: '' } }, onReady: function(res) { }, methods: { extractVideo() { getDouYin({ videoUrl: this.url }).then((res) => { console.log(res) if(res.success) { that.video_src = res.data.videoList[0] that.video_title = res.data.videoTitle } else { uni.hideLoading() that.$refs.toast.show({ type: 'error', message: res.msg }) } }) } } } </script>
总结:
通过以上步骤,我们就可以在项目中像vue axios一样优雅的请求后端API了,我的小程序中就使用了这样的的封装方式,请大家参考