如何在uniapp中封装request，像Vue Axios一样调用API接口

如何在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了，我的小程序中就使用了这样的的封装方式，请大家参考