uniapp 封装请求接口(完整代码可复制)
项目目录如下:1.配置URL:在base.js中let baseURL = '';// 是否在控制台显示接口请求日志,本地环境启用,打包环境禁用let showHttpLog = false;// 测试环境baseURL = 'http://192.168.111.42:3333/';// 正式环境// baseURL = 'XXXXX.XXXXX.com';module.exports = {b
·
项目目录如下:
1.配置URL:
在base.js中
let baseURL = '';
// 是否在控制台显示接口请求日志,本地环境启用,打包环境禁用
let showHttpLog = false;
// 测试环境
baseURL = 'http://192.168.111.42:3333/';
// 正式环境
// baseURL = 'XXXXX.XXXXX.com';
module.exports = {
baseURL: baseURL,
showHttpLog: showHttpLog
}
2.根据uniapp官网文档https://uniapp.dcloud.io/api/request/request?id=request封装请求:
在http.js中:
import {
baseURL
} from './base.js'; //导入接口的前缀地址
export const myRequest = (options) => {
return new Promise((resolve, reject) => {
uni.request({
url: baseURL + options.url, //接口地址:前缀+方法中传入的地址
method: options.method || 'GET', //请求方法:传入的方法或者默认是“GET”
data: options.data || {}, //传递参数:传入的参数或者默认传递空集合
headers: {
'Authorization ': window.localStorage.getItem('token') //自定义请求头信息
},
success: (res) => {
//返回的数据(不固定,看后端接口,这里是做了一个判断,如果不为true,用uni.showToast方法提示获取数据失败)
// if (res.data.success != true) {
// return uni.showToast({
// title: '获取数据失败',
// icon: 'none'
// })
// }
// 如果不满足上述判断就输出数据
resolve(res)
},
// 这里的接口请求,如果出现问题就输出接口请求失败
fail: (err) => {
console.log(err)
reject(err)
}
})
})
}
3.根据实际数据写接口:
例如login.js
import {myRequest} from './http.js'
export function login (config) { //登录
return myRequest({
url:'login',
method:'post',
data:config
})
}
4.在实际界面中引用
(此处省略表单校验,表单校验详解见https://blog.csdn.net/weixin_50606255/article/details/118417225)
<script>
import {login} from '../../network/login.js';
export default {
data() {
return {
}
},
methods: {
// 登录接口
login(config) {
login(config).then(res => {
const code = res.data.code;
if (code === 100) {
uni.showToast({
title: '登录成功'
})
window.localStorage.setItem("token", res.data.data.token);
uni.switchTab({
url: "../home/home"
})
} else {
uni.showToast({
title: res.data.msg
})
}
}).catch(err => {
console.log(err)
})
},
// 提交表单
goPath(validateForm) {
this.$refs[validateForm].validate(valid => {
if (!valid) {
this.login(this.loginForm);
}
}
})
},
}
}
</script>
如有问题,欢迎留言!!
更多推荐
已为社区贡献16条内容
所有评论(0)