vue2，3，小程序，uniapp的API请求封装统一管理请求接口
request.ts封装公共请求头。request封装公共请求头。request封装公共请求头。解构写法(个人不推荐)api存放api方法。
·
目录
微信小程序
request.js
// 引入env中的url
const baseUrl = "http://www.com"; // 测试地址
module.exports = {
/**
* url:请求的接口地址
* method:请求方式 GET,POST....
* data:要传递的参数
*/
request: (obj) => {
// console.log('这是我封装的ajax请求', baseUrl+obj.url);
//这里使用ES6的写法拼接的字符串
let _url = `${baseUrl}${obj.url}`;
// console.log("请求信息",obj);
return new Promise((resolve, reject) => {
wx.showLoading({
title: "正在加载",
});
wx.request({
url: _url,
data: obj.data,
method: obj.method,
header: {
"content-type": "application/x-www-form-urlencoded",
token: wx.getStorageSync("token"), //获取保存的token 项目请求接口需要token不需要就不写
},
success: (res) => {
// console.log('从接口获取到的数据', res);
resolve(res.data);
wx.hideLoading();
// wx.showToast({
// icon: "none",
// title: res.data.msg,
// });
},
fail() {
wx.hideLoading();
reject("接口请求错误，请检查");
},
});
});
},
};api.js页面
//引入封装的reuest请求
const {
request
} = require("./request.js");
//基于业务封装的接口
module.exports = {
// 获取openid
get_openidApi(data) {
return request({
url: "/api/wechat_notice/get_openid",
method: "GET",
method: "POST",
data,
});
},
// 登录操作
loginApi(data) {
return request({
url: "/api/index/login",
method: "POST",
data,
});
},
// 几天时间筛选
time_arrayApi() {
return request({
url: "/api/index/time_array",
method: "GET",
});
},
};页面使用
引入
注意：微信小程序里面默认不能使用绝对路径，要使用../../../这样引入，层级过多不方便，建议配置绝对路径
const {
loginApi,
get_openidApi
} = require('@/utils/api.js')请求
login() {
// 在登录事件里面请求这个接口
if (this.data.account && this.data.password) {
loginApi({
account: this.data.account,
password: this.data.password
}).then((res) => {
console.log(res);
if (res.code == 1) {
wx.setStorageSync('token', res.data.userinfo.token)
wx.setStorageSync('account', this.data.account)
wx.setStorageSync('password', this.data.password)
// 登录成功 跳转到首页
wx.switchTab({
url: '/pages/index/index',
})
} else {
Toast(res.msg);
}
})
} else {
Toast('请输入账号密码!');
}
},uniapp
request.js封装公共请求头
/*
@parms url 接口地址
@parms method 请求方式
@parms data 参数
*/
const BASE_URL = "http://192.168.1.2:9999" //公共请求头地址
const imgApi='http://kinggo.icu:7777/upload'// 上传接口
const request = (url, method, data) => {
let token = uni.getStorageSync('token') //token
// console.log("token:", token);
return new Promise((resolve, reject) => {
uni.request({
url: BASE_URL + url, // 开发者服务器接口地址
method: method,//请求方式
timeout: 60000, //请求超时时间
data: data, //请求的参数
header: { //设置请求的 header
'Content-Type': 'application/json',
'token': token, //自定义请求头信息token
},
success(res) { //对请求请求到的信息进行处理
console.log(res.data)
if (res.data.code == 200 || res.data.code == 500) {
resolve(res.data)
if (res.data.token) {//更新token
uni.setStorageSync("token", res.data.token)
}
} else if (res.data.code == 600) {
// uni.showToast({
// title: '身份验证过期,请重新登录',
// icon: 'none'
// });
uni.navigateTo({
url: "/pages/login/login"
})
} else {
// uni.showToast({
// title: '请求失败,请重新获取数据',
// icon: 'none'
// });
uni.navigateTo({
url: "/pages/login/login"
})
}
},
fail(err) {
reject(err)
}
})
})
}
export default {
request,imgApi //向外暴露request
}
api.js里面存放api方法
import request from './request.js' //引入request.js
const api = request
export default {
// 手机号或id加密码登录
getLogin: (username, password) => {
let user = api.request('/logins', 'POST', {
"po": username,
"pwd": password,
})
.then(res => {
// console.log(res); //正常的数据
return res
})
return user
},
// 验证码登录
codeLogin: (username, code) => {
let user = api.request('/LoginRegister', 'get', {
"po": username,
"code": code,
})
.then(res => {
// console.log(res); //正常的数据
return res
})
return user
}
}在页面引入方法
import Api from "@/API/api.js";
使用方法
async login() {
let user = await Api.codeLogin(this.username, this.password);
}vue2、3
request.js封装公共请求头
import axios from 'axios'
import {ElMessage} from 'element-plus'
export const request = (options) => {
return new Promise((resolve, reject) => {
// create an axios instance
const service = axios.create({
// baseURL: process.env.BASE_API, // api 的 base_url
baseURL: 'http://xxx.com',//测试地址
timeout: 80000 // request timeout
})
// request interceptor
service.interceptors.request.use(
config => {
if (sessionStorage.getItem('token')) {
config.headers['token'] = sessionStorage.getItem('token')
}
return config
},
error => {
// Do something with request error
Promise.reject(error)
}
)
// response interceptor
service.interceptors.response.use(
response => {
return response.data
},
error => {
if (error.response.data.code === 401) {
ElMessage.error('请登录后在操作')
setTimeout(function () {
sessionStorage.clear()
location.reload()
}, 1000)
}else if (error.response.data.code === 500){
ElMessage.error('服务器请求错误，请稍后再试')
}else{
ElMessage.error('系统错误，请联系管理员')
}
return Promise.reject(error)
}
)
// 请求处理
service(options)
.then((res) => {
resolve(res)
})
.catch((error) => {
reject(error)
})
})
}
export default requestapi.js文件
import {request} from '@/api/request'
// 登录操作
export function login(data) {
return request({
url: '/api/index/login',
method: 'POST',
data
})
}
// 获取数据
export function getBranchPosition() {
return request({
url: '/api/user/get_branch_position',
method: 'GET'
})
}页面引入
import {login, getBranchPosition} from "@/api";
请求接口发起请求
async function get_salary() {
let res = await getBranchPosition({
staff_id: staff_id.value,
month_id: time_id.value,
branch_id: branch_id.value
})
console.log(res.data);
royaltyData.value = res.data.staff
detailData.value = res.data.detail
}解构写法
async function get_salary() {
let staff_id= staff_id.value,
let month_id= time_id.value,
let branch_id= branch_id.value
let res = await getBranchPosition({
staff_id,
month_id,
branch_id
})
console.log(res.data);
royaltyData.value = res.data.staff
detailData.value = res.data.detail
}
为开发者提供学习成长、分享交流、生态实践、资源工具等服务，帮助开发者快速成长。
更多推荐
3
0- 0
已为社区贡献6条内容
所有评论(0)