uni-app网络请求封装(优化完整版)

14 篇文章 1 订阅
13 篇文章 1 订阅

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

目录结构(根目录开始)

├── 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>
******

完结~
不懂的可留言~

  • 1
    点赞
  • 20
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 3
    评论
Uni-app 是一个跨平台的开发框架,可以用于同时开发多个平台的应用程序。在 Uni-app 中进行网络请求时,可以使用封装的方式来简化请求过程,提高代码的复用性和可维护性。 以下是一个简单的示例,展示了如何封装一个网络请求方法: ```javascript // api.js // 导入uni-app网络请求方法 import { request } from 'uni-app'; // 封装网络请求方法 export function get(url, data) { return request({ url: url, method: 'GET', data: data }); } export function post(url, data) { return request({ url: url, method: 'POST', data: data }); } ``` 在上述示例中,我们将 uni-app 提供的 `request` 方法进行了封装,创建了 `get` 和 `post` 方法,分别用于发起 GET 和 POST 请求。这样做的好处是可以统一处理请求的配置,例如设置请求头、处理响应等。 使用封装网络请求方法时,只需在需要发送请求的地方引入 `api.js` 文件,并调用相应的方法即可: ```javascript // 使用网络请求方法 import { get, post } from './api.js'; // 发起 GET 请求 get('/api/data', { id: 1 }) .then(response => { console.log(response.data); }) .catch(error => { console.error(error); }); // 发起 POST 请求 post('/api/login', { username: 'admin', password: '123456' }) .then(response => { console.log(response.data); }) .catch(error => { console.error(error); }); ``` 通过封装网络请求方法,我们可以更方便地调用和管理网络请求,提高开发效率。当需要修改请求配置时,只需要在封装的方法中进行修改,而不需要在每个请求的地方都修改一遍。同时,封装后的代码也更易读、易维护。
评论 3
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

土拨鼠的博客

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值