html+Vue+封装axios实现发送请求

在html中使用Vue和Axios时,可以在HTML中引入Vue库和Axios库,然后使用Vue的语法和指令来创建Vue组件和模板。在Vue组件中,你可以使用Axios发送HTTP请求来获取数据,并将数据绑定到Vue模板中进行展示。



这段代码在HTML中使用了Vue,使用axios并设置了请求拦截器和响应拦截器。它实现了在页面中发送请求并显示响应数据的功能。

在模板中,有一个按钮,当点击按钮时,会调用getData方法发送请求。响应数据会显示在页面上的response变量中。

在created生命周期钩子中,我们设置了请求拦截器和响应拦截器。请求拦截器会在发送请求之前执行,可以在此处进行一些操作,比如添加请求头、修改请求参数等。响应拦截器会在接收到响应数据之后执行,可以在此处对响应数据进行处理,比如解析数据、错误处理等。

这样,每次发送请求时,拦截器会先执行相应的操作,然后再发送请求或处理响应数据。

想要实现封装Axios以及请求拦截器和响应拦截器,只需将相应的操作提取出来,放在一个文件夹下,在需要使用的地方使用script引入文件即可。 

/** axios封装
 * 请求拦截、相应拦截、错误统一处理
 */

每一个请求都会经过请求拦截和响应拦截

请求拦截器:常常用于Token的主动处理 ,给每一个请求添加请求头token 对请求异常抛出。

响应拦截器:常常用于简化axios默认加了一层的data Token被动处理 对请求异常抛出。

响应拦截器:简化axios默认加了一层的data Token被动处理 对请求异常抛出。

axios默认加了一层data

这个res包括这个请求响应回来的所有信息

所有的接口请求都会回到这里

获取到本次请求得到的数据

 

你可能感兴趣的:(vue.js,html,javascript)