很久之前写的一个请求封装,现在看来还是代码量太大了,现在做一个优化,简单一点的。
话不多说直接开始
目录结构(根目录开始)
├── 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>
******
完结~
不懂的可留言~