axios的使用及说明

目录

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 somethingPromise.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 URLtimeout: 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 URLtimeout: 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.hqwc.cn/news/313041.html

如若内容造成侵权/违法违规/事实不符，请联系编程知识网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

【期末复习】 计算机操作系统

【期末复习】 计算机操作系统

第一章 操作系统引论 历史上最重要的阶段可能会考选择填空&#xff0c;牢记三大特点&#xff0c;四大特征&#xff0c;五大功能 1.1 OS的目标和作用 1.2 OS的发展过程 1.3 OS的基本特性&#xff08;必考&#xff09; 并发 共享 虚拟 异步 1.4 OS的主要功能 后续都是一个大章 五…
阅读更多...
DrGraph原理示教 - OpenCV 4 功能 - 阈值

DrGraph原理示教 - OpenCV 4 功能 - 阈值

普通阈值 OpenCV中的阈值用于相对于提供的阈值分配像素值。在阈值处理中&#xff0c;将每个像素值与阈值进行比较&#xff0c;如果像素值小于阈值则设置为0&#xff0c;否则设置为最大值&#xff08;一般为255&#xff09;。 在OpenCV中&#xff0c;有多种阈值类型可供选择&am…
阅读更多...
DevOps系列之 JNI实现Java调用C的实现案例

DevOps系列之 JNI实现Java调用C的实现案例

JNI&#xff08;Java Native Interface&#xff09;允许Java代码与其他语言编写的代码进行交互。以下是一个简单的JNI示例&#xff0c;演示如何使用JNI在Java中调用C/C函数。 最终的目录结构如下&#xff1a; JNI&#xff08;Java Native Interface&#xff09;允许Java代码与其…
阅读更多...
docker应用部署(部署MySql,部署Tomcat,部署Nginx,部署Redis)

docker应用部署(部署MySql,部署Tomcat,部署Nginx,部署Redis)

Docker 应用部署 一、部署MySQL 搜索mysql镜像 docker search mysql拉取mysql镜像 docker pull mysql:5.6创建容器&#xff0c;设置端口映射、目录映射 # 在/root目录下创建mysql目录用于存储mysql数据信息 mkdir ~/mysql cd ~/mysqldocker run -id \ -p 3307:3306 \ --na…
阅读更多...
cocos creator + vscode debug

cocos creator + vscode debug

安装插件 安装插件&#xff1a;JavaScript Debugger 配置 7456 为本地cocos creator的启动端口 启动debug调试 选择对应的启动方式
阅读更多...
【LLM】人工智能应用构建的十大预训练NLP语言模型

【LLM】人工智能应用构建的十大预训练NLP语言模型

在人工智能领域&#xff0c;自然语言处理&#xff08;NLP&#xff09;被广泛认为是阅读、破译、理解和理解人类语言的最重要工具。有了NLP&#xff0c;机器可以令人印象深刻地模仿人类的智力和能力&#xff0c;从文本预测到情感分析再到语音识别。 什么是自然语言处理&#xf…
阅读更多...
【华为机试】2023年真题B卷（python）-滑动窗口最大值

【华为机试】2023年真题B卷（python）-滑动窗口最大值

一、题目 题目描述&#xff1a; 有一个N个整数的数组&#xff0c;和一个长度为M的窗口&#xff0c;窗口从数组内的第一个数开始滑动直到窗口不能滑动为止&#xff0c; 每次窗口滑动产生一个窗口和&#xff08;窗口内所有数的和&#xff09;&#xff0c;求窗口滑动产生的所有窗口…
阅读更多...
《深入理解C++11：C++11新特性解析与应用》笔记七

《深入理解C++11：C++11新特性解析与应用》笔记七

第七章 为改变思考方式而改变 7.1 指针空值--nullptr 7.1.1 指针空值&#xff1a;从0到NULL&#xff0c;再到nullptr 传统C头文件里NULL是一个宏定义&#xff1a; 在函数重载同时出现int和char *参数版本的函数时&#xff0c;使用NULL作为参数调用函数会调用int参数版本&…
阅读更多...
PiflowX组件-WriteToUpsertKafka

PiflowX组件-WriteToUpsertKafka

WriteToUpsertKafka组件 组件说明 以upsert方式往Kafka topic中写数据。 计算引擎 flink 有界性 Streaming Upsert Mode 组件分组 kafka 端口 Inport&#xff1a;默认端口 outport&#xff1a;默认端口 组件属性 名称展示名称默认值允许值是否必填描述例子kafka_h…
阅读更多...
Java集合/泛型篇----第六篇

Java集合/泛型篇----第六篇

系列文章目录 文章目录 系列文章目录前言一、HashTable（线程安全）二、TreeMap（可排序）三、LinkHashMap（记录插入顺序）四、泛型类前言 前些天发现了一个巨牛的人工智能学习网站，通俗易懂，风趣幽默，忍不住分享一下给大家。点击跳转到网站，这篇文章男女通用，看懂了就去…
阅读更多...
chrome浏览器记录不住网站登录状态，退出后再打开就需要重新登陆的解决办法

chrome浏览器记录不住网站登录状态，退出后再打开就需要重新登陆的解决办法

chrome浏览器记录不住网站登录状态&#xff0c;退出后再打开就需要重新登陆&#xff0c;比较繁琐。 解决办法&#xff1a; 1、chrome浏览器右上角三个竖的点&#xff0c;然后进入“设置”&#xff08;Settings&#xff09;&#xff0c;选择“隐私与安全”&#xff08;Privacy…
阅读更多...
I.MX8QM flexcan移植

I.MX8QM flexcan移植

Android SDK&#xff1a;imx8_13.0.0_1.2.0(android 13 u-boot 2022.04 kernel 5.15.74) 一、kernel 内核配置&#xff1a; # 相应的defconfig中添加使能下面两个宏。 # 官方默认的配置可能是以模块的方式编译&#xff0c;这里直接将can驱动编译到内核中 CONFIG_CANy CONFIG…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023