很久之前写的一个请求封装,现在看来还是代码量太大了,现在做一个优化,简单一点的。
话不多说直接开始

目录结构(根目录开始)

├── api                        # 所有请求
│   └── user.js          	   # 用户请求api
├── utils                      # 全局公用方法
│   ├── env.js                 # 公共参数
└── └── request.js             # 网络请求中间件

下面是文档内容

utils/env.js(作为公共参数,像请求地址什么的)

"use strict";
// 变量可自行添加修改
export default { //存放变量的容器
	appid: '****',
	baseUrl: 'http://**.***.***.***'
}
/**
 * 	appid : 		小程序appid
 *  baseUrl : 		服务端域名
 */

utils/request.js(网络请求中间件,这个是核心,也叫拦截器)

import env from '@/utils/env';

function service(options = {}) {
	options.url = `${env.baseUrl}${options.url}`;
	// 判断本地是否存在token,如果存在则带上请求头
	let token = uni.getStorageSync('token')
	options.header = {
		'content-type': 'application/json',
		'Authorization': `Bearer ${token || false}`	// 这里是token(可自行修改)
	};

	// resolved是返回成功数据,rejected返回错误数据
	return new Promise((resolved, rejected) => {
		options.success = (res) => {
			// 如果请求回来的状态码不是200则执行以下操作
			if (res.data.code !== 200) {
				// 非成功状态码弹窗
				uni.showToast({
					icon: 'none',
					duration: 3000,
					title: `${res.data.msg}`
				});
				// 这里可以做一些状态码判断以及操作
				// 返回错误信息
				rejected(res)
			} else {
				// 请求回来的状态码为200则返回内容
				resolved(res.data.data)
			}
		};
		options.fail = (err) => {
			// 请求失败弹窗
			uni.showToast({
				icon: 'none',
				duration: 3000,
				title: '服务器错误,请稍后再试'
			});
			rejected(err);
		};
		uni.request(options);
	});
}

export default service;

api/user.js(用户请求api)

// 引用网络请求中间件
import request from '@/utils/request';

/**
 *    登陆请求
 */
export function wxAuth(data) {
	return request({
		url: '/user/login',
		method: 'POST',
		data
	})
}

/**
 *    获取用户信息
 */
export function info(data) {
	return request({
		url: '/user/info',
		method: 'GET',
		data
	})
}

页面上使用demo(login.vue)

<template>
	<button @click="onLogin">微信授权</button>
</template>

<script>
import { wxAuth } from "@/api/user";
export default {
	methods: {
		async onLogin() {
			try {
				let { code } = await wx.login()
				let res = await wxAuth({
					code: code
				})
				// 服务器请求结果
				console.log(res)
			} catch (err) {
				uni.showModal({
					title: `登录失败`
				})
      		}
		}
	}
}
</script>
******

完结~
不懂的可留言~

Logo

为开发者提供学习成长、分享交流、生态实践、资源工具等服务,帮助开发者快速成长。

更多推荐