简介
Axios是一个基于promise的网络请求库,可以运行node.js和浏览器中。基于Axios原库v1.3.4GitHub版本进行适配,使其可以运行在OpenHarmony并沿用其现有用法和特性。
- http请求。
- request和 response拦截器。
- 转换request和response的data数据。
- 自动转换JSON data数据。
下载与安装三方库
// 在终端cd到需要使用三方库的module 运行下面命令
ohpm install @ohos/axios
需要使用到的权限:ohos.permission.INTERNET。
场景一:使用axios发送常规请求
如:axios.get<T = any, R = AxiosResponse, D = any>(url)
- R: 是响应体的类型。当服务器返回一个响应时,响应体通常是一个JSON对象。R就是这个JSON对象的类型。默认情况下,R是AxiosResponse,这意味着响应体是一个AxiosResponse对象,它的data属性是T类型的
- D: 是请求参数的类型。当发送一个GET请求时,可能会在URL中添加一些查询参数。D就是这些查询参数的类型。参数为空情况下,D是null类型。
发送一个get请求获取服务器端的JSON字符串
使用axios来获取,performanceTiming计算HTTP请求的各个阶段所花费的时间。
axios.get<string, AxiosResponse<string>, null>(this.getUrl, {}).then((res: AxiosResponse) => {
this.status = res.status;
this.message = JSON.stringify(res.data);
this.performanceTiming = JSON.stringify(res.performanceTiming) : '';
}).catch((err: AxiosError) => {
this.status = '';
this.message = err.message;
})
将请求结果显示。
使用axios为服务端的JSON添加data数据这个时候使用POST请求。
axios.post<T = any, R = AxiosResponse, D = any>(url)
T: 是响应数据类型。当发送一个 POST 请求时,客户端可能会收到一个 JSON 对象。T 就是这个 JSON 对象的类型。默认情况下,T 是 any,这意味着可以接收任何类型的数据。
axios<InfoModel, AxiosResponse<InfoModel>, IdModel>({
url: this.postUrl,
method: 'POST',
data: {
id: 592,
name: 'zxing',
gitUrl: 'https://gitee.com/openharmony-tpc/zxing',
},
}).then((res: AxiosResponse<InfoModel>) => {
this.status = res.status;
this.message = JSON.stringify(res.data);
this.performanceTiming = JSON.stringify(res.performanceTiming) : '';
}).catch((err: AxiosError) => {
this.status = '';
this.message = err.message;
})
这里可以看到服务器端的data数据上传成功。
错误处理
// 错误处理示例代码
axios.get<string, AxiosResponse<string>, null>('url').catch((error: AxiosError)=> {
console.log(JSON.stringify(error.message));
console.log(JSON.stringify(error.code));
console.log(JSON.stringify(error.config));
});
参考文档:HTTP错误码。
场景二:请求拦截器与响应拦截器的使用
发送一段带配置的请求
let config: AxiosRequestConfig= {
url: 'https://xxx.com',
method: 'POST',
headers: {
'Accept-Language': 'zh-cn',
'bfw-ctrl' : 'json',
'Content-Type': 'application/json',
'cookies': 'sad',
},
// timeout指定请求超时的毫秒数(0 表示无超时时间)
// 如果请求超过timeout的时间,请求将被中断
timeout: 1000,
// connectTimeout指定请求连接服务器超时的毫秒数(0 表示无超时时间)
// 如果请求连接服务器超过connectTimeout的时间,请求将被中断
connectTimeout: 60000,
// data是作为请求主体被发送的数据
// 只适用于这些请求方法 'PUT', 'POST', 和 'PATCH'
data: {
'common': {
'view': 'good'
}
}
}
请求拦截器
在请求发送前进行必要操作处理,例如设置请求头,获取请求配置或者修改,设置超时时间等,相当于是对每个接口里相同操作的一个封装。
// 添加请求拦截器
axios.interceptors.request.use((config: InternalAxiosRequestConfig) => {
// 对超时时间进行修改
config.timeout=100,
config.connectTimeout: 60000,
// 对请求config进行输出
console.log('test=='+ JSON.stringify(config.headers['Content-Type']))
console.log('test=='+ JSON.stringify(config.headers['cookies']))
console.log('test=='+ JSON.stringify(config.data))
return config;
}, (error: AxiosError) => {
// 对请求错误做些什么
return Promise.reject(error);
});
响应体结构
{
// data由服务器提供的响应
data: {},
// status来自服务器响应的 HTTP 状态码
status: 200,
// statusText来自服务器响应的 HTTP 状态信息
statusText: 'OK',
// headers是服务器响应头
// 所有的header名称都是小写,而且可以使用方括号语法访问
// 例如: response.headers['content-type']
headers: {},
// config是axios请求的配置信息
config: {},
// request是生成此响应的请求
request: {}
// performanceTiming计算HTTP请求的各个阶段所花费的时间
performanceTiming: http.PerformanceTiming
}
新增performanceTiming的一些属性定义。
响应拦截器
同理,响应拦截器也是如此功能,只是在请求得到响应之后,对响应体的一些处理。
// 添加响应拦截器
axios.interceptors.response.use((response: AxiosResponse)=> {
// 对响应数据做点什么
console.log('test=='+ JSON.stringify(response.performanceTiming))
return response;
}, (error: AxiosError)=> {
// 对响应错误做点什么
return Promise.reject(error);
});
场景三:上传下载文件
上传文件
上传示例
- 上传类型支持uri和ArrayBuffer,uri支持“internal”协议类型和沙箱路径,仅支持"internal"协议类型,"internal://cache/"为必填字段,示例: internal://cache/path/to/file.txt;沙箱路径示例:cacheDir + '/hello.txt'
- 上传参数context:当uri为沙箱路径,无需传参context;若uri为“internal”协议类型,必须传参context
FormData 对象介绍
FormData可以将表单字段的键值对以键值对的方式添加,同时也支持添加文件,在文件上传的场景中,我们可以使用FormData对象来收集表单数据,包括文件和其他文本字段,然后将其发送到后端服务器。
Axios可以通过FormData对象上传文件,在FormData中追加文件,我们需要用POST方法,再配置headers,需要这个浏览器才知道是表单。
import axios from '@ohos/axios'
import { FormData } from '@ohos/axios'
import fs from '@ohos.file.fs';
// ArrayBuffer
let formData = new FormData()
let cacheDir = getContext(this).cacheDir
try {
// 写入
let path = cacheDir + '/test.txt';
let file = fs.openSync(path, fs.OpenMode.CREATE | fs.OpenMode.READ_WRITE)
fs.writeSync(file.fd, 'hello, world'); // 以同步方法将数据写入文件
fs.fsyncSync(file.fd); // 以同步方法同步文件数据。
fs.closeSync(file.fd);
// 读取
let file2 = fs.openSync(path, 0o2);
let stat = fs.lstatSync(path);
let buf2 = new ArrayBuffer(stat.size);
fs.readSync(file2.fd, buf2); // 以同步方法从流文件读取数据。
fs.fsyncSync(file2.fd);
fs.closeSync(file2.fd);
formData.append('file', buf2);
} catch (err) {
console.info('err:' + JSON.stringify(err));
}
// 发送请求
axios.post<string, AxiosResponse<string>, FormData>(this.downloadUrl, formData, {
headers: { 'Content-Type': 'multipart/form-data' },
context: getContext(this),
}).then((res: AxiosResponse) => {
console.info("result" + JSON.stringify(res.data));
// PerformanceTiming网络性能监测数据
this.status = res ? res.status : '';
this.message = res ? JSON.stringify(res.data) : '';
this.performanceTiming = res ? JSON.stringify(res.performanceTiming) : "";
}).catch((error: AxiosError) => {
console.error("error:" + JSON.stringify(error));
})
这里模拟前后端交互,下方为服务端模拟代码,其实就是一个上传的方法,首先通过MultipartFile接收文件。
@PostMapping("/upload")
public Result upload(@RequestParam("file") MultipartFile file) {
if (file.isEmpty()) {
return Result.fail('文件为空,请选择一个文件上传。');
}
try {
// 获取文件名
String name = file.getOriginalFilename();
// 获取文件大小
long size = file.getSize();
// 获取文件类型
String type = file.getContentType();
// 获取文件的字节
byte[] bytes = file.getBytes();
// ......
Map<String, Object> map = new HashMap<>();
map.put('文件名', name);
map.put('文件类型', type);
map.put('文件大小', size);
map.put('文件内容', subBytes);
return Result.success(map);
} catch (Exception e) {
return Result.fail('文件上传失败:' + e.getMessage());
}
}
下载文件
下载文件时,如果filePath已存在该文件则下载失败,下载之前需要先删除文件。
let filePath = getContext(this).cacheDir + '/test.txt'
// 下载。如果文件已存在,则先删除文件。
try {
fs.accessSync(filePath);
fs.unlinkSync(filePath);
} catch (err) {
}
axios({
// url: this.downloadUrl
url: '',
method: 'get',
filePath: filePath
}).then((res) => {
console.info('result: ' + JSON.stringify(res.data));
}).catch((error) => {
console.error('error:' + JSON.stringify(error));
})