- 什么是Promise
Promise 对象代表了未来将要发生的事件,用来传递异步操作的消息。 - 如何利用Promise进行类似同步操作
test(index){
return new Promise((resolve, reject) => {
//逻辑处理
if ( index*10>100 ) {
//执行通过返回参数
reject(index*10)
}else{
//执行错误返回参数
resolve("数据小于10")
}
})
},
//调用
test_end(){
this.test(11).then(res => {
if(res){
//正常通过处理
console.log(res)
}
}).catch(err => {
//异常处理
console.log(err)
}).finally(() => {
//无论正常还是异常,在处理完之后都会执行该方法,最常用于间隔锁,防止多次点击,重复请求
console.log("执行结束")
})
}
小例子:uniapp封装前端请求接口
封装:创建request.js
function request(options) {
const baseUrl = 'http://127.0.0.1:8084'+options.url;
const data = ({
app_key: "",
data: options.data,
format: 'json',
method: "",
timestamp: "",
token: "",
v: '1.0',
sign: ""
})
return new Promise((resolve, reject) => {
//这里也可以改成axios的ajax的都可以
uni.request({
url: baseUrl,
method: 'POST',
header:{
'Content-Type': 'application/x-www-form-urlencoded;charset=UTF-8'
},
timeout: 30000,
data: data,
success(res) {
resolve(res)
},
fail(err) {
reject(err)
}
})
})
}
export default request
调用request
创建test/index.js
import request from "../request.js"
//查询
function query(index) {
return request({
data: index,
url:"/test_api/query"
})
}
使用接口
import {query} from "@/api/test/index.js"
export default {
data(){
return{
lock:false
}
},
methods: {
test() {
if(!this.lock){
return
}
this.lock = true
query(JSON.stringify({
//博主公司要求必须转化成string类型、也方便后续加密
id:'1234',
name:'laowang',
ago:'2'
})).then(res =>{
//逻辑处理
console.log(res.data)
}).catch(err =>{
console.log(err)
}).finally(() =>{
this.lock = false
})
}
}
}
最后:封装接口稍有改动,比如加密签名什么的都删掉了,可以将加密等添加上,这里我就不添加了。