HarmonyOS Axios封装网络请求\文件上传

Axios

作用:

基于Promise封装请求库

使用步骤:

1.传入指令下载Axios包

ohpm i @ohos/axios

2.导入axios

import axios from '@ohos/axios'

封装基地址:

作用:

简化url的写法，基地址会自动拼接在url前面

写法:

//直接调用写法
axios.default.baseURL = 'xxx'
//用法
axios({url:})



//自定义封装request组件内写法
const xxxAxios = axios.create({
  baseURL: 'https://+需要拼接的网络请求域名可复用部分'
})
//用法
xxxAxios()

封装类型:

不传body的情况:

const res:AxiosResponse<响应类型>=axios()

传body的情况:

const res = axios<响应类型, AxiosResponse<响应类型,提交类型>,提交类型>()

调用时传参:

1.Query(查询)参数

params:{
    参数名:值(自动转中文)
}

2.Body(请求体)参数

data:{
    参数名:值
}

3.Path(路径)参数

//插值拼接在路径上
request<请求类型>({ url: `拼接的路径` + 值 })

4.Header(请求头)参数

header:{要求的属性:值}

文件上传

头像更换实现代码:

async upDataAvatar(){
    //1.打开系统相册选择图片
    const xxxPicker = new picker.PhotoViewPicker()//上下文对象
    const res = await xxxPicker.select({
    //文件类型
    MIMEType: picker.PhotoViewMIMETypes.IMAGE_TYPE,
    //最大可选数量
    maxSelectNumber: 1
     })
    if(res.photoUris.length === 0){
        return
    }
    //获取缓存目录
    const context = getContext(this)
    //缓存目录
    const cacheDir = context.cacheDir
    //2.拷贝图片到缓存目录
    //(文件路径)
    const oldPath = res.photoUris[0]
    //(文件对象)
    //const 文件对象 =fileIo.openSync(文件路径,打开模式)
    const oldFile =fileIo.openSync(oldPath,fileIo.OpenMode.READ_ONLY)
    //生成一个唯一的文件后缀
    const avatar = Date.now() + '.jpg'
    //fileIo.copyFileSync(文件对象.fd,缓存目录+文件.后缀)
    fileIo.copyFileSync(oldFile.fd,cacheDir + '/' + avatar)

    //3.调用上传的API
    const task = await request.uploadFile(context,{
    url:'',
    method: '',
    header:{},
    files:[{
        name:'接口文档',
        uri:'internal://cache/'+ '待上传文件的路径.后缀',
        type: '图片类型',
        filename:'待上传文件的路径.后缀',
     }],
    data:[]
    })

    // 上传进度
    task.on('progress', async (updateSize, totalSize) => {
      const percentPhoto = '上传进度' + (updateSize / totalSize * 100).toFixed(2) + '%'

    // 发送事件
      emitter.emit('updateMsg', {
        data: {
          percent: percentPhoto
        }
      })

    // 上传成功
      if (updateSize === totalSize) {
        promptAction.showToast({ message: '上传成功' })
        //调用接口更新本地头像
        const res = await axiosrequest<'请求类型'>({ url: '用户信息路径' })
        this.currentUser.avatar = res.data.data.avatar
      }
 })
}
/**监听上传任务方法:
task.on('complete')//上传成功
task.on('fail')//上传失败
task.on('headerReceive')//接收上传的结果
task.on('progress')//监听上传进度
*/