首页 > 其他分享 >鸿蒙开发 03 封装 @ohos/axios (最新深度封装)

鸿蒙开发 03 封装 @ohos/axios (最新深度封装)

时间:2024-07-20 17:54:41浏览次数:17  
标签:03 axios 封装 log error msg console data

鸿蒙开发 03 封装 @ohos/axios (最新深度封装)

1、安装 @ohos/axios

ohpm install @ohos/axios

在这里插入图片描述

Tips:按住Ctrl + Alt + Shift + S 可以查看你的 SDK 版本,如果你不是最新版(api 12)的话请降低 axios 的版本,不然会爆下面的错误:

ERROR: Failed :entry:default@MergeProfile…
hvigor ERROR: The compatibleSdkVersion 9 cannot be smaller than version 12 declared in library [:library]
as the library might be using APIS not available in 9
hvigor ERROR: BUILD FAILED in 256 ms

"@ohos/axios": "2.0.0"

在这里插入图片描述

2、开始封装

2.1 新建 utils 文件夹 和 api 文件夹

在这里插入图片描述

2.2 在 utils 文件夹里新建 http.ts

import axios, { AxiosInstance, AxiosRequestConfig, AxiosResponse, InternalAxiosRequestConfig } from "@ohos/axios";

// axios 请求配置
const config = {
  baseURL:'http://localhost:8080',
  // baseURL: '/api',
  timeout: 1000
}

// 定义返回值类型
interface Result<T = any> {
  code: number;
  message: string;
  data: T;
}

class Http {
  // axios 实例
  private instance: AxiosInstance;
  // 构造函数初始化
  constructor(config: AxiosRequestConfig) {
    this.instance = axios.create(config);
    //定义拦截器
    this.interceptors();
  }

  private interceptors() {
    // axios 发送请求之前的处理
    this.instance.interceptors.request.use((config: InternalAxiosRequestConfig) => {
      // 在请求头部携带token
      // let token = sessionStorage.getItem('token');
      let token = '';
      if (token) {
        config.headers!['token'] = token;
        // 把 token 放到 headers 里面
        // (config.headers as AxiosRequestHeaders).token = token;
      }
      console.log('' + config);
      return config;

    }, (error: any) => {
      error.data = {};
      error.data.msg = '服务器异常,请联系管理员!'
      return error;
    })
    // axios 请求返回之后的处理
    // 请求返回处理
    this.instance.interceptors.response.use((res: AxiosResponse) => {
      // console.log(res.data);
      if (res.data.code != 200) {
        console.log(res.data.msg || '服务器出错啦');
        return Promise.reject(res.data.msg || '服务器出错啦');
      } else {
        return res.data;
      }
    }, (error) => {
      console.log('进入错误!');
      error.data = {};
      if (error && error.response) {
        switch (error.response.status) {
          case 400:
            error.data.msg = "错误请求";
            console.log(error.data.msg);
            break;
          case 401:
            error.data.msg = "未授权,请登录";
            console.log(error.data.msg);
            break;
          case 403:
            error.data.msg = "拒绝访问";
            console.log(error.data.msg);
            break;
          case 404:
            error.data.msg = "请求错误,未找到该资源";
            console.log(error.data.msg);
            break;
          case 405:
            error.data.msg = "请求方法未允许";
            console.log(error.data.msg);
            break;
          case 408:
            error.data.msg = "请求超时";
            console.log(error.data.msg);
            break;
          case 500:
            error.data.msg = "服务器端出错";
            console.log(error.data.msg);
            break;
          case 501:
            error.data.msg = "网络未实现";
            console.log(error.data.msg);
            break;
          case 502:
            error.data.msg = "网络错误";
            console.log(error.data.msg);
            break;
          case 503:
            error.data.msg = "服务不可用";
            console.log(error.data.msg);
            break;
          case 504:
            error.data.msg = "网络超时";
            console.log(error.data.msg);
            break;
          case 505:
            error.data.msg = "http版本不支持该请求";
            console.log(error.data.msg);
            break;
          default:
            error.data.msg = `连接错误${error.response.status}`;
            console.log(error.data.msg);
        }
      } else {
        error.data.msg = "连接到服务器失败";
        console.log(error.data.msg)
      }
      return Promise.reject(error);
    })
  }
  // GET方法
  get<T = Result>(url: string, params?: object): Promise<T> {
    return this.instance.get(url, { params });
  }
  // POST方法
  post<T = Result>(url: string, data?: object): Promise<T> {
    return this.instance.post(url, data);
  }
  // PUT方法
  put<T = Result>(url: string, data?: object): Promise<T> {
    return this.instance.put(url, data);
  }
  // DELETE方法
  delete<T = Result>(url: string): Promise<T> {
    return this.instance.delete(url);
  }
}

export default new Http(config);

2.3 在 api 文件夹里新建 api.ets

// api.ts
import http from '../utils/http';

// 新增
export const testApi = () => {
  return http.get("/admin/term/list")
}

3、页面调用

import { testApi } from './api/api'

// 返回数据具体类型
interface term {
  id: number,
  monthCount: number,
  unit: string

}

// 定义返回值类型
interface Result<T = term> {
  code: number;
  message: string;
  data: Array<T>;
}

@Entry
@Component
struct Test7_19Page {
  @State message: string = 'Hello World'

  build() {
    Row() {
      Column() {
        Text(this.message)
          .fontSize(50)
          .fontWeight(FontWeight.Bold)
        Button() {
          Text('发起请求').fontSize(20)
        }.height(200).width(200)
        .onClick(async () => {
          let res: Result = await testApi();
          console.log(JSON.stringify(res.data[0]));
        })
      }
      .width('100%')
    }
    .height('100%')
  }
}

4、打印结果

在这里插入图片描述

标签:03,axios,封装,log,error,msg,console,data
From: https://blog.csdn.net/weixin_56050344/article/details/140573658

相关文章

  • CF1364D Ehab's Last Corollary 题解 (构造/独立集/找最小环)
    题意给出一张n个点的无向连通图和一个常数k。你需要解决以下两个问题的任何一个:找出一个大小为\(\lceil\frack2\rceil\)的独立集。找出一个大小不超过k的环。独立集是一个点的集合,满足其中任意两点之间在原图上没有边直接相连。可以证明这两个问题必然有一个可以......
  • springboot公寓租赁系统-计算机毕业设计源码03822
    目 录摘要1绪论1.1研究背景与意义1.2选题背景1.3论文结构与章节安排2 公寓租赁系统系统分析2.1可行性分析2.1.1技术可行性分析2.1.2经济可行性分析2.1.3法律可行性分析2.2系统功能分析2.2.1功能性分析2.2.2非功能性分析2.3系统用例......
  • [lnsyoj103/luoguP4147]玉蟾宫
    题意给定一个由F和R组成的矩阵\(a\),求\(a\)中最大的只由F组成的矩形的面积的三倍sol求最大矩形的常用方法为悬线法。首先,对于每一个F使用递推法计算出上方连续的F的数量,记为矩阵\(h\),然后对\(h\)的每一行计算每一个元素左右最远能延伸的距离,即该元素左右第一......
  • openFeign调用问题:required a bean of type 'xxx' that could not be found.
    场景:服务B是一个公共的服务,打包成jar后给其他服务使用packagecom.testB.seviceB.remote;//服务B中定义的feign接口@FeignClient(value="service-c",path="/service-c")publicinterfaceServiceBClient{xxxx} 服务A中引用服务B中定义的Feign接口package......
  • 【代码随想录训练营第42期 Day3打卡 LeetCode 203.移除链表元素,707.设计链表,206.反转
    一、做题感受今天是打卡的第三天,前两天题目主要考察数组相关知识,现在已经来到了链表的学习。题目共有三道,都是以考察单链表为主,整体来说难度不大,但是思路很灵活,尤其是反转链表的考察,双指针的新用法。今天做题总体感觉不错,能有自己的思考和理解。二、链表相关知识1.常见链表......
  • SQL Prompt安装不上(报错:1603)
     一开始一直跟踪服务看到是RedGateClient运行不起来(报错信息代码是这个1603),后面查询到官网:https://productsupport.red-gate.com/hc/en-us/articles/360015772598-Redgate-Client-Service-fails-to-start使用管理员运行CMD执行:netshhttpaddiplisten127.0.0.1 之后再......
  • PerFedRLNAS: One-for-All Personalized Federated Neural Architecture Search-_AAAI
    PerFedRLNAS:One-for-AllPersonalizedFederatedNeuralArchitectureSearch-AAAI'24-PerFedRLNAS背景与挑战:介绍个性化学习来解决设备异构和数据异构的问题。现有工作无法充分回答下面的两个问题:1.为什么个性化模型可以解决联邦的异构问题2.是否有标准和自动的方法来决......
  • FINCH: Enhancing Federated Learning With Hierarchical Neural Architecture Search
    背景与挑战:介绍FL联邦学习,指出两个联邦学习的缺点::::danger1.预定义的架构容易使模型训练陷入局部次优解,导致训练性能低下2.开发一个足够精确和小的模型来部署在客户端是很复杂的,这需要在迭代的试错过程中付出大量的人力:::(手动设计更高效的体系结构在很大程度上依赖于人类......
  • Peaches: Personalized Federated Learning with Neural Architecture Search in Edge
    背景:介绍联邦学习,参数服务器和workers之间的关系挑战:1.预定义模型:太大的架构可能会导致过度拟合问题和workers不必要的计算开销,而太小的架构可能会导致低训练性能2.数据不可访问:数据不可访问导致不能设计出真正高效的架构在边缘计算中使用FL。需要考虑三种挑战:1.异构数据2......
  • Real-Time Federated Evolutionary Neural Architecture Search-_TEC'22(B)-RT-FedEvo
    背景:1.介绍FL2.介绍NAS(讨论范围限制在CNN)宏搜索空间覆盖整个CNN模型,例如,隐藏层的数量n、操作类型(例如,卷积)和快捷连接的链接方法微观搜索空间仅覆盖整个模型结构中重复的基序或细胞。并且这些单元在复杂的多分支操作中构建介绍RT(强化学习)在NAS中的运用,因为RT要模拟采样,......