npm install qs // 用来序列化post类型的数据
import baseUrl from '../baseUrl'; // url地址信息import qs from 'qs' // 处理data
uni-app 可通过 process.env.NODE_ENV 判断当前环境是开发环境还是生产环境。一般用于连接测试服务器或生产服务器的动态切换。
uniapp有自己的生产和开发环境,也可以配置其他的环境;大家可以去观看官方文档
开发环境和生产环境
if(process.env.NODE_ENV === 'development'){ console.log('开发环境') }else{ console.log('生产环境') }
post请求的时候,需要添加一些请求头;一般默认的请求头是:‘ application/x-www-form-urlencoded ’
header = { 'Content-Type': 'application/x-www-form-urlencoded',}
当请求参数返回的时候;查看code数据,给出响应
switch (dataType.code * 1) { // 拦截返回参数 case 0: resolve(dataType) break; case 1003: uni.showModal({ title: '登录已过期', content: '很抱歉,登录已过期,请重新登录', confirmText: '重新登录', success: function(res) { if (res.confirm) { // 点击确定 //去登录页面 console.log('用户'); uni.navigateTo({ // 切记这儿需要哈pages.json保持一致;不能有.vue后缀 url: '/pages/views/login/index' }); } else if (res.cancel) { console.log('用户点击取消'); } } }) break; case -1: uni.showModal({ title: '请求数据失败', content: '获取数据失败!', confirmText: '确定', showCancel: false, success: function(res) { if (res.confirm) {} else if (res.cancel) { console.log('用户点击取消'); } } }) break }
import baseUrl from '../baseUrl'; import qs from 'qs' // 处理data const request = (params) => { /* * 1.初始化值 */ let _self = this; let url = params.url; let method = params.method || 'GET'; let data = params.data || {}; data.token = "default-access_token" // default-access_token /* *2.判断token */ if (!params.token) { // 如果没有传递token let token = uni.getStorageSync('token'); // 在本地查找 if (!token) { // 如果本地没有就跳转到登录页面 uni.navigateTo({ url: 'pages/views/login/index' }); } else { data.token = '179509245-9c91827e0224bdc18d0b118b8be1b5af'; } } /* * 3.添加头部 */ let defaultOpot = { // 'Content-Type': 'application/x-www-form-urlencoded', 'Terminal-Type': 'innerH5', 'Content-Type': 'application/json;charset=UTF-8', } /* * 4.处理 POST */ let header = {} method = method.toUpperCase() if (method == 'POST') { header = { 'Content-Type': 'application/x-www-form-urlencoded', } data = qs.stringify(data) } // 5.请求地址 const requestUrl = baseUrl.server + url; uni.showLoading({ title: '加载中...' }); // 6.用 Promise 创建回调 return new Promise((resolve, reject) => { uni.request({ url: requestUrl, method: method, header: Object.assign({}, defaultOpot, header), data: data, dataType: 'json', }) .then(res => { // 成功 if (res[1] && res[1].statusCode === 200) { let { data: dataType } = res[1] switch (dataType.code * 1) { // 拦截返回参数 case 0: resolve(dataType) break; case 1003: uni.showModal({ title: '登录已过期', content: '很抱歉,登录已过期,请重新登录', confirmText: '重新登录', success: function(res) { if (res.confirm) { // 点击确定 //去登录页面 console.log('用户'); uni.navigateTo({ // 切记这儿需要哈pages.json保持一致;不能有.vue后缀 url: '/pages/views/login/index' }); } else if (res.cancel) { console.log('用户点击取消'); } } }) break; case -1: uni.showModal({ title: '请求数据失败', content: '获取数据失败!', confirmText: '确定', showCancel: false, success: function(res) { if (res.confirm) {} else if (res.cancel) { console.log('用户点击取消'); } } }) break } } }) .catch(err => { // 错误 reject(err) }) .finally(() => { console.log('不管是否成功都要执行') uni.hideLoading(); }) }) } export default request
import request from '../../utils/request.js' /* * 1.获取商城楼层列表 */ export function getFloorList(){ return request({ url:'/***', method:'get' }) } export function getCartProducts(){ return request({ url:'/***', method:'POST' }) }
import {getFloorList,getCartProducts} from '../../api/mall/index.js';
getFloorList().then(res=>{ this.list = res.data })
以上可能不是很完整;大家可以根据自己的需要进行配置即可