-
方法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)); });二次封装
创建工具类方法
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)
Comments NOTHING