草庐IT

Axios拦截器(Interceptors)

小柒、Q 2023-07-01 原文

Axios拦截器(Interceptors)

axios拦截器主要分为两种：请求拦截器和响应拦截器。

请求拦截器

请求拦截器作用是在发出请求时，拦截下用户的请求，执行完一系列处理再发送出去（像添加cookie、token，请求头等）

配置请求拦截器

  • 首先创建一个axios实例对象
import axios from 'axios'
import { ELMessage } from 'element-plus'
const myRequest = axios.create({
	baseURL: process.env.BASE_API, // 这里可以写自己访问的地址,例如127.0.0.1
	timeout: 3000, // 请求超时时间
	headers: {
		"Content-Type": "application/json;charset=utf-8"
	}
})

这样一个axios实例就创建好了，我们就可以用这个实例来访问我们需要访问的地址

  • 接下来就是配置请求拦截器(interceptor.request)
myRequest.interceptors.request.use(
	req=>{...}, // 对发起的请求进行处理，方法写在{}中，req是请求参数
	err=>{...}, // 出现请求错误时进行的处理
}

下面写一个设置token的实例：

myRequest.interceptors.request.use(
    config => {
        const token = localStorage.getItem('token') // 获取存取的token
        if(token){ // 不为空的话就设置进headers
            config.headers['token'] = token
        }
        return config
    },
    err => {
        return Promise.reject(error)
    }
)

配置响应拦截器

当服务器产生响应时，对响应数据进行拦截，并对拦截的数据进行处理，处理完数据再返回，比如对于成功的返回，我们只需要返回数据，那么我们可以直接处理数据，把不需要的数据去除再返回。如果出错的话，就返回错误信息，并用message显示错误。

  • 接下来就是配置响应拦截器(interceptor.response)
myRequest.interceptors.response.use(
	res=>{...}, // 对响应进行处理，方法写在{}中，res是返回数据
	err=>{...}, // 出现请求错误时进行的处理
)

假设服务器给我们的响应为：

{
	"errCode" : 0,
	"errDesc" : "Success",
	"data": "xxxxxx"
}

这时候我们可以这样写响应拦截器：

myRequest.interceptors.response.use(
    res => {
        if(res.errCode ==  0){
        	return Promise.resolve(res.data)
       	}
        else {
        	ElMessage({
	            message: "Error",
	            type: 'error',
	            duration: 5 * 1000
	        })
        	return Promise.reject(new Error("Error Message"))
		}
    },
    err => {
        ElMessage({
            message: err.data.message,
            type: 'error',
            duration: 5 * 1000
        })
    }
)

通过上面的处理之后，我们axios.xxx().then((res)=>{…})的res就为响应数据的data，其中errCode和errDesc就被处理掉了。

拦截器Interceptorsspantokenclass前端servletjava

有关Axios拦截器(Interceptors)的更多相关文章

  1. ruby-on-rails - 如何找出拦截 'method_missing' 的内容 - 2

    使用Ruby1.8.6/Rails2.3.2我注意到在我的任何ActiveRecord模型类上调用的任何方法都返回nil而不是NoMethodError。除了烦人之外，这还破坏了动态查找器(find_by_name、find_by_id等)，因为即使存在记录，它们也总是返回nil。不从ActiveRecord::Base派生的标准类不受影响。有没有办法追踪在ActiveRecord::Base之前拦截method_missing的是什么？更新:切换到1.8.7后，我发现(感谢@MichaelKohl)will_paginate插件首先处理method_missing。但是will_pa

  2. ruby - 如何拦截 ruby​​ 中的方法调用？ - 2

    我目前有一个父类(superclass)，它有一个函数，我希望所有子类在它的每个函数中调用该函数。该函数的行为应该像rails中的before_filter函数，但我不确定如何去实现before_filter。这是一个例子classSuperclassdefbefore_each_methodputs"BeforeMethod"#thisissupposedtobeinvokedbyeachextendingclass'methodendendclassSubclass 最佳答案 这是一种方法:classSuperclassdefb

  3. ruby - 如何在 Rails 3.0.3 中设置邮件拦截器？ - 2

    我正在使用rails3.0.3、ruby1.9.2-p180、邮件(2.2.13)。我正在尝试设置邮件拦截器，但出现以下错误/home/abhimanyu/Aptana_Studio_3_Workspace/delivery_health_dashboard_03/config/initializers/mailer_config.rb:16:in`':uninitializedconstantDevelopmentMailInterceptor(NameError)我该如何解决？我使用的代码如下所示:config/initializer/mailer_config.rbActionM

  4. javascript - Angular 5 提供基于环境的http拦截器 - 2

    我的angular-cli(v1.5.1，angularv5)应用程序中有以下两个环境:开发产品Dev使用模拟数据，我提供了一个http拦截器。Pro使用实时休息api。我如何在dev上提供http拦截器，而不是在pro上？我已经尝试了以下方法，但它不起作用:{provide:HTTP_INTERCEPTORS,useFactory:()=>{if(environment.useMockBackend===true){returnMockHttpInterceptor;}returnfalse;},multi:true} 最佳答案

  5. javascript - 我如何在 Capybara 中测试页面是否*未*重新加载(JavaScript onClick 拦截有效)？ - 2

    我正在使用Capybara、Cucumber和Poltergeist。我正在测试附加到表单提交按钮的JavaScript函数，该函数旨在捕获提交事件并阻止它(在后台执行AJAX请求)。使用和不使用AJAX，页面最终看起来都一样，但AJAX方法要快得多，并且不会中断浏览体验等。我可以做些什么来测试表单确实没有提交，并且更改是动态AJAX调用而不是重新加载的结果？ 最佳答案 @jules答案的修改版本:describe"Mypage",:jsdoit"reloadswhenitshould"dovisit"/"expect_page_t

  6. javascript - Angular 拦截器和 CORS - 2

    我正在尝试编写一个拦截器以使用Angular向所有HTTP请求添加一个token。我大致使用这里给出的食谱-https://thinkster.io/interceptors因此代码使用了http模块工厂和一个tokenInterceptor()函数。我可以成功地将token作为header添加到请求中-但现在当它通过拦截器时，它会被某种CORS阻塞机制阻塞。我在Chrome控制台中收到此错误-XMLHttpRequestcannotloadhttp://127.0.0.1:/.Responsetopreflightrequestdoesn'tpassaccesscontrolchec

  7. javascript - 拦截 JavaScript 数组访问器 - 2

    我想将一些副作用与每个数组访问器相关联，例如a[i]。例如，如果副作用是向控制台写入消息，则以下程序:vararray=[1,2,3]vartotal=0;for(variinarray){total+=array[i]}console.log(total);应该返回如下输出:1//accessa[0]2//accessa[1]3//accessa[2]6//printoriginaltotal如果我对拦截数组方法push感兴趣，我会使用此博客中的技术post并提供了一个拦截器:var_push=Array.prototype.push;Array.prototype.push=fun

  8. javascript - Node.js、Vue.js 和 Passport.js。 .isAuthenticated() 总是返回 false？可能是 Axios header ？ - 2

    我正在将一个项目转移到Vue.js，但我无法让我的任何中间件检查用户是否已登录或检查用户对工作的所有权。经过无休止的搜索，我认为问题是我从客户端发送到服务器的header不包含Passport序列化用户或其他内容？我怎样才能使它工作？这是我在后端的登录路径:router.post("/login",function(req,res,next){if(!req.body.username||!req.body.password){res.send("Error");}elseif(req.body.username.length>40||req.body.password.length>

  9. javascript - 拦截来自网页的每个请求 - 2

    是否可以使用javascript拦截从页面发出的每个请求？即单击链接、加载图像、ajax请求... 最佳答案 一句话，没有。没有任何地方可以Hook以获取所有请求。话虽如此，您可以使用javascript在链接上放置事件处理程序，查看图像标签的src属性等。没有“通用”的方式来连接所有AJAX请求-这取决于您使用的库。还有其他需要考虑的，比如CSS背景图片，Flash(如果一个flash文件发出请求怎么办？)。如果可能，您应该使用浏览器本身(例如Firebug)或代理(例如Fiddler)或数据包嗅探器(例如Ethereal...现

  10. javascript - 如何使用在 getScript 回调函数内生成的 URL 打开一个新窗口，并避免弹出窗口拦截器？ - 2

    我遇到的问题是，当我尝试执行类似以下代码的操作时，窗口将被弹出窗口阻止程序阻止。我正在使用getScript以便我可以发出跨域请求。我正在使用jQuery1.4.2来执行以下操作。将被阻止的代码示例://Codethatgetsblockedbypop-upblockers$(document).ready(function(){$(".popup").click(function(){$.getScript("URL_To_A_Javascript_File",function(){window.open("dynamicURL","_blank");});});});越过拦截器但未

随机推荐