Skip to content
体验新版
项目
组织
正在加载...
登录
切换导航
打开侧边栏
DCloud
unidocs-zh
提交
6f3ac091
unidocs-zh
项目概览
DCloud
/
unidocs-zh
通知
3172
Star
105
Fork
804
代码
文件
提交
分支
Tags
贡献者
分支图
Diff
Issue
93
列表
看板
标记
里程碑
合并请求
67
DevOps
流水线
流水线任务
计划
Wiki
0
Wiki
分析
仓库
DevOps
项目成员
Pages
unidocs-zh
项目概览
项目概览
详情
发布
仓库
仓库
文件
提交
分支
标签
贡献者
分支图
比较
Issue
93
Issue
93
列表
看板
标记
里程碑
合并请求
67
合并请求
67
Pages
DevOps
DevOps
流水线
流水线任务
计划
分析
分析
仓库分析
DevOps
Wiki
0
Wiki
成员
成员
收起侧边栏
关闭侧边栏
动态
分支图
创建新Issue
流水线任务
提交
Issue看板
提交
6f3ac091
编写于
9月 28, 2021
作者:
D
DCloud_LXH
浏览文件
操作
浏览文件
下载
电子邮件补丁
差异文件
docs: api Promise 化
上级
9f273afc
变更
1
隐藏空白更改
内联
并排
Showing
1 changed file
with
145 addition
and
12 deletion
+145
-12
docs/api/README.md
docs/api/README.md
+145
-12
未找到文件。
docs/api/README.md
浏览文件 @
6f3ac091
...
...
@@ -29,19 +29,40 @@ ECMAScript由Ecma国际管理,是基础js语法。浏览器基于标准js扩
-
OBJECT 中可以指定 success,fail,complete 来接收接口调用结果。
-
**平台差异说明**
若无特殊说明,则表示所有平台均支持。
##
Promise 封装
##
API `Promise 化`
uni-app 对部分 API 进行了 Promise 封装,返回数据的第一个参数是错误对象,第二个参数是返回数据。
1.
具体 API
`Promise 化`
的策略:
-
异步的方法,如果不传入 success、fail、complete 等 callback 参数,将以 Promise 返回数据。例如:
`uni.getImageInfo()`
-
异步的方法,且有返回对象,如果希望获取返回对象,必须至少传入一项 success、fail、complete 等 callback 参数。例如:
详细策略如下:
```
js
// 正常使用
const
task
=
uni
.
connectSocket
(
success
(
res
){
console
.
log
(
res
)
}
)
-
异步的方法,如果不传入 success、fail、complete 等 callback 参数,将以 Promise 返回数据。例如:uni.getImageInfo()
-
异步的方法且有返回对象,如果希望获取返回对象,必须至少传入一项 success、fail、complete 等 callback 参数。例如:uni.connectSocket()
-
同步的方法(即以 sync 结束),不封装 Promise。例如:uni.getSystemInfoSync()
-
以 create 开头的方法,不封装 Promise。例如:uni.createMapContext()
-
以 manager 结束的方法,不封装 Promise。例如:uni.getBackgroundAudioManager()
// Promise 化
uni
.
connectSocket
().
then
(
res
=>
{
// 此处即为 success 回调的 res
// 如果想获取 task ,则不要使用 Promise 化
console
.
log
(
res
)
})
```
使用示例:
2.
不进行
`Promise 化`
的 API:
-
同步的方法(即以 sync 结束)。例如:
`uni.getSystemInfoSync()`
-
以 create 开头的方法。例如:
`uni.createMapContext()`
-
以 manager 结束的方法。例如:
`uni.getBackgroundAudioManager()`
### Vue 2 和 Vue 3 的 API `Promise 化`
> 返回结果不一致,以下为 `不同点` 和 `互相转换`
#### Vue 2
> 对部分 API 进行了 Promise 封装,返回数据的第一个参数是错误对象,第二个参数是返回数据。
**使用示例:**
```
js
// 默认方式
...
...
@@ -49,6 +70,9 @@ uni.request({
url
:
'
https://www.example.com/request
'
,
success
:
(
res
)
=>
{
console
.
log
(
res
.
data
);
},
fail
:(
err
)
=>
{
console
.
error
(
err
)
}
});
...
...
@@ -56,20 +80,129 @@ uni.request({
uni
.
request
({
url
:
'
https://www.example.com/request
'
})
.
then
(
data
=>
{
//data为一个数组,数组第一项为错误信息,第二项为返回数据
var
[
error
,
res
]
=
data
;
.
then
(
data
=>
{
// data为一个数组
// 数组第一项为错误信息 即为 fail 回调
// 第二项为返回数据
var
[
err
,
res
]
=
data
;
console
.
log
(
res
.
data
);
})
// Await
async
function
request
()
{
var
[
err
or
,
res
]
=
await
uni
.
request
({
var
[
err
,
res
]
=
await
uni
.
request
({
url
:
'
https://www.example.com/request
'
});
console
.
log
(
res
.
data
);
}
```
#### Vue 3
> 对部分 API 进行了 Promise 封装,`then` 为 success 成功回调。`catch` 为 fail 失败回调
**使用示例:**
```
js
// 默认方式
uni
.
request
({
url
:
'
https://www.example.com/request
'
,
success
:
(
res
)
=>
{
console
.
log
(
res
.
data
);
},
fail
:(
err
)
=>
{
console
.
error
(
err
)
}
});
// Promise
uni
.
request
({
url
:
'
https://www.example.com/request
'
})
.
then
(
res
=>
{
// 此处即为 success 回调中的 res
console
.
log
(
res
.
data
);
})
.
catch
(
err
=>
{
// 此处即为 fail 回调中的 err
console
.
error
(
err
)
})
// Await
async
function
request
()
{
try
{
var
res
=
await
uni
.
request
({
url
:
'
https://www.example.com/request
'
});
console
.
log
(
res
);
// 此处即为 success 回调中的 res
}
catch
(
err
)
{
console
.
error
(
err
)
// 此处即为 fail 回调中的 err
}
}
```
#### Vue 2 写法转 Vue 3 写法
```
js
// 在 main.js 中写入以下代码即可
function
isPromise
(
obj
)
{
return
!!
obj
&&
(
typeof
obj
===
'
object
'
||
typeof
obj
===
'
function
'
)
&&
typeof
obj
.
then
===
'
function
'
}
uni
.
addInterceptor
({
returnValue
(
res
)
{
if
(
!
isPromise
(
res
))
{
return
res
}
return
new
Promise
((
resolve
,
reject
)
=>
{
res
.
then
(
res
=>
{
if
(
res
[
0
])
{
reject
(
res
[
0
])
}
else
{
resolve
(
res
[
1
])
}
})
})
}
})
// 或
// 此为框架内部提供
uni
.
addInterceptor
(
uni
.
interceptors
.
promiseInterceptor
)
```
#### Vue 3 写法转 Vue 2 写法
```
js
// 在 main.js 中写入以下代码即可
function
isPromise
(
obj
)
{
return
!!
obj
&&
(
typeof
obj
===
'
object
'
||
typeof
obj
===
'
function
'
)
&&
typeof
obj
.
then
===
'
function
'
}
uni
.
addInterceptor
({
returnValue
(
res
)
{
if
(
!
isPromise
(
res
))
{
return
res
}
const
returnValue
=
[
undefined
,
undefined
]
return
res
.
then
((
res
)
=>
{
returnValue
[
1
]
=
res
})
.
catch
((
err
)
=>
{
returnValue
[
0
]
=
err
})
.
then
(()
=>
returnValue
)
}
})
// 或
// 此为框架内部提供
uni
.
addInterceptor
(
uni
.
interceptors
.
promiseInterceptor
)
```
### API 列表
#### 网络
##### 发起请求
...
...
编辑
预览
Markdown
is supported
0%
请重试
或
添加新附件
.
添加附件
取消
You are about to add
0
people
to the discussion. Proceed with caution.
先完成此消息的编辑!
取消
想要评论请
注册
或
登录