最新工作中需要将原有的小程序项目改写成uni-app项目然后打包成app,在项目改写的过程中将原有的异步数据请求使用 promise结合async + await进行封装。达到同步语法实现异步回调,减少回调嵌套
代码
fetch/index.js
使用Promise构造器将uni.request的请求方法封装成一个promise对象
import {api, pages, utils} from '../utils/utils.js'
//请求接口函数
function fetch (method, url, data, loading){
return new Promise((resolve, reject) => {
//显示加载动画
if (loading) utils.showLoading()
//获取token
let token = wx.getStorageSync("token")
let obj = { token, }
//添加token
Object.assign(data,obj)
//发起请求
uni.request({
url,
method,
data,
header: {
// 数据被编码为名称/值对
//"Content-Type": "application/x-www-form-urlencoded;charset=utf-8"
},
success: res => {
let code = res.data.code
let message = res.data.message
//统一处理返回值
switch (code) {
case 200 :
resolve(res.data.data)
break
case 403 :
utils.showToast('您的账号已离线,请重新登录')
utils.goLogin()
break
case 423 :
utils.showToast('账号异地登录,请重新登录')
utils.goLogin()
break
default:
utils.showToast(`${message}`)
}
},
fail: err => {
reject(err)
},
complete: () => {
//结束加载动画
if (loading) utils.hideLoading()
}
});
})
}
export default {
get: function (url, params, loading){
return fetch('GET', url, params, loading)
},
post: function (url, params, loading){
return fetch('POST', url, params, loading)
},
put: function (url, params, loading){
return fetch('PUT', url, params, loading)
},
delete: function (url, params, loading){
return fetch('DELETE', url, params, loading)
}
}
main.js
在mian.js 通过import 引入fetch/index.js中的对象,将其注册到Vue的原型对象上
import Vue from 'vue'
import App from './App'
import {api, pages, utils} from './utils/utils.js'
import fetch from './fetch/index.js'
Vue.prototype.$api = api
Vue.prototype.$Utils = utils
Vue.prototype.$pages = pages
Vue.prototype.$fetch = fetch
Vue.config.productionTip = false
App.mpType = 'app'
const app = new Vue({
...App
})
app.$mount()
login.js
通过 async+await 同步语法实现异步请求
//确认登录
//确认登录
async loginIn (e) {
if (this.account == '' || this.password == '') {
this.$Utils.showToast('请输入账号或密码')
return
}
// this.$Utils.showToast('123')
//获取参数
let params = {
account: this.account,
password: this.password,
type: this.type,
client_id: this.clientid
}
//获取地址
let url = this.$api.user.login
//请求登录脚本
let res = await this.$fetch.post(url, params, true)
//存用户信息
wx.setStorage({
key:"baseInfo",
data: res
})
//存token
wx.setStorageSync("token", res.token)
//存登录状态(登录状态:1 未登录状态:0)
wx.setStorage({
key:"isLogin",
data: 1
})
//跳转页面
wx.reLaunch({
url: this.$pages.repair.list
})
}
网友评论