vue全家桶进阶之路47:Vue3 Axios拦截器封装成request文件
可以将Axios拦截器封装成一个单独的request文件,以便在整个应用程序中重复使用。
以下是一个示例,展示如何将Axios拦截器封装成一个request文件:
1、创建一个名为request.js的新文件,并导入Axios:
import axios from 'axios';
2、创建一个名为request的函数,并将其导出:
这将创建一个名为request的函数,并将其设置为具有基本URL的新的Axios实例。要在封装的Axios实例中添加超时设置,可以在创建Axios实例时传递timeout选项。
export const request = axios.create({
baseURL: 'https://example.com/api',
timeout: 5000, // 超时设置为5秒
});
3、在request函数中添加拦截器:
request.interceptors.request.use(function (config) {
// 在发送请求之前做些什么
return config;
}, function (error) {
// 对请求错误做些什么
return Promise.reject(error);
}); request.interceptors.response.use(function (response) {
// 对响应数据做点什么
return response;
}, function (error) {
// 对响应错误做点什么
return Promise.reject(error);
});
这将添加一个请求拦截器和一个响应拦截器。可以在这些拦截器中执行需要的操作,例如在请求发送之前添加身份验证标头或在响应返回后检查响应数据是否有误。
4、最后,导出request函数:
export default request;
5、现在可以在应用程序中使用request函数来执行网络请求,并且每个请求都将经过预定义的拦截器。例如:
import request from './request'; request.get('/users')
.then(function (response) {
console.log(response);
})
.catch(function (error) {
console.log(error);
});
这将使用封装的Axios实例发出GET请求,然后使用预定义的拦截器处理响应
完整示例:
要在发送请求之前携带Token和Username,可以使用请求拦截器来为所有请求添加身份验证标头,
请求拦截器检查localStorage中是否存在名为“token”和“username”的值,并将其添加为Authorization和Username标头。根据实际情况调整这些标头的名称和值。
要对响应数据进行操作,使用响应拦截器。在上面的示例中,响应拦截器检查响应数据中的“status”属性是否为“success”。如果不是,则将其视为错误,并将其作为异常抛出。异常包含响应对象,其中包含所有响应信息,例如响应头、状态码和响应体。可以根据实际情况调整这些检查和异常抛出的逻辑。
import axios from 'axios'; export const request = axios.create({
baseURL: 'https://example.com/api',
timeout: 5000, // 超时设置为5秒
}); request.interceptors.request.use(function (config) {
// 在发送请求之前添加身份验证标头
config.headers.Authorization = `Bearer ${localStorage.getItem('token')}`;
config.headers.Username = localStorage.getItem('username');
return config;
}, function (error) {
// 对请求错误做些什么
return Promise.reject(error);
}); request.interceptors.response.use(function (response) {
// 对响应数据做些什么
const responseData = response.data;
if (responseData.status !== 'success') {
const error = new Error(responseData.message || '请求失败');
error.response = response;
throw error;
}
return responseData.data;
}, function (error) {
// 对响应错误做些什么
return Promise.reject(error);
});
vue全家桶进阶之路47:Vue3 Axios拦截器封装成request文件的更多相关文章
- Vue 全家桶 + Electron 开发的一个跨三端的应用
代码地址如下:http://www.demodashi.com/demo/11738.html GitHub Repo:vue-objccn Follow: halfrost · GitHub 利用 ...
- Vue全家桶高仿小米商城
大家好,我是河畔一角,时隔半年再次给大家带来一门重量级的实战课程:<Vue全家桶高仿小米商城>,现在很多公司都在参与到商城的构建体系当中,因此掌握一套商城的标准开发体系非常重要:商城的开始 ...
- vue证明题一,vue全家桶的构成
简单说下vue的构成,当然是简单为主,网上这东西满天飞,简单说几句就ok 1.vue是什么 vue读作view,是一种js框架.只关注于视图层,操作内容包括js,html,css 2.vue全家桶是什 ...
- 用 Vue 全家桶二次开发 V2EX 社区
一.开发背景 为了全面的熟悉Vue+Vue-router+Vuex+axios技术栈,结合V2EX的开放API开发了这个简洁版的V2EX. 在线预览 (为了实现跨域,直接npm run dev部署的, ...
- Vue全家桶
简介 “简单却不失优雅,小巧而不乏大匠”. Vue.js 是一个JavaScriptMVVM库,是一套构建用户界面的渐进式框架.它是以数据驱动和组件化的思想构建的,采用自底向上增量开发的设计. 为什么 ...
- 从零开始系列之vue全家桶(3)安装使用vuex
什么是vuex? vuex:Vue提供的状态管理工具,用于同一管理我们项目中各种数据的交互和重用,存储我们需要用到数据对象. 即data中属性同时有一个或几个组件同时使用,就是data中共用的属性. ...
- 使用vue全家桶制作博客网站
前面的话 笔者在做一个完整的博客上线项目,包括前台.后台.后端接口和服务器配置.本文将详细介绍使用vue全家桶制作的博客网站 概述 该项目是基于vue全家桶(vue.vue-router.vuex.v ...
- 转载: 使用vue全家桶制作博客网站 HTML5 移动网站制作的好教程
使用vue全家桶制作博客网站 前面的话 笔者在做一个完整的博客上线项目,包括前台.后台.后端接口和服务器配置.本文将详细介绍使用vue全家桶制作的博客网站 概述 该项目是基于vue全家桶(vue. ...
- Vue全家桶介绍
一直不清楚全家桶是什么玩意,上网搜了一下,才知道就是平时项目中使用的几个依赖包,下面分享一下 Vue 全家桶介绍 Vue有著名的全家桶系列,包含了vue-router(http://router.vu ...
- 一个简单的假vue全家桶(vue+vue-router+require)
首先说明我觉得这是一个比较好理解的vue全家桶(虽然是假的),模块化也是用require来做的,而且如果后期有必要压缩我也会用gulp来做 1.依赖个个本地模块,require只是用来载入page,这 ...
随机推荐
- SQLServer自带备份优劣分析
众所周知, SQL Server自身的"维护计划"可以实现自动备份数据库. 既然这样,那还有必要使用第三方专业备份软件吗? 本文以[护卫神·好备份专业版]为例,分析两者之间的优劣. ...
- docker 学习之一 装MySQL 供远程使用 Linux
因为Linux发行版本的问题折腾了好久,尽量使用LTS的版本.其他版本有时候缺的东西太多了,对新手相当不友好. 大概花了几天实在没招了,下了个LTS的版本,再装时正常了.按照官方文档都可以搞定了. 使 ...
- ansible用authorized_key模块批量推送密钥到受控主机实现免密登录
一,ansible的authorized_key模块的用途 用来配置密钥实现免密登录: ansible所在的主控机生成密钥后,如何把公钥上传到受控端? 当然可以用ssh-copy-id命令逐台手动处理 ...
- D3和X6
D3 版本 d3已经更新到v7版本,中文文档只更新到v4版本,存在部分api不适用和过时问题 使用d3-darge插件布局,插件适配d3版本为v5,近年未更新 API 使用darge中setNode和 ...
- HashMap正确遍历方式,千万不要再forforfor啦!!!
for (int i = 0; i < map.size(); i++) { if (map.get(i)/n>=0.01) { num++; } } 上述代码报空指针异常.为什么? 循环 ...
- WebDriver API及对象识别技术
html页面的iframe的切换: iframe框架在html页面:实际就是多个html页面的相互嵌套:如果存在多个,则操作对象一直停留在主文档页面: 如果需要操作子文档页面则需要实现ifram ...
- 更新pip遇到的问题及解决方法
问题ython -m pip install --upgrade pip --user D:\APP\Anaconda3\python.exe: No module named pip解决方法 pyt ...
- post-css/less/sass样式嵌套与命令之"&"符号—BEM
看了< less 的 & 详解 https://www.jianshu.com/p/127b0974cfc3>,对于此文再做一别补充 常见用法: 直接嵌套写法 .a{ colo ...
- 【Diary】CSP-J 2019 游记
大废话游记. CSP-J1 Day-1 写13年的初赛题.感觉挺简单.但是问题求解第二问数数数错了,加上各种sb错误,只写了八十几分... 然后跑去机房问,那个相同球放相同袋子的题有没有数学做法. 没 ...
- LeeCode数组问题:二分查找
LeeCode 704 二分查找 题目描述: 给定一个 n 个元素有序的(升序)整型数组 nums 和一个目标值 target ,写一个函数搜索 nums 中的 target,如果目标值存在返回下标, ...