在看本篇文章之前，请先至少学会独立完成vue2项目
首先配置request.js
const url_all = {'DEV': 'http://localhost:8888', // 开发// 生产 'PRO': 'http://111.111.111.111:8080',
}let BASEURL = url_all['DEV'] // 调整当前环境/** 全局请求封装* @param path 请求路径* @param method 请求类型(GET/POST/DELETE等)* @oaram data 请求体数据* @param loading 请求未完成是是否显示加载中，默认为true*/
export default (path, method, data = {}, loading = true) => {// 获取存储tokenconst token = uni.getStorageSync("token");if (loading) {uni.showLoading({title: "加载中",mask: true});};//根据token进行调用函数if (token != '') {return tokenRequest(path, method, data, loading, token)} else {return noTokenRequest(path, method, data, loading)}
};// 无token时发送请求函数
function noTokenRequest(path, method, data, loading) {return new Promise((resolve, reject) => {uni.request({url: BASEURL + path,method: method,data,success(response) {// console.log('%c响应拦截：', ' background:green', response);/* if (response.data.code === 3001) {// logout()} *//* if (response.data.code !== 20) {uni.showToast({icon: "none",duration: 4000,title: response.data.msg});} */console.log(response.data)resolve(response.data);},fail(err) {uni.showToast({icon: "none",title: '服务响应失败'});console.error(err);reject(err);},complete() {uni.hideLoading();}});});
}// 有token时发送请求函数
function tokenRequest(path, method, data, loading, token) {return new Promise((resolve, reject) => {uni.request({url: BASEURL + path,method: method,data,header: {"token": token},success(response) {console.log('%c响应拦截：', ' background:green', response);if (response.data.code === 40101) {// logout()}console.log(response.data)resolve(response.data);},fail(err) {uni.showToast({icon: "none",title: '服务响应失败'});console.error(err);reject(err);},complete() {uni.hideLoading();}});});
}然后我们可以在api文件夹下的请求中引入刚刚已经封装好的request
import request from '@/utils/request.js'; // 封装的request.js文件的位置// login
export const login = (loginDTO) => {return request(`/tms-login/user/login`, 'POST', loginDTO)
}最后在你的vue文件中使用这个请求
methods: {// 登录login() {login(this.loginDTO).then(res => {uni.setStorageSync("token",res.data.token);if (res.code == 200) {uni.switchTab({url: "/pages/task/dispatch"});}else{alert("登录失败");}})}},至此，你已经学会了uni-app是如何发送请求了！是不是和vue十分相似，快去试试吧！
)
