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

anlan001

发布于 2024-8-1 16:47

1.2w浏览

0收藏

简介

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字符串

基于@ohos/axios的网络请求能力-鸿蒙开发者社区

使用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; 
})1.
2.
3.
4.
5.
6.
7.
8.

将请求结果显示。

基于@ohos/axios的网络请求能力-鸿蒙开发者社区

使用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; 
})1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.

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

基于@ohos/axios的网络请求能力-鸿蒙开发者社区

错误处理

// 错误处理示例代码 
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)); 
});1.
2.
3.
4.
5.
6.

参考文档：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' 
    } 
  } 
}1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.

请求拦截器

在请求发送前进行必要操作处理，例如设置请求头，获取请求配置或者修改，设置超时时间等，相当于是对每个接口里相同操作的一个封装。

// 添加请求拦截器 
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); 
});1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.

响应体结构

{ 
  // 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 
}1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.

新增performanceTiming的一些属性定义。

响应拦截器

同理，响应拦截器也是如此功能，只是在请求得到响应之后，对响应体的一些处理。

// 添加响应拦截器 
axios.interceptors.response.use((response: AxiosResponse)=> { 
  // 对响应数据做点什么 
  console.log('test=='+ JSON.stringify(response.performanceTiming)) 
  return response; 
}, (error: AxiosError)=> { 
  // 对响应错误做点什么 
  return Promise.reject(error); 
});1.
2.
3.
4.
5.
6.
7.
8.
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，需要这个浏览器才知道是表单。

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)); 
})1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
33.
34.
35.
36.
37.
38.

这里模拟前后端交互，下方为服务端模拟代码，其实就是一个上传的方法，首先通过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()); 
  } 
}1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.

下载文件

下载文件时，如果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)); 
})1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.