@quickapp-eco/quickapp-axios
Version:
网络请求axios工具库在快应用平台上的实现
182 lines (132 loc) • 3.41 kB
Markdown
# quickapp-axios
网络请求axios工具库在快应用平台上的实现
## 特性
- 从快应用中出创建 [XMLHttpRequests](https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest)
- 支持 Promise API
- 创建建fetch请求别名
- 拦截请求和响应
- 转换请求和响应数据
## 平台支持
## manifest.json 配置
```
{ "name": "system.fetch" }
```
## 安装
使用 npm:
``` bash
$ npm install @quickapp-eco/quickapp-axios
```
## 示例
执行 `GET` 请求
``` js
// Make a request for a user with a given ID
fetch.get('/example?id=12345')
.then(response => {
console.log(response);
})
.catch(error => {
console.log(error);
});
// Optionally the request above could also be done as
fetch.get('/example', {
params: {
id: 12345
}
})
.then(response => {
console.log(response);
})
.catch(error => {
console.log(error);
});
```
执行 `POST` 请求
``` js
fetch.post('/example', {
name: 'HeartCloud',
password: '12345'
})
.then(response => {
console.log(response);
})
.catch(error => {
console.log(error);
});
```
## fetch API
可以通过将相关配置传递给 `fetch` 来进行请求
##### fetch(config)
``` js
// 发送一个 POST 请求
fetch({
method: 'post',
url: '/example/12345',
data: {
name: 'HeartCloud',
password: '12345'
}
});
```
### 请求方法别名
为了方便起见，已经为所有支持的请求方法提供了别名。
##### fetch. get(url[, config])
##### fetch. delete(url[, config])
##### fetch. head(url[, config])
##### fetch. options(url[, config])
##### fetch. post(url[, data[, config]])
##### fetch. put(url[, data[, config]])
##### fetch. patch(url[, data[, config]])
### 创建实例
您可以使用自定义配置创建axios的新实例。
##### fetch. create([config])
``` js
let instance = fetch.create({
baseURL: 'https://www.example.com/api/',
header: {
'X-Custom-Header': 'example'
}
});
```
## 请求配置
这些是用于发出请求的可用配置选项。 只有url是必需的。 如果未指定method，请求将默认为GET。
## 拦截器
你可以截取请求或响应在被 `then` 或者 `catch` 处理之前
``` js
// 添加请求拦截器
fetch.interceptors.request.use(config => {
// Do something before request is sent
return config;
}, function(error) {
// Do something with request error
return Promise.reject(error);
});
// 添加响应拦截器
fetch.interceptors.response.use(response => {
// Do something with response data
return response;
}, function(error) {
// Do something with response error
return Promise.reject(error);
});
```
如果你之后可能需要删除拦截器。
``` js
let myInterceptor = fetch.interceptors.request.use(function() {
/*...*/ });
fetch.interceptors.request.eject(myInterceptor);
```
你可以将拦截器添加到fetch的自定义实例。
``` js
let instance = fetch.create();
instance.interceptors.request.use(function() {
/*...*/ });
```
## TypeScript
fetch包括 [TypeScript](http://typescriptlang.org) 定义。
``` typescript
import fetch from '@quickapp-eco/quickapp-axios';
fetch.get('/example?id=12345');
```
## License
[MIT](./LICENSE)