企业级~uni-app网络请求封装_uniapp vue3的网络请求封装

目录结构(根目录开始)

├── api                        # 所有请求
│   └── user.js          	   # 用户请求api
├── store                      # 全局store管理
│   └── modules          	   # api模块
│   │   └── user.js            # 用户请求模块
│   └── index.js          	   # 状态管理初始化
├── utils                      # 全局公用方法
│   ├── auth.js                # 本地缓存
│   ├── env.js                 # 公共参数
│   └── request.js             # 网络请求中间件
└── main.js                    # 入口文件 加载组件 初始化等

1
2
3
4
5
6
7
8
9
10
11
12

下面是文档内容

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

// 引用网络请求中间件
import request from './../utils/request';
/**
 *    登陆请求
 */
export function login(data) {
	return request({
		url: '/user/login',
		method: 'POST',
		data
	})
}

1
2
3
4
5
6
7
8
9
10
11
12
13

store/modules/user.js(用户请求模块)

// 引用用户请求api
import {login} from '../../api/user';
import {setToken} from '../../utils/auth';

//下面我是示例的微信小程序的参数，可自行修改请求参数
const actions = {
	login({commit}, param) {
	    return new Promise((resolve, reject) => {
	        login({
				iv: param.iv,		// 请求参数(可自行修改)
				code: param.code	// 请求参数(可自行修改)
			}).then(response => {
				// 这里可以自己添加方法
				// 保存获取到的token到本地之类的
				// 必须在resolve之前执行
				setToken(response.token)	//将获取到的token保存到本地
	            resolve(response)
	        }).catch(error => {
	            console.log(error)
	        })
	    })
	}
};

export default {
    namespaced: true,
    actions
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29

store/index.js(状态管理初始化配置)

import Vue from 'vue'
import Vuex from 'vuex'
import user from './modules/user'

Vue.use(Vuex)
const store = new Vuex.Store({
	modules: {
		user
	}
});

export default store

1
2
3
4
5
6
7
8
9
10
11
12
13

utils/auth.js(本地缓存配置)

const TokenKey = 'token';

// 认证令牌
export function getToken() {
	return uni.getStorageSync(TokenKey)
}

export function setToken(token) {
	return uni.setStorageSync(TokenKey, token)
}

export function removeToken() {
	return uni.removeStorageSync(TokenKey)
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

utils/env.js(公共参数)

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

1
2
3
4
5
6
7
8
9
10
11

utils/request.js(网络请求中间件)

import {getToken,removeToken} from '../utils/auth';
import env from '../utils/env';

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

	return new Promise((resolved, rejected) => {
		options.success = (res) => {
			// 如果请求回来的状态码不是200则执行以下操作
			if (res.data.code !== 200) {
				// 非成功状态码弹窗
				uni.showToast({
					icon: 'none',
					duration: 3000,
					title: `${res.data.msg}`
				});
				// 登陆失效
				if (res.data.code === 403) {
					// 清除本地token
					removeToken()
					// 关闭所有页面返回到登录页
					uni.reLaunch({
						url: '/pages/login/login'
					})
				}
				// 返回错误信息
				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;

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54