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

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

HarmonyOS
2024-07-25 10:09:57
浏览
收藏 0
回答 1
待解决
回答 1
按赞同
/
按时间
wjmfzsz

简介

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)); 
})
分享
微博
QQ
微信
回复
2024-07-25 11:50:49
相关问题
基于原生能力网络状态感知
496浏览 • 1回复 待解决
基于原生能力网络加载性能分析
722浏览 • 1回复 待解决
基于TLSSocket通信能力
427浏览 • 1回复 待解决
基于原生能力组件封装
397浏览 • 1回复 待解决
基于原生水印添加能力
736浏览 • 1回复 待解决
基于原生能力跨应用跳转
792浏览 • 1回复 待解决
基于ArkUI实现类似.9图拉伸能力
518浏览 • 1回复 待解决
基于原生能力实现图文混排
441浏览 • 1回复 待解决
基于原生能力设备唯一ID方案
712浏览 • 1回复 待解决
网络请求-GET请求传参
426浏览 • 1回复 待解决
2.1.1版本axios发post请求会报401
1054浏览 • 1回复 待解决
获取当前网络连接能力
736浏览 • 1回复 待解决
rcp模块能力发起post请求
1144浏览 • 1回复 待解决
有没有基于socket封装成熟网络库?
854浏览 • 1回复 待解决
网络请求数据后处理
354浏览 • 1回复 待解决
如何录制带网络请求trace
244浏览 • 2回复 待解决