uni-http
Version:
在uniapp中发送请求和上传文件的api进行了封装
258 lines (213 loc) • 4.73 kB
Markdown
## uniapp中使用http发送请求和上传文件
## install
```
$ npm i uni-http
```
## 基本使用
```js
// api.js
import { UniHttp } from 'uni-http';
class Api extends UniHttp {
config = {
baseURL: 'https://jsonplaceholder.typicode.com',
header: {
'Content-Type': 'application/json'
}
};
// 你可以在这里制作一个简易的拦截器
request(...args) {
console.log(args);
return super.request(...args).then(res => res.data);
}
async hello() {
return this.get("/todos/1");
}
}
const api = new Api();
export { api };
```
```js
import { api } from "api.js"
api.hello().then(data => { console.log(data); });
```
## Get
```js
import { UniHttp } from 'uni-http';
const api = new UniHttp({
baseURL: 'http://localhost:3000'
});
const res = await api.get('/api/hello', {
params: { name: 'ajanuw' },
header: { 'x-id': 1 }
});
// or
const res = await api.get({
url: '/api/hello',
params: { name: 'ajanuw' },
header: { 'x-id': 1 }
});
```
## Post
```js
import { UniHttp } from 'uni-http';
const api = new UniHttp({
baseURL: 'http://localhost:3000',
header: {
'Content-Type': 'application/json'
},
});
await api.post('/api/login', {
data: {
name: 'ajanuw'
}
});
```
## 使用拦截器
```js
class MyInterceptors {
request(options) {
options.header['x-token'] = 'xxxyyy';
uni.showLoading();
}
complete(result, options) {
uni.hideLoading();
}
}
const api = new UniHttp({
baseURL: 'http://localhost:3000',
interceptors: [new MyInterceptors()]
});
```
## 拦截器类型
```ts
type OrPromise<T> = T | Promise<T>;
type C = IUniHttpConfig;
type RSCR = UniApp.RequestSuccessCallbackResult;
type GCR = UniApp.GeneralCallbackResult;
export interface UniHttpInterceptors {
/**
* 发送前拦截
*/
request?: (options: C) => void;
/**
* 在success拦截
*/
success?: (result: RSCR, options: C) => OrPromise<RSCR>;
/**
* 在fail拦截
*/
fail?: (result: GCR, options: C) => void;
/**
* 在complete拦截
*/
complete?: (result: GCR, options: C) => void;
}
```
## 上传文件
```js
uni.chooseImage({
success: async chooseImageRes => {
const tempFilePaths = chooseImageRes.tempFilePaths;
const r = await api.post('/api/upload', {
name: 'file',
filePath: tempFilePaths[0],
data: {
name: 'ajanuw'
}
});
}
});
```
## 在h5上跨域,你可能需要设置一个拦截器
```js
class MyInterceptors {
request(options) {
// #ifdef H5
if(process.env.NODE_ENV === 'development') options.baseURL = '';
// #endif
}
}
const api = new UniHttp({
baseURL: 'http://xxx.fun/',
interceptors: [new MyInterceptors()]
});
```
manifest.json:
```json
"h5": {
"devServer": {
"https": false,
"proxy": {
"/api": {
"target": "http://xxx.fun/",
"changeOrigin": true,
"secure": false
}
}
}
}
```
## 中断请求
```js
import { UniHttp, UniHttpInterceptors, UniAbortController } from 'uni-http';
class MyInterceptors {
fail(result) {
if (result.errMsg === 'request:fail abort') {
console.log('请求被中断')
}
return result;
}
}
const api = new UniHttp({
baseURL: 'http://xxx.fun/',
interceptors: [new MyInterceptors()]
});
const abortController = new UniAbortController();
api.get('/api/cats', {
abortController: abortController,
}).then(console.log)
// 中断请求
abortController.abort();
```
## 在请求发送前结束请求
```js
class MyInterceptors {
request(options) {
// 将cancel设置为true,请求将不会发送
// 并且会调用拦截器的fail和complete
options.cancel = true;
}
fail(result) {
// { errMsg: "request:fail cancel" }
}
}
```
## 自定义发送请求的方式
这通常在h5上很有用
```js
const api = new UniHttp({
baseURL: 'https://jsonplaceholder.typicode.com',
// #ifdef H5
async requestFunc(url, options, success, fail, complete) {
// console.log(url,options,success,fail,complete);
try {
const res = await fetch(url)
const d = await res.json();
success(d);
complete(d);
} catch (e) {
fail(e)
}
},
// #endif
});
await api.get('/todos/1').then(res => {
console.log(res);
});
```
## See also:
- [options 参数 IUniHttpConfig](https://github.com/januwA/uni-http/blob/main/src/http-config.ts)
- [拦截器超类](https://github.com/januwA/uni-http/blob/main/src/interceptors.ts)
- [发送过程](https://github.com/januwA/uni-http/blob/main/src/uni-http.ts)
- [uni.uploadFile](https://uniapp.dcloud.io/api/request/network-file?id=uploadfile)
- [uni.request](http://uniapp.dcloud.io/api/request/request?id=request)