axios的封装

最新推荐文章于 2024-09-09 16:44:07 发布
最新推荐文章于 2024-09-09 16:44:07 发布
阅读量632 收藏 7
点赞数 14
文章标签： 前端 javascript vue.js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_74454396/article/details/136459875
版权
本文介绍了axios，一个流行的基于Promise的HTTP库，适用于浏览器和Node.js环境。文章详细讲解了如何下载和封装axios，以及如何使用请求和响应拦截器进行定制化处理，如设置请求头和处理响应错误。
摘要由CSDN通过智能技术生成

什么是axios

axios是一个基于Promise的Http库,可以用在浏览器和node.js中

封装axios

1.下载axios

2.创建目录、request || utils 进行封装

3.在文件中引入axios

4.创建实例

在实例里边可以对请求做一些配置 例如请求时长、baseURL、自定义请求头......

5.axios拦截器

axios给我们提供了两大类拦截器：

1：请求拦截器，请求方向的拦截(成功请求，失败请求)

2：响应拦截器，响应方向的拦截（成功响应，失败响应）

拦截器的作用：用于我们在网络请求的时候在发起请求或者响应时对操作进行相应的处理。

下图是对请求和响应拦截器做了一些处理

请求拦截可以对请求头做一些处理

如上图做了一个请求头携带token的逻辑

响应拦截器可以对响应后的数据做一些处理

上图对响应错误码做了一些处理的逻辑

我总结下来就这么多

欢迎大家补充！

聂财行
关注
axios 封装
12-11
Vue axios 二次封装 多种请求自适应 ** Fn: axios ** Intro: 公用封装的axios 已在main.js中进行 $axios代理 ** Intro: Store.state.permission.constUrl 为公用的接口前缀地址 ** Intro: url 方法接受参数 为定义的 接口地址后缀 ** Intro: data 方法接受参数 为定义的参数 ** Author: zyx ================= ** Fn: axiosImportFile ** Intro: 该方法用于导入excel文件 需改变content-type ** Author: zyx =================== * 专用于获取excel 流 * responseType: 'blob' * @param url * @returns {Promise}
axios 的封装
jia632133535的博客
01-03 928
// 封装请求 import axios from 'axios' import { ElMessage } from 'element-plus' // 请求 const http = axios.create({ baseURL: "https://www.liulongbin.top:8888/api/private/v1", timeout: 6000 }) // 请求拦截 http.interceptors.request.use(config => { //请求头.
axios封装
最新发布
hhhhhh5666的博客
09-09 544
Axios，是一个基于 promise 的网络请求库，可以运行 node.js 和浏览器中。
Vue---axios封装
weixin_51103262的博客
11-01 138
vue—axios封装 封装 import axios from 'axios' axios.defaults.baseURL="http://127.0.0.1:8000/" axios.defaults.timeout = 1000000; axios.defaults.headers.post['Content-Type'] = 'application/json'; axios.defaults.headers.put['Content-Type'] = 'application/json';
Axios封装
weixin_57844432的博客
03-17 2952
axios 是一个轻量的 HTTP客户端基于 XMLHttpRequest 服务来执行 HTTP 请求，支持丰富的配置，支持 Promise，支持浏览器端和 Node.js 端。自Vue2.0起，尤大宣布取消对 vue-resource 的官方推荐，转而推荐 axios。现在 axios 已经成为大部分 Vue 开发者的首选特性从浏览器中创建 XMLHttpRequests从 node.js 创建 http请求支持 Promise API拦截请求和响应转换请求数据和响应数据取消请求。
详解Vue中Axios封装API接口的思路及方法
10-14
在 Vue 中封装 Axios API 接口的主要目的是为了提高代码复用性和易维护性。以下是一个详细的封装过程： 1. **安装 Axios** 首先，需要在项目中安装 Axios。在命令行中执行 `npm install axios` 来添加 Axios 作为...
react + ts or vue + ts 通用axios封装的方法。
07-21
本篇文章将深入探讨如何在React+TS或Vue+TS项目中对axios进行通用封装，以便更好地管理API请求。 首先，我们了解下什么是axios。Axios是一个基于Promise的HTTP库，它可以在浏览器和node.js中使用。它具有丰富的特性...
vue3+webpack+vue-router路由封装+axios封装+vuex封装
05-23
vue3+webpack+vue-router路由封装+axios封装+vuex封装，下载资源中包括了vue3+webpack+vue-router路由封装+axios封装+vuex封装的相关代码，分别对vue-router路由进行了封装，对axios进行了封装，对vuex进行了封装，...
axios封装，使用拦截器统一处理接口，超详细的教程（推荐）
10-17
通过上述步骤，我们完成了一个简洁、高效且易于维护的axios封装，以及通过拦截器统一处理接口请求和响应的流程。这不仅减少了代码重复，也使得整个接口调用过程更加清晰、可控。在实际开发中，这种封装方式大大提高...
axios http请求拦截
qq_36262295的博客
11-04 2679
//引入axios import axios from 'axios' //默认公共路径 axios.defaults.baseURL = '/api' axios.interceptors.request.use((config) => {//请求拦截 //设置请求头添加token 看个人需求 config.headers.token = localStorage.getItem('token'); return config; }); axios.interceptors.respon
封装Axios
qinwei_123的博客
05-08 733
import axios from 'axios' import { baseURL } from '@/config' class HttpRequest { constructor(baseUrl = baseURL) { this.baseUrl = baseUrl this.queue = {} } getInsideConfig () { const...
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值