arkts发送网络请求

arkts发送网络请求

• 方法1
  使用官方提供的http模块

  // 引入包名
  import http from '@ohos.net.http';
  import { BusinessError } from '@ohos.base';
  
  // 每一个httpRequest对应一个HTTP请求任务，不可复用
  let httpRequest = http.createHttp();
  // 用于订阅HTTP响应头，此接口会比request请求先返回。可以根据业务需要订阅此消息
  // 从API 8开始，使用on('headersReceive', Callback)替代on('headerReceive', AsyncCallback)。 
  httpRequest.on('headersReceive', (header) => {
    console.info('header: ' + JSON.stringify(header));
  });
  httpRequest.request(
    // 填写HTTP请求的URL地址，可以带参数也可以不带参数。URL地址需要开发者自定义。请求的参数可以在extraData中指定
    "EXAMPLE_URL",
    {
      method: http.RequestMethod.POST, // 可选，默认为http.RequestMethod.GET
      // 开发者根据自身业务需要添加header字段
      header: {
        'Content-Type': 'application/json'
      },
      // 当使用POST请求时此字段用于传递请求体内容，具体格式与服务端协商确定
      extraData: "data to send",
      expectDataType: http.HttpDataType.STRING, // 可选，指定返回数据的类型
      usingCache: true, // 可选，默认为true
      priority: 1, // 可选，默认为1
      connectTimeout: 60000, // 可选，默认为60000ms
      readTimeout: 60000, // 可选，默认为60000ms
      usingProtocol: http.HttpProtocol.HTTP1_1, // 可选，协议类型默认值由系统自动指定
      usingProxy: false, // 可选，默认不使用网络代理，自API 10开始支持该属性
    }, (err: BusinessError, data: http.HttpResponse) => {
      if (!err) {
        // data.result为HTTP响应内容，可根据业务需要进行解析
        console.info('Result:' + JSON.stringify(data.result));
        console.info('code:' + JSON.stringify(data.responseCode));
        // data.header为HTTP响应头，可根据业务需要进行解析
        console.info('header:' + JSON.stringify(data.header));
        console.info('cookies:' + JSON.stringify(data.cookies)); // 8+
        // 当该请求使用完毕时，调用destroy方法主动销毁
        httpRequest.destroy();
      } else {
        console.error('error:' + JSON.stringify(err));
        // 取消订阅HTTP响应头事件
        httpRequest.off('headersReceive');
        // 当该请求使用完毕时，调用destroy方法主动销毁
        httpRequest.destroy();
      }
    }
  );

• 方法2
  使用第三方包，比如@ohos/axios或者@nutpi/request，本文使用axios

安装

ohpm install @ohos/axios

申请权限

在module.json5里面添加权限申请

"requestPermissions": [
      {
        "name": "ohos.permission.INTERNET",
        "reason": "$string:network_reson"
      },
]

使用示例

get请求

import axios from '@ohos/axios'
interface userInfo{
  id: number
  name: string,
  phone: number
}

// 向给定ID的用户发起请求
axios.get<userInfo, AxiosResponse<userInfo>, null>('/user?ID=12345')
.then((response: AxiosResponse<userInfo>)=> {
  // 处理成功情况
  console.info("id" + response.data.id)
  console.info(JSON.stringify(response));
})
.catch((error: AxiosError)=> {
  // 处理错误情况
  console.info(JSON.stringify(error));
})
.then(()=> {
  // 总是会执行
});

// 上述请求也可以按以下方式完成（可选）
axios.get<userInfo, AxiosResponse<userInfo>, null>('/user', {
  params: {
    ID: 12345
  }
})
.then((response:AxiosResponse<userInfo>) => {
  console.info("id" + response.data.id)
  console.info(JSON.stringify(response));
})
.catch((error:AxiosError) => {
  console.info(JSON.stringify(error));
})
.then(() => {
  // 总是会执行
});

// 支持async/await用法
async function getUser() {
  try {
        const response:AxiosResponse = await axios.get<string, AxiosResponse<string>, null>(this.getUrl);
        console.log(JSON.stringify(response));
      } catch (error) {
    console.error(JSON.stringify(error));
  }
}

post请求

interface user {
  firstName: string,
  lastName: string
}
   axios.post<string, AxiosResponse<string>, user>('/user', {
     firstName: 'Fred',
     lastName: 'Flintstone'
   })
   .then((response: AxiosResponse<string>) => {
     console.info(JSON.stringify(response));
   })
   .catch((error) => {
  console.info(JSON.stringify(error));
});

二次封装

创建工具类方法

utils/request.ets

import axios, { AxiosError, AxiosResponse, InternalAxiosRequestConfig } from '@ohos/axios'
import { PreferencesManager } from '@yue/preferences_manager'
import router from '@ohos.router';

const instance = axios.create({
  baseURL: 'https://exapmle.com/api',
  timeout: 30000,
  headers: { 'client': 'app' }
});
// 添加请求拦截器
instance.interceptors.request.use((config: InternalAxiosRequestConfig) => {
  // 获取token
  const token = PreferencesManager.defManager.get("access_token", "")
  if (token) {
    config.headers.Authorization = 'Bearer ' + token
  }
  return config;
}, (error: AxiosError) => {
  // 对请求错误做些什么
  return Promise.reject(error);
});


// 添加响应拦截器
instance.interceptors.response.use((response: AxiosResponse) => {
  // 对响应数据做点什么
  return response.data
}, (error: AxiosError) => {
  if (error.response?.status === 401) {
    router.pushUrl({
      url: 'pages/Login'
    })
  }
  // 对响应错误做点什么
  return Promise.reject(error);
});

export class HTTP {
  // 全部请求
  static request<T>(config: InternalAxiosRequestConfig): Promise<T> {
    return instance<null, T>(config)
  }

  //Get请求
  static get<T>(url: string, params?: object): Promise<T> {
    return instance.get<null, T>(url, { params })
  }

  //Post请求
  static post<T>(url: string, data?: object, config?: object): Promise<T> {
    return instance.post<null, T>(url, data, config)
  }

  //Put请求
  static put<T>(url: string, data?: object): Promise<T> {
    return instance.put<null, T>(url, data)
  }

  //Delete请求
  static delete<T>(url: string, data?: object): Promise<T> {
    return instance.delete<null, T>(url, { data })
  }
}

export default HTTP

使用示例

get请求

import { HTTP } from '../utils/request'
import { AxiosResponse } from '@ohos/axios'

HTTP.get<Array<Album>>("/gateway/myGalleryList")
.then(res => {
    this.albumList = res
    if (res.length) {
    this.galleryId = res[0].id
    this.getImageList()
    }
})

post请求

Http.post<LoginResponse>("/auth/login", this.form)
    .then((res) => {
      console.log(JSON.stringify(res));
    })

文件上传

const buffer = new ArrayBuffer(stat.size);
fs.readSync(file.fd, buffer);

const formData = new FormData()
formData.append('file', buffer);

await HTTP.post<UploadResp>('/gateway/upload', formData, {
    headers: {
    mtextra: encodeURIComponent(JSON.stringify(params)),
    ctime: stat.ctime * 1000,
    devicename: deviceInfo.productModel,
    filename: file.name,
    'Content-Type': 'multipart/form-data'
    } as Header
} as Config)