快捷導(dǎo)航

鴻蒙中Axios數(shù)據(jù)請求的封裝和配置方法

更新時間：2025年04月11日 10:13:51 作者：Mnebo

這篇文章主要介紹了鴻蒙中Axios數(shù)據(jù)請求的封裝和配置方法,本文給大家介紹的非常詳細,對大家的學(xué)習或工作具有一定的參考借鑒價值,需要的朋友參考下吧

1.配置權(quán)限應(yīng)用級權(quán)限和系統(tǒng)級權(quán)限

2.配置網(wǎng)絡(luò)請求的代碼

"requestPermissions": [
  { "name": "ohos.permission.INTERNET" }
],

3.下載在Entry中下載Axios

//終端中運行
ohpm install @ohos/axios

4.封裝Http請求

實現(xiàn)思路：

//1.創(chuàng)建AXIOS的實例對象

//配置基地址，超時時間

//2.配置請求攔截器

//3.配置響應(yīng)攔截器

//4.封裝Htpp類

//5.創(chuàng)建并導(dǎo)出 http實例對象

//6.統(tǒng)一導(dǎo)出

import axios, { AxiosError, AxiosRequestConfig, AxiosResponse } from "@ohos/axios"
import { logger } from "./Logger"
const baseURL = 'https://api-harmony-teach.itheima.net'
//1.創(chuàng)建AXIOS的實例對象
//配置基地址，超時時間
//create 創(chuàng)建一個新的Axios對象 可以多個接口使用 
export  const instance =axios.create({
  baseURL,
  timeout:6000
})
//2.配置請求攔截器 (前端給后端的東西)
instance.interceptors.request.use((config:InternalAxiosRequestConfig)=>{
  const user = auth.getUser()
  if(user.token){
    config.headers.Authorization = `Bearer ${ user.token}`
  }
  return config
},(err: AxiosError) => {
  logger.error('Req Error', JSON.stringify(err))
  return Promise.reject(err)
})
//3.配置響應(yīng)攔截器   后端給前端的東西
// instance.interceptors.response.use(()=>{成功} ,()=>{失敗})
//攔截器interceptors
//response通常指的是網(wǎng)絡(luò)請求的響應(yīng)。這是一個結(jié)構(gòu)體，用于封裝服務(wù)器返回的信息，
//AxiosResponse是Axios庫中的一個接口，用于表示HTTP響應(yīng)。以便開發(fā)者可以輕松地訪問響應(yīng)的各個部分。
instance.interceptors.response.use((res: AxiosResponse) => {
  //成功
  if (res.data.code === 10000) {
    logger.debug('Req Success', JSON.stringify(res.data.data))
    return res.data.data
  }
  //請求成功，回傳是錯誤的
  logger.error('Req Error', JSON.stringify(res.data))
  return Promise.reject(res.data)
}, (err: AxiosError) => {
  //失敗返回的錯誤
  logger.error('Req Error', JSON.stringify(err))
  return Promise.reject(err)
})
//4.封裝Htpp類
// 提供request方法
class Http {
  // Get 請求可以省略第二個泛型，因為axios默認是any任何值可傳
  //ResponseData 響應(yīng)數(shù)據(jù)類型 返回的數(shù)據(jù)(響應(yīng)回來的數(shù)據(jù))  
  //RequestData  請求數(shù)據(jù)類型 請求攜帶的參數(shù)
  //Object 給個默認值 有的是入?yún)?
 //AxiosResponse是Axios庫中的一個接口，用于表示HTTP響應(yīng)。以便開發(fā)者可以輕松地訪問響應(yīng)的各個部分。
  // request<T,D>
  //T是自己的，D是請求得到
  request<ResponseData, RequestData = Object>(config: AxiosRequestConfig<RequestData>) {
    return instance<null, ResponseData, RequestData>(config)
  }
}
//5.創(chuàng)建并導(dǎo)出 http實例對象
export const http = new Http()

5.頁面中使用

import axios, { AxiosError, AxiosRequestConfig, AxiosResponse } from "@ohos/axios"
import { logger } from "./Logger"
const baseURL = 'https://api-harmony-teach.itheima.net'
//1.創(chuàng)建AXIOS的實例對象
//配置基地址，超時時間
//create 創(chuàng)建一個新的Axios對象 可以多個接口使用 
export  const instance =axios.create({
  baseURL,
  timeout:6000
})
//2.配置請求攔截器 (前端給后端的東西)
instance.interceptors.request.use((config:InternalAxiosRequestConfig)=>{
  const user = auth.getUser()
  if(user.token){
    config.headers.Authorization = `Bearer ${ user.token}`
  }
  return config
},(err: AxiosError) => {
  logger.error('Req Error', JSON.stringify(err))
  return Promise.reject(err)
})
//3.配置響應(yīng)攔截器   后端給前端的東西
// instance.interceptors.response.use(()=>{成功} ,()=>{失敗})
//攔截器interceptors
//response通常指的是網(wǎng)絡(luò)請求的響應(yīng)。這是一個結(jié)構(gòu)體，用于封裝服務(wù)器返回的信息，
//AxiosResponse是Axios庫中的一個接口，用于表示HTTP響應(yīng)。以便開發(fā)者可以輕松地訪問響應(yīng)的各個部分。
instance.interceptors.response.use((res: AxiosResponse) => {
  //成功
  if (res.data.code === 10000) {
    logger.debug('Req Success', JSON.stringify(res.data.data))
    return res.data.data
  }
  //請求成功，回傳是錯誤的
  logger.error('Req Error', JSON.stringify(res.data))
  return Promise.reject(res.data)
}, (err: AxiosError) => {
  //失敗返回的錯誤
  logger.error('Req Error', JSON.stringify(err))
  return Promise.reject(err)
})
//4.封裝Htpp類
// 提供request方法
class Http {
  // Get 請求可以省略第二個泛型，因為axios默認是any任何值可傳
  //ResponseData 響應(yīng)數(shù)據(jù)類型 返回的數(shù)據(jù)(響應(yīng)回來的數(shù)據(jù))  
  //RequestData  請求數(shù)據(jù)類型 請求攜帶的參數(shù)
  //Object 給個默認值 有的是入?yún)?
 //AxiosResponse是Axios庫中的一個接口，用于表示HTTP響應(yīng)。以便開發(fā)者可以輕松地訪問響應(yīng)的各個部分。
  // request<T,D>
  //T是自己的，D是請求得到
  request<ResponseData, RequestData = Object>(config: AxiosRequestConfig<RequestData>) {
    return instance<null, ResponseData, RequestData>(config)
  }
}
//5.創(chuàng)建并導(dǎo)出 http實例對象
export const http = new Http()

到此這篇關(guān)于鴻蒙中Axios數(shù)據(jù)請求的封裝和配置方法的文章就介紹到這了,更多相關(guān)鴻蒙 Axios數(shù)據(jù)請求內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: