基于@ohos/axios的网络请求能力

简介
Axios是一个基于promise的网络请求库，可以运行node.js和欣赏器中。基于Axios原库v1.3.4GitHub版本举行适配，使其可以运行在OpenHarmony并相沿其现有用法和特性。

• http请求。
  
• request和 response拦截器。
  
• 转换request和response的data数据。
  
• 主动转换JSON data数据。
  

下载与安装三方库

1. // 在终端cd到需要使用三方库的module 运行下面命令
2. 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请求的各个阶段所花费的时间。

1. axios.get<string, AxiosResponse<string>, null>(this.getUrl, {}).then((res: AxiosResponse) => {
2.   this.status =  res.status;
3.   this.message = JSON.stringify(res.data);
4.   this.performanceTiming = JSON.stringify(res.performanceTiming) : '';
5. }).catch((err: AxiosError) => {
6.   this.status = '';
7.   this.message = err.message;
8. })

复制代码

将请求效果表现。

使用axios为服务端的JSON添加data数据这个时间使用POST请求。
axios.post<T = any, R = AxiosResponse, D = any>(url)
T: 是相应数据范例。当发送一个 POST 请求时，客户端大概会收到一个 JSON 对象。T 就是这个 JSON 对象的范例。默认情况下，T 是 any，这意味着可以接收任何范例的数据。

1. axios<InfoModel, AxiosResponse<InfoModel>, IdModel>({
2.   url: this.postUrl,
3.   method: 'POST',
4.   data: {
5.     id: 592,
6.     name: 'zxing',
7.     gitUrl: 'https://gitee.com/openharmony-tpc/zxing',
8.   },
9. }).then((res: AxiosResponse<InfoModel>) => {
10.   this.status =  res.status;
11.   this.message = JSON.stringify(res.data);
12.   this.performanceTiming = JSON.stringify(res.performanceTiming) : '';
13. }).catch((err: AxiosError) => {
14.   this.status = '';
15.   this.message = err.message;
16. })

复制代码

这里可以看到服务器端的data数据上传乐成。

错误处置惩罚

1. // 错误处理示例代码
2. axios.get<string, AxiosResponse<string>, null>('url').catch((error: AxiosError)=> {
3.   console.log(JSON.stringify(error.message));
4.   console.log(JSON.stringify(error.code));
5.   console.log(JSON.stringify(error.config));
6. });

复制代码

参考文档：HTTP错误码。
场景二：请求拦截器与相应拦截器的使用
发送一段带设置的请求

1. let config: AxiosRequestConfig= {
2.   url: 'https://xxx.com',
3.   method: 'POST',
4.   headers: {
5.     'Accept-Language': 'zh-cn',
6.     'bfw-ctrl' : 'json',
7.     'Content-Type': 'application/json',
8.     'cookies': 'sad',
9.   },
10.   // timeout指定请求超时的毫秒数(0 表示无超时时间)
11.   // 如果请求超过timeout的时间，请求将被中断
12.   timeout: 1000,
13.   // connectTimeout指定请求连接服务器超时的毫秒数(0 表示无超时时间)
14.   // 如果请求连接服务器超过connectTimeout的时间，请求将被中断
15.   connectTimeout: 60000,
16.   // data是作为请求主体被发送的数据
17.   // 只适用于这些请求方法 'PUT', 'POST', 和 'PATCH'
18.   data: {
19.     'common': {
20.       'view': 'good'
21.     }
22.   }
23. }

复制代码

请求拦截器
在请求发送进步行须要操纵处置惩罚，比方设置请求头，获取请求设置或者修改，设置超时时间等，相称于是对每个接口里雷同操纵的一个封装。

1. // 添加请求拦截器
2. axios.interceptors.request.use((config: InternalAxiosRequestConfig) => {
3.   // 对超时时间进行修改
4.   config.timeout=100，
5.   config.connectTimeout: 60000,
6.   // 对请求config进行输出
7.   console.log('test=='+ JSON.stringify(config.headers['Content-Type']))
8.   console.log('test=='+ JSON.stringify(config.headers['cookies']))
9.   console.log('test=='+ JSON.stringify(config.data))
10.   return config;
11. }, (error: AxiosError) => {
12.   // 对请求错误做些什么
13.   return Promise.reject(error);
14. });

复制代码

相应体结构

1. {
2.   // data由服务器提供的响应
3.   data: {},
4.   // status来自服务器响应的 HTTP 状态码
5.   status: 200,
6.   // statusText来自服务器响应的 HTTP 状态信息
7.   statusText: 'OK',
8.   // headers是服务器响应头
9.   // 所有的header名称都是小写，而且可以使用方括号语法访问
10.   // 例如: response.headers['content-type']
11.   headers: {},
12.   // config是axios请求的配置信息
13.   config: {},
14.   // request是生成此响应的请求
15.   request: {}
16.   // performanceTiming计算HTTP请求的各个阶段所花费的时间
17.   performanceTiming: http.PerformanceTiming
18. }

复制代码

新增performanceTiming的一些属性定义。
相应拦截器
同理，相应拦截器也是如此功能，只是在请求得到相应之后，对相应体的一些处置惩罚。

1. // 添加响应拦截器
2. axios.interceptors.response.use((response: AxiosResponse)=> {
3.   // 对响应数据做点什么
4.   console.log('test=='+ JSON.stringify(response.performanceTiming))
5.   return response;
6. }, (error: AxiosError)=> {
7.   // 对响应错误做点什么
8.   return Promise.reject(error);
9. });

复制代码

场景三：上传下载文件
上传文件
上传示例

• 上传范例支持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，须要这个欣赏器才知道是表单。

1. import axios from '@ohos/axios'
2. import { FormData } from '@ohos/axios'
3. import fs from '@ohos.file.fs';
4.  
5. // ArrayBuffer
6. let formData = new FormData()
7. let cacheDir = getContext(this).cacheDir
8. try {
9.   // 写入
10.   let path = cacheDir + '/test.txt';
11.   let file = fs.openSync(path, fs.OpenMode.CREATE | fs.OpenMode.READ_WRITE)
12.   fs.writeSync(file.fd, 'hello, world'); // 以同步方法将数据写入文件
13.   fs.fsyncSync(file.fd); // 以同步方法同步文件数据。
14.   fs.closeSync(file.fd);
15.   // 读取
16.   let file2 = fs.openSync(path, 0o2);
17.   let stat = fs.lstatSync(path);
18.   let buf2 = new ArrayBuffer(stat.size);
19.   fs.readSync(file2.fd, buf2); // 以同步方法从流文件读取数据。
20.   fs.fsyncSync(file2.fd);
21.   fs.closeSync(file2.fd);
22.   formData.append('file', buf2);
23. } catch (err) {
24.   console.info('err:' + JSON.stringify(err));
25. }
26. // 发送请求
27. axios.post<string, AxiosResponse<string>, FormData>(this.downloadUrl, formData, {
28.   headers: { 'Content-Type': 'multipart/form-data' },
29.   context: getContext(this),
30. }).then((res: AxiosResponse) => {
31.   console.info("result" + JSON.stringify(res.data));
32.   // PerformanceTiming网络性能监测数据
33.   this.status = res ? res.status : '';
34.   this.message = res ? JSON.stringify(res.data) : '';
35.   this.performanceTiming = res ? JSON.stringify(res.performanceTiming) : "";
36. }).catch((error: AxiosError) => {
37.   console.error("error:" + JSON.stringify(error));
38. })

复制代码

这里模拟前后端交互，下方为服务端模拟代码，其实就是一个上传的方法，首先通过MultipartFile接收文件。

1. @PostMapping("/upload")
2. public Result upload(@RequestParam("file") MultipartFile file) {
3.   if (file.isEmpty()) {
4.     return Result.fail('文件为空，请选择一个文件上传。');
5.   }
6.   try {
7.     // 获取文件名
8.     String name = file.getOriginalFilename();
9.     // 获取文件大小
10.     long size = file.getSize();
11.     // 获取文件类型
12.     String type = file.getContentType();
13.     // 获取文件的字节
14.     byte[] bytes = file.getBytes();
15.     // ......
16.     Map<String, Object> map = new HashMap<>();
17.     map.put('文件名', name);
18.     map.put('文件类型', type);
19.     map.put('文件大小', size);
20.     map.put('文件内容', subBytes);
21.     return  Result.success(map);
22.   } catch (Exception e) {
23.     return Result.fail('文件上传失败：' + e.getMessage());
24.   }
25. }

复制代码

下载文件
下载文件时，假如filePath已存在该文件则下载失败，下载之前须要先删除文件。

1. let filePath = getContext(this).cacheDir + '/test.txt'
2. // 下载。如果文件已存在，则先删除文件。
3. try {
4.   fs.accessSync(filePath);
5.   fs.unlinkSync(filePath);
6. } catch (err) {
7. }
8. axios({
9.   // url: this.downloadUrl
10.   url: '',
11.   method: 'get',
12.   filePath: filePath
13. }).then((res) => {
14.   console.info('result: ' + JSON.stringify(res.data));
15. }).catch((error) => {
16.   console.error('error:' + JSON.stringify(error));
17. })

复制代码

 

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。