Skip to content
体验新版
项目
组织
正在加载...
登录
切换导航
打开侧边栏
程序yang
unidocs-zh
提交
6f3ac091
U
unidocs-zh
项目概览
程序yang
/
unidocs-zh
与 Fork 源项目一致
Fork自
DCloud / unidocs-zh
通知
1
Star
1
Fork
0
代码
文件
提交
分支
Tags
贡献者
分支图
Diff
Issue
0
列表
看板
标记
里程碑
合并请求
0
DevOps
流水线
流水线任务
计划
Wiki
0
Wiki
分析
仓库
DevOps
项目成员
Pages
U
unidocs-zh
项目概览
项目概览
详情
发布
仓库
仓库
文件
提交
分支
标签
贡献者
分支图
比较
Issue
0
Issue
0
列表
看板
标记
里程碑
合并请求
0
合并请求
0
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.
先完成此消息的编辑!
取消
想要评论请
注册
或
登录