axios的使用及说明

news2024/11/26 23:28:17

目录

1.说明

2.直接使用

3.封装使用

4.注意

1.说明

官网：Axios 实例 | Axios中文文档 | Axios中文网

Axios 是一个基于 promise 网络请求库，作用于node.js 和浏览器中。 它是 isomorphic 的(即同一套代码可以运行在浏览器和node.js中)。在服务端它使用原生 node.js http 模块, 而在客户端 (浏览端) 则使用 XMLHttpRequests。 

在前端项目中通过axios进行发送请求，通过代理后调用后端接口，并接收返回，将返回信息显示在前端画面中。

axios返回的是一个promise。执行then方法，接收执行成功的结果，显示在画面中。执行catch 方法用于对执行异常进行处理，如弹出提示信息。执行finally方法用于进行清理工作，如关闭画面loading。

2.直接使用

①安装

npm install axios

②配置

在js或ts文件中创建请求的文件，用于设置请求的共同配置及请求拦截器和响应拦截器。

(1)导入axios

import axios from "axios";

(2)设置全局的axios的配置

通过axios的defaults进行配置。可以设置基础url，这样在api请求中只需要设置相对url；

可以配置共用的请求头，如token及其他的自定义的请求头。

也可以为某个请求配置独有的请求头属性。

//配置请求的基础url
axios.defaults.baseURL = 'https://api.example.com';
//配置共同的请求头，所有的请求头中都带有X-request
axios.defaults.headers.common['X-request'] = 'ajax';
//配置post请求头，只对post请求起作用，在post请求头中设置Content-Type
axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded';

(3)配置请求拦截器及响应拦截器

请求拦截器：

// 添加请求拦截器
axios.interceptors.request.use(function (config) {
    // 在发送请求之前做些什么
    return config;
  }, function (error) {
    // 对请求错误做些什么
    return Promise.reject(error);
  });

方法中接收两个函数。

第一个函数是在请求前进行一个配置，如可以在请求头中添加token，进行请求url前缀的配置，请求参数的映射配置，防止数据重复提交的配置。

第二个函数是请求发送失败时的处理。

响应拦截器：

// 添加响应拦截器
axios.interceptors.response.use(function (response) {
    // 2xx 范围内的状态码都会触发该函数。
    // 对响应数据做点什么
    return response;
  }, function (error) {
    // 超出 2xx 范围的状态码都会触发该函数。
    // 对响应错误做点什么
    return Promise.reject(error);
  });

 方法中接收两个函数。

2xx 范围内的状态码都会触发第一个函数。response对象的结构如下，后端响应的数据存放在data中。还有就是响应的http状态信息，响应头信息，请求的配置信息及request请求信息

{
  // `data` 由服务器提供的响应
  data: {},

  // `status` 来自服务器响应的 HTTP 状态码
  status: 200,

  // `statusText` 来自服务器响应的 HTTP 状态信息
  statusText: 'OK',

  // `headers` 是服务器响应头
  // 所有的 header 名称都是小写，而且可以使用方括号语法访问
  // 例如: `response.headers['content-type']`
  headers: {},

  // `config` 是 `axios` 请求的配置信息
  config: {},

  // `request` 是生成此响应的请求
  // 在node.js中它是最后一个ClientRequest实例 (in redirects)，
  // 在浏览器中则是 XMLHttpRequest 实例
  request: {}
}

 首先需要从data中获取后端响应的信息，对状态码进行判断，成功时，直接返回data，失败时，进行信息提示。

 超出 2xx 范围的状态码都会触发第二个函数。

示例：

在src/api下创建interceptor.ts文件，内容如下：

import axios from "axios";
import type { AxiosRequestConfig, AxiosResponse } from "axios";
import { Message, Modal } from "@arco-design/web-vue";
import { useUserStore } from "@/store";
import { getToken } from "@/utils/auth";

export interface HttpResponse<T = unknown> {
	status : number;
	msg : string;
	code : number;
	data : T;
}
//设置请求的基础url
if (import.meta.env.VITE_API_BASE_URL) {
	axios.defaults.baseURL = import.meta.env.VITE_API_BASE_URL;
}

/**
 * 请求拦截
 */
axios.interceptors.request.use(
	(config : AxiosRequestConfig) => {
		const token = getToken();
		if (token) {
			if (!config.headers) {
				config.headers = {};
			}
            //设置token及自定义请求头
			config.headers['token'] = token;
			config.headers['X-Requested-With'] = 'ajax';
		}
            // 设置请求前缀
		config.url = import.meta.env.VITE_APP_API_URL + config.url;
		return config;
	},
	(error) =>
		// do something
		Promise.reject(error)
);

/**
 * 响应拦截
 *  todo 根据后端代码重新定制拦截逻辑
 */
axios.interceptors.response.use((response : AxiosResponse<any>) => {
	const res = response.data;
	let resCode = res.resHdr?.resCode;
	let resMsg = res.resHdr?.resMsg || "请求未知异常";
    //判断后端借口的返回值，异常时进行报错
	if (resCode !== "0000") {
		Message.error({
			content: resMsg,
			duration: 5 * 1000
		});
		return Promise.reject(new Error(resMsg));
	}
    //返回后端接口的内容
	return res;
},
	(error) => {
		Message.error({
			content: error.msg || "请求未知异常",
			duration: 5 * 1000
		});
		return Promise.reject(error);
	}
);

(4)在main.js文件中导入

导入(3)中的axios配置文件

import { createApp } from "vue";
import ArcoVue from "@arco-design/web-vue";
import ArcoVueIcon from "@arco-design/web-vue/es/icon";
import globalComponents from "@/components";
import router from "./router";
import store from "./store";
import i18n from "./locale";
import directive from "./directive";
import App from "./App.vue";
// Styles are imported via arco-plugin. See config/plugin/arcoStyleImport.ts in
// the directory for details
// 样式通过 arco-plugin 插件导入。详见目录文件 config/plugin/arcoStyleImport.ts
// https://arco.design/docs/designlab/use-theme-package
import "@/assets/style/global.less";
//导如axios的配置
import "@/api/interceptor";

const app = createApp(App);
app.use(ArcoVue, {});
app.use(ArcoVueIcon);
app.use(router);
app.use(store);
app.use(i18n);
app.use(globalComponents);
app.use(directive);

app.mount("#app");

(5)在各个模块的api文件中导入后进行使用

import axios from "axios";
import {ResponseData,RequestData} from "@/types/request";
// 接口
// 修改及新增的form表单接口
export interface insertFormModel {
    bsNo: string;
    deptId: string;
    deptNm: string;
    bsProvinceId: string;
    bsProvince: string;
    bsCityId: string;
    bsCity: string;
    bsAddr: string;
    remark: string;
}
// 下拉选择器类型
export interface selectType{
    value:string;
    label:string;
}


// 后端请求
// 分页查询
export async function listPage(params: RequestData): Promise<any> {
    return axios.post<ResponseData>("/tianjiannongshi/breedingStation/mb1407", params);
}
// 插入及更新
export async function insert(params: RequestData): Promise<any> {
    return axios.post<ResponseData>("/tianjiannongshi/breedingStation/mb1401", params);
}

发送get请求示例

const axios = require('axios');

// 向给定ID的用户发起请求
axios.get('/user?ID=12345')
  .then(function (response) {
    // 处理成功情况
    console.log(response);
  })
  .catch(function (error) {
    // 处理错误情况
    console.log(error);
  })
  .finally(function () {
    // 总是会执行
  });

// 上述请求也可以按以下方式完成（可选）
axios.get('/user', {
    params: {
      ID: 12345
    }
  })
  .then(function (response) {
    console.log(response);
  })
  .catch(function (error) {
    console.log(error);
  })
  .finally(function () {
    // 总是会执行
  });  

// 支持async/await用法
async function getUser() {
  try {
    const response = await axios.get('/user?ID=12345');
    console.log(response);
  } catch (error) {
    console.error(error);
  }
}

3.封装使用

①安装

npm install axios

②配置

在js或ts文件中创建请求的文件，用于设置请求的共同配置及请求拦截器和响应拦截器。

(1)导入axios

import axios from "axios";

(2)设置全局的axios的配置(按照需要进行设置)

参照上面

(3)创建axios实例

const service = axios.create({
  baseURL: 'http://localhost:5173', // api的base URL
  timeout: 5000, // 设置请求超时时间
  responseType: 'json',
  withCredentials: true, // 是否允许带cookie这些
  headers: {
    'x-token': '777'
  },
});

 可以在创建实例中设置基础url及请求超时时间，创建实例前设置的全局信息，在创建实例后可以进行修改，如下：

 (4)创建请求拦截器及响应拦截器

在(3)中创建了axios的实例service。通过service创建拦截器。

// 添加请求拦截器
service.interceptors.request.use(function (config) {
    // 在发送请求之前做些什么
    config.headers['Authorization'] = 'Bearer ' +'13123123123';
    console.log('请求信息：' + JSON.stringify(config))
    return config;
  }, function (error) {
    // 对请求错误做些什么
    console.log('请求失败信息'+ error)
    return Promise.reject(error);
  });

// 添加响应拦截器
service.interceptors.response.use(function (response) {
    // 2xx 范围内的状态码都会触发该函数。
    // 对响应数据做/o点什么
    return response;
  }, function (error) {
    // 超出 2xx 范围的状态码都会触发该函数。
    // 对响应错误做点什么
    return Promise.reject(error);
  });

最后导出axios实例。

示例：

在src/api下创建interceptor.ts文件，内容如下：

import axios from 'axios';

// 全局 axios 默认值
axios.defaults.headers['Content-Type'] = 'application/json;charset=utf-8';
axios.defaults.baseURL = 'http://localhost:5173';
axios.defaults.timeout = 5000;
axios.defaults.headers.common['X-Custom-Header'] = '369852147';
axios.defaults.headers.post['X-ajax'] = 'ajax';
const service = axios.create({
  baseURL: 'http://localhost:5173', // api的base URL
  timeout: 5000, // 设置请求超时时间
  responseType: 'json',
  withCredentials: true, // 是否允许带cookie这些
  headers: {
    'x-token': '777'
  },
});

// 添加请求拦截器
service.interceptors.request.use(function (config) {
    // 在发送请求之前做些什么
    config.headers['Authorization'] = 'Bearer ' +'13123123123';
    console.log('请求信息：' + JSON.stringify(config))
    return config;
  }, function (error) {
    // 对请求错误做些什么
    console.log('请求失败信息'+ error)
    return Promise.reject(error);
  });

// 添加响应拦截器
service.interceptors.response.use(function (response) {
    // 2xx 范围内的状态码都会触发该函数。
    // 对响应数据做/o点什么
    return response;
  }, function (error) {
    // 超出 2xx 范围的状态码都会触发该函数。
    // 对响应错误做点什么
    return Promise.reject(error);
  });

  export default service;

 (5)导入axios实例进行使用

import {defineStore} from 'pinia'
import {ref} from 'vue'
//导入axios实例
import request from '@/api/interceptor';
// import axios from 'axios';
export const useChannelStore = defineStore('channel',() =>{

    // 声明数据
    const list = ref([]);
    // 声明操作数据的方法

    const getList = async () =>{
        //使用axios实例发送请求
        const {data:{data}} = await request.post('/v1_0/channels');
        list.value = data.channels;
    }
    // 声明getters相关

    return {
        list,
        getList
    }

})

4.注意

①使用2中直接使用的方法，需要在main.js文件中导入axios的配置文件，在其他地方使用时依然导入axios进行使用。

②使用3中封装使用的方法，不需要再main.js中进行导入，在其他地方使用时导入创建的axio示例进行使用。

③创建自定义请求头中必须使用中划线，不能使用下划线，使用下划线需要在nginx中添加额外的配置让下划线生效，默认是忽略下滑线的。

 

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/1349506.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

FL Studio 21最新版本for mac 21.2.2.3740中文解锁版2024最新图文安装教程

FL Studio 21最新版本for mac 21.2.2.3740中文解锁版2024最新图文安装教程

FL Studio 21最新版本for mac 21.2.0.3740中文解锁版是最新强大的音乐制作工具。它可以与所有类型的音乐一起创作出令人惊叹的音乐。它提供了一个非常简单且用户友好的集成开发环境&#xff08;IDE&#xff09;来工作。这个完整的音乐工作站是由比利时公司 Image-Line 开发的。…
阅读更多...
redis容灾的方案设计

redis容灾的方案设计

背景 今年各个大厂的机房事故频繁&#xff0c;其中关键组件Redis是重灾区&#xff0c;本文就来看下怎么做Redis的多机房容灾 Redis多机房容灾方案 1.首先最最直观的是直接利用Redis内部的主从数据同步来进行灾备&#xff0c;但是由于Redis内部的主从实现对机房间的网络延迟等…
阅读更多...
2024 React 后台系统 搭建学习看这一篇就够了（1）

2024 React 后台系统 搭建学习看这一篇就够了（1）

年初&#xff0c;自己想写一篇关于 React 实战后台项目的 课程文章&#xff0c;也算是对自己 2023的前端学习做一个系统性总结&#xff0c;方便后续查阅&#xff0c;也方便自己浏览&#xff0c;还能增加自己的文笔 网上很多平台都不太稳定&#xff0c;所以用了阿里的语雀&…
阅读更多...
声明式导航传参详情

声明式导航传参详情

1 动态路由传参 路由规则path ->/article/:aid 导航链接 <router-link to"/article/1">查看第一篇文章</router-link> 组件获取参数: this.$route.params.aid 如果想要所有的值&#xff0c;就用this. $route. params 注意&#xff1a;这两个必须匹配…
阅读更多...
实战入门 K8s剩下三个模块

实战入门 K8s剩下三个模块

1.Label Label是kubernetes系统中的一个重要概念。它的作用就是在资源上添加标识&#xff0c;用来对它们进行区分和选择。 Label的特点&#xff1a; 一个Label会以key/value键值对的形式附加到各种对象上&#xff0c;如Node、Pod、Service等等 一个资源对象可以定义任意数量…
阅读更多...
信创之国产浪潮电脑+统信UOS Linux操作系统体验10：visual studio code中调试C++程序

信创之国产浪潮电脑+统信UOS Linux操作系统体验10：visual studio code中调试C++程序

☞ ░ 前往老猿Python博客 ░ https://blog.csdn.net/LaoYuanPython 一、引言 老猿在CSDN的《信创之国产浪潮电脑统信UOS操作系统体验2&#xff1a;安装visual studio code和cmake搭建C开发环镜》介绍了在国产浪潮电脑统信UOS操作系统中安装visual studio code和cmake搭建C开…
阅读更多...
2.3物理层下面的传输媒体

2.3物理层下面的传输媒体

目录 2.3物理层下面的传输媒体2.3.1导引型传输媒体1.双绞线2.同轴电缆3.光纤 2.3.2非导引型传输媒体无线电微波通信 2.3物理层下面的传输媒体 传输媒体是数据传输系统中在发送器和接收器之间的物理通路 两大类&#xff1a; 导引型传输媒体&#xff1a;电磁波被导引沿着固体媒体…
阅读更多...
linux下docker搭建Prometheus +SNMP Exporter +Grafana进行核心路由器交换机监控

linux下docker搭建Prometheus +SNMP Exporter +Grafana进行核心路由器交换机监控

一、安装 Docker 和 Docker Compose https://docs.docker.com/get-docker/ # 安装 Docker sudo apt-get update sudo apt-get install -y docker.io# 安装 Docker Compose sudo apt-get install -y docker-compose二、创建配置文件及测试平台是否正常 1、选个文件夹作为自建…
阅读更多...
jenkins+pytest+allure

jenkins+pytest+allure

jenkinspytestallure allure下载地址 Releases allure-framework/allure2 GitHub allure环境变量配置 allure --version 查看版本(确定是否配置完成) python安装allure插件 pip install allure-pytest pytest的运行指令 pytest -sv test_demo.py 开发完毕后将代码上传到…
阅读更多...
【Unity自制手册】基于Unity中物体移动相关方法和API集锦（动图详解）

【Unity自制手册】基于Unity中物体移动相关方法和API集锦（动图详解）

&#x1f468;‍&#x1f4bb;个人主页&#xff1a;元宇宙-秩沅 &#x1f468;‍&#x1f4bb; hallo 欢迎 点赞&#x1f44d; 收藏⭐ 留言&#x1f4dd; 加关注✅! &#x1f468;‍&#x1f4bb; 本文由 秩沅 原创 &#x1f468;‍&#x1f4bb; 收录于专栏&#xff1a;uni…
阅读更多...
关于python解析mf4中二维信号数据的注意事项

关于python解析mf4中二维信号数据的注意事项

python解析mf4中的信号数据一般用np.ndarray存储&#xff0c;但是mf4中的一个信号有时不一定是一维数据&#xff0c;有时会是一个二维的&#xff0c;没错&#xff0c;就是一个信号数据就是二维的&#xff0c;这时候&#xff0c;np数组的每个元素也是一个数组&#xff0c;这个时…
阅读更多...
Docker support for NVIDIA GPU Accelerated Computing on WSL 2

Docker support for NVIDIA GPU Accelerated Computing on WSL 2

Docker support for NVIDIA GPU Accelerated Computing on WSL 2 0. 背景1. 安装 Docker Desktop2. 配置 Docker Desktop3. WLS Ubuntu 配置4. 安装 Docker-ce5. 安装 NVIDIA Container Toolkit6. 配置 Docker7. 运行一个 Sample Workload 0. 背景 今天尝试一下 NVIDIA GPU 在…
阅读更多...
服装店收银系统不只是收银 还需要线上商城和线上批发

服装店收银系统不只是收银 还需要线上商城和线上批发

一个综合性的服装店收银系统可以结合线上商城和线上批发功能&#xff0c;提供以下特点和优势&#xff1a; 线上商城&#xff1a;将服装店的商品信息同步到线上商城平台&#xff0c;让顾客可以通过网站或移动应用程序浏览和购买商品。线上商城可以实现在线支付、订单跟踪、售后服…
阅读更多...
Redis的集群模式：主从 哨兵 分片集群

Redis的集群模式：主从 哨兵 分片集群

基于Redis集群解决单机Redis存在的问题&#xff0c;在之前学Redis一直都是单节点部署 单机或单节点Redis存在的四大问题&#xff1a; 数据丢失问题&#xff1a;Redis是内存存储&#xff0c;服务重启可能会丢失数据 > 利用Redis数据持久化的功能将数据写入磁盘并发能力问题…
阅读更多...
机器学习的分类与经典算法

机器学习的分类与经典算法

机器学习算法按照学习方式分类&#xff0c;可以分为有监督学习&#xff08;Supervised Learning&#xff09;、无监督学习&#xff08;Unsupervised Learning&#xff09;、半监督学习&#xff08;Semi-supervised Learning&#xff09;、强化学习&#xff08;Reinforcement Le…
阅读更多...
【LMM 004】LLaVA-RLHF：用事实增强的 RLHF 对齐大型多模态模型

【LMM 004】LLaVA-RLHF：用事实增强的 RLHF 对齐大型多模态模型

论文标题&#xff1a;Aligning Large Multimodal Models with Factually Augmented RLHF 论文作者&#xff1a;Zhiqing Sun, Sheng Shen, Shengcao Cao, Haotian Liu, Chunyuan Li, Yikang Shen, Chuang Gan, Liang-Yan Gui, Yu-Xiong Wang, Yiming Yang, Kurt Keutzer, Trevor…
阅读更多...
树莓派4B-Python使用PyCharm的SSH协议在电脑上远程编辑程序

树莓派4B-Python使用PyCharm的SSH协议在电脑上远程编辑程序

目录 前言一、pycharm的选择二、添加SSH的解释器使用总结 前言 树莓派的性能始终有限&#xff0c;不好安装与使用高级一点的程序编辑器&#xff0c;如果只用thonny的话&#xff0c;本人用得不习惯&#xff0c;还不如PyCharm&#xff0c;所以想着能不能用电脑中的pycharm来编写…
阅读更多...
软件测试面试总结，备战金三银四

软件测试面试总结，备战金三银四

测试技术面试题 1、什么是兼容性测试&#xff1f;兼容性测试侧重哪些方面&#xff1f; 参考答案&#xff1a; 兼容测试主要是检查软件在不同的硬件平台、软件平台上是否可以正常的运行&#xff0c;即是通常说的软件的可移植性。 兼容的类型&#xff0c;如果细分的话&#x…
阅读更多...
【现代信息检索】国科大何苯老师现代信息检索课程作业 —— 第三次作业

【现代信息检索】国科大何苯老师现代信息检索课程作业 —— 第三次作业

1 docID判断 1判断 2100200311411510610710810901100111111211 表 1 评判情况 表 1 1 1 中是两个判定人员基于某个信息需求对 12 12 12 个文档进行相关性判定的结果&#xff08;0 不相关&#xff0c;1 相关&#xff09;。假定我们开发了一个 IR 系统&#xff0c;针对该…
阅读更多...
【C语言】大小端字节序详解

【C语言】大小端字节序详解

文章目录 前言引入大小端字节序大小端字节序的定义为什么会出现大小端之分示例&#xff1a;设计一个小程序来判断当前机器的字节序改进写法&#xff08;利用联合体成员共用同一块内存空间的特点&#xff09; 总结 前言 提示&#xff1a;这里可以添加本文要记录的大概内容&…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023