method详解
在上一个章节中我们尝试发送了请求,获取响应数据。实际上,alovaInstance.Get(...)
并不是一个发起请求的函数,而是创建了一个 method 实例,它是一个 PromiseLike 实例,你可以通过then、catch、finally
方法或await
发送请求,就像 Promise 对象一样。
const userMethodInstance = alovaInstance.Get('/api/user');
userMethodInstance.then(response => {
// ...
});
userMethodInstance.catch(error => {
// ...
});
userMethodInstance.finally(() => {
// ...
});
try {
await userMethodInstance;
} catch (error) {
// ...
} finally {
// ...
}
简便写法:
const response = await alovaInstance.Get('/api/user');
每个 method 实例描述了每个请求的类型、请求 url、请求头、请求参数等。此外,你还可以在 method 实例上定义请求行为,来控制 method 以什么方式处理请求。
请求类型
alova 共提供了 GET、POST、PUT、DELETE、HEAD、OPTIONS、PATCH 7 种请求类型。
实例创建函数 | 参数 |
---|---|
GET | alovaInstance.Get(url[, config]) |
POST | alovaInstance.Post(url[, data[, config]]) |
PUT | alovaInstance.Put(url[, data[, config]]) |
DELETE | alovaInstance.Delete(url[, data[, config]]) |
HEAD | alovaInstance.Head(url[, config]) |
OPTIONS | alovaInstance.Options(url[, config]) |
PATCH | alovaInstance.Patch(url[, data[, config]]) |
参数说明:
url
是请求路径;data
为请求体数据;config
为请求配置对象,其中包含了请求头、params 参数等、请求行为参数等配置;
你也可以自定义创建 method 实例,这在动态指定请求类型时很有用。
import { Method } from 'alova';
const method = new Method('GET', alovaInstance, '/api/users', {
params: {
ID: 1
}
});
接下来我们先来看下如何定义请求参数,你应该会觉得很熟悉。
请求参数
URL 参数
通过 params 传入 URL 参数,params 参数会在 url 后面以?的形式拼接。
alovaInstance.Get('/todo/list', {
params: {
userId: 1
}
});
当然,你也可以直接拼接在 url 后面,效果是相同的。
alovaInstance.Get('/todo/list?userId=1');
请求体
当发送 POST、PUT、DELETE、PATCH 请求 时可以通过请求体发送数据,此时第二个参数传入的是请求体,值得注意的是,POST 请求也可以传入 params 参数。
alovaInstance.Post(
'/todo',
// 第二个参数是请求体
{
title: 'test todo',
time: '12:00'
},
// 第三个参数是配置
{
params: {
userId: 1
}
}
);
请求头
通过 headers 指定请求头。
alovaInstance.Get('/user', {
headers: {
'Content-Type': 'application/json;charset=UTF-8'
}
});
其他请求适配器支持的参数
除了请求头、params 参数等外,还支持配置对应请求适配器支持的参数,当使用GlobalFetch
作为 alova 的请求适配器时,就可以在 method 实例上配置任何fetch API
支持的参数,这些参数会在请求时传给fetch
函数。
alovaInstance.Get('/todo/list', {
// ...
credentials: 'same-origin',
referrerPolicy: 'no-referrer',
mode: 'cors'
});
以上 method 实例在通过fetch
发送请求时,将会以以下参数请求。
fetch('/todo/list', {
// ...
credentials: 'same-origin',
referrerPolicy: 'no-referrer',
mode: 'cors'
});
请求体除了可以传递 Object,还能传递请求适配器支持的请求体参数,例如 GlobalFetch 支持传递
string | FormData | Blob | ArrayBuffer | URLSearchParams | ReadableStream
参数。
如果你使用了其他的请求适配器,也可以传递它们支持的参数。
请求行为
在RSM中,请求行为用于描述将以怎样的方式处理请求。
超时时间
设置请求超时时间。
// 请求级别的请求超时时间
alovaInstance.Get('/todo/list', {
// ...
timeout: 10000
});