uni-app api请求接口 封装
1,写一个公共的api.js
let baseURL = 'http://443548ef.cpolar.cn/';//公共api地址。示范
export const myRequest = (options) => {
return new Promise((resolve, reject) => {
uni.request({
url: baseURL options.url, //接口地址:前缀 方法中传入的地址
method: options.method || 'GET', //请求方法:传入的方法或者默认是“GET”
data: options.data || {}, //传递参数:传入的参数或者默认传递空集合
dataType:options.dataType || "json",
header: {
'Admin-Token':uni.getStorageSync('Admin-Token'), //自定义请求头信息
'visa':uni.getStorageSync('userId'), //自定义请求头信息
'content-type':options.headers['Content-Type'] || 'application/x-www-form-urlencoded;charset=UTF-8'
},
success: (res) => {
if(res.data.code == 302){//用户另一端登录
uni.showModal({
title: '提示',
content: res.data.msg,
showCancel: false,
success: function (res) {
if (res.confirm) {
uni.reLaunch({
url: '/pages/login/login'
});
}
}
});
}else if(res.data.code == 500){
uni.showToast({
title: res.data.msg,
icon: 'none',
mask: true,
duration: 2000
});
}else{
uni.showToast({
title: res.data.code,
icon: 'none',
mask: true,
duration: 2000
});
resolve(res.data);
}
//返回的数据(不固定,看后端接口,这里是做了一个判断,如果不为true,用uni.showToast方法提示获取数据失败)
// if (res.data.success != true) {
// return uni.showToast({
// title: '获取数据失败',
// icon: 'none'
// })
// }
// 如果不满足上述判断就输出数据
},
// 这里的接口请求,如果出现问题就输出接口请求失败
fail: (err) => {
console.log( baseURL options.url)
console.log(err)
reject(err)
}
})
})
}
2,接下来一些请求方法封装,以登录为例。login.js
import {myRequest} from 'api.js'
//登录
export function login(username, password) {
return myRequest({
url: 'login',
method: 'post',
data: {
username,
password
},
headers: {
'Content-Type': 'application/x-www-form-urlencoded;charset=UTF-8'
}
})
}
3,login.vue 点击发送请求
import {login} from '@/api/login.js';
loginHandle(){
login(this.username,this.password).then(res => {
const code = res.code;
if (code == 0) {
uni.showToast({
title: '登录成功'
})
setTimeout(() => {
uni.redirectTo({
url: '/pages/index/index',
})
}, 500)
} else {
uni.showToast({
title:res.msg,
icon: 'none',
mask: true,
duration: 2000
})
}
}).catch(err => {
console.log(err)
})
},
这篇好文章是转载于:学新通技术网
- 版权申明: 本站部分内容来自互联网,仅供学习及演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系,请提供相关证据及您的身份证明,我们将在收到邮件后48小时内删除。
- 本站站名: 学新通技术网
- 本文地址: /boutique/detail/tanhgcaaii
系列文章
更多
同类精品
更多
-
photoshop保存的图片太大微信发不了怎么办
PHP中文网 06-15 -
Android 11 保存文件到外部存储,并分享文件
Luke 10-12 -
《学习通》视频自动暂停处理方法
HelloWorld317 07-05 -
word里面弄一个表格后上面的标题会跑到下面怎么办
PHP中文网 06-20 -
photoshop扩展功能面板显示灰色怎么办
PHP中文网 06-14 -
微信公众号没有声音提示怎么办
PHP中文网 03-31 -
excel下划线不显示怎么办
PHP中文网 06-23 -
excel打印预览压线压字怎么办
PHP中文网 06-22 -
怎样阻止微信小程序自动打开
PHP中文网 06-13 -
TikTok加速器哪个好免费的TK加速器推荐
TK小达人 10-01