记录 uniapp 全局请求的封装

记录 uniapp 全局请求的封装

为什么要封装全局请求，为了方便我们统一处理后端返回的错误码，处理一些共同的逻辑。

request.js

// 引入请求的基础url
import baseurl from './config.js';
// 全局请求封装
export default (url, method, params) => {
	const token = uni.getStorageSync('token');
	// 处理 token 不存在时的逻辑
	// ...

	// 显示加载
	uni.showLoading({
		title: "加载中"
	});
	uni.showNavigationBarLoading();

	return new Promise((resolve, reject) => {
		// 发起请求
		uni.request({
			url: baseurl + url,
			method: method,
			header: {
				'content-type': 'application/json',
				'Access-Token': token
			},
			data: {
				...params
			},
			success(res) {
				const { 解构出想要的数据 } = res.data;
				// 可以统一处理后端返回的错误码，例如 token 过期等
				// ...

				// 无错误码，resolve成功的数据
				resolve(res.data);
			},
			fail(err) {
				if (err.errMsg.indexOf('timeout') > -1) reject({ errMsg: '请求超时！' })
				else if (err.errMsg.indexOf('request:fail') > -1) reject({ errMsg: '网络异常！' })
				else reject(err)
			},
			complete() {
				// 加载状态 -- 隐藏
				uni.hideLoading();
				uni.hideNavigationBarLoading();
			}
		});
	});
};

api.js

import request from "./request.js";

export function login(params) {
	return request("auth/login", "POST", params);
}

// 其他请求...

页面使用: 测试 => Login.vue

import { login } from '@/utils/api.js';

export default {
    data() {
        return {
            form: {
                password: '',
                username: ''
            }
        }
    },
    methods: {
	    async submit() {
			// 处理一些表单数据验证
			// 验证通过，发起请求
			const { 解构出想要的数据 } = await login(this.form);
			// 处理登录逻辑
	    }
	}
}

记: 封装上传文件

思路和封装全局请求差不多

import baseurl from './config.js';
// 全局上传请求封装
export default (filePath) => {
	const token = uni.getStorageSync('token');
	uni.showNavigationBarLoading();

	return new Promise((resolve, reject) => {
		uni.uploadFile({
			url: baseurl + 上传文件的后端地址,
			header: {
				'Access-Token': token
			},
			name: 'file',
			filePath,
			success(res) {
				const { 解构出想要的数据 } = res.data;
				// 统一处理后端返回的错误码
				resolve(res.data);
			},
			fail(err) {
				if (err.errMsg.indexOf('timeout') > -1) reject({ errMsg: '请求超时！' })
				else if (err.errMsg.indexOf('request:fail') > -1) reject({ errMsg: '网络异常！' })
				else reject(err);
			},
			complete() {
				uni.hideNavigationBarLoading();
			}
		});
	});
};