混合开发 axios 封装，拦截request和response

最新推荐文章于 2024-05-23 15:25:32 发布
最新推荐文章于 2024-05-23 15:25:32 发布
阅读量383 收藏
点赞数
分类专栏： 混合开发 文章标签： javascript 前端 json
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/yinianjian2017/article/details/122416438
版权
本文介绍了如何在前端项目中进行axios的封装，包括设置基础URL、配置请求头，以及添加请求和响应拦截器。在请求拦截器中处理预发送操作，响应拦截器则用于处理错误和状态码，例如当服务端返回code非200时显示错误提示。通过创建login.js模块并导出登录接口，然后在Vue组件中调用，实现了登录功能。在onBtnClick方法中，根据接口返回的code决定是否跳转到主界面。
摘要由CSDN通过智能技术生成

1、src目录下心间api目录

2、api目录下新建 axios.js

内容

import axios from 'axios'

import {Toast} from 'mand-mobile'

axios.defaults.baseURL = "http://127.0.0.1:4523/mock/546412/" //根路径

axios.defaults.withCredentials = true

axios.defaults.headers.post['Content-Type'] = 'application/json'

axios.interceptors.request.use(config => {

// 在发送请求之前做些什么

return config;

},

error => {

// 对请求错误做些什么

console.log("err --- "+error)

return Promise.reject(error);

});

axios.interceptors.response.use(res =>{

console.log("object : "+typeof res.data)

if (typeof res.data !== 'object') {

Toast.fail('服务端异常！')

return Promise.reject(res)

}

if (res.data.code != 200) {// 后面code是自己定义的返回体中字段

最低0.47元/天 解锁文章
yinianjian2017
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
vue-axios-interceptors：全局捕获和处理ajax响应
02-01
Vue-AXios拦截器 将Axios与Vue使用时，可以全局捕获和处理Ajax错误。 安装 npm install vue-axios-interceptors --save // or yarn add vue-axios-interceptors // Make sure you import this package after you've imported Vue: window . Vue = require ( 'vue' ) ; require ( 'vue-axios-interceptors' ) ; // Make sure the axios package is available globally on the window object: window . axios = require ( 'axios' ) ; 用法 程序包注册一个新的全局事件总线，该事件在window对象上被intercepted ，并在ajax调用导致错误时在其上发出多个事件。 您可以轻松地侦听这些事件以构建流畅的错误处理工作流，例如在负责显示错误消息的全局组件中： // E
axios封装拦截器.docx
05-09
**axios 拦截器详解** axios 是一个广泛使用的 JavaScript 库，它的主要功能是处理 HTTP 请求和响应。拦截器是 axios 的一个重要特性，它允许我们在请求被发送到服务器之前或者在服务器响应返回给客户端之后执行...
axios 请求拦截（request）与响应拦截（response）
留着鼻涕敲代码
10-19 4834
请求拦截（request） 请求拦截就是再发ajax之前做些什么！！ 例如：可以在请求拦截里面加个token请求头，做些判断等等！ 语法：axios.interceptors.request.use（（config）=>{},(error)=>{}） 参数： 参数1：请求正确走的函数 函数形参：请求正确里相关配置项 参数2：请求错误走的函数 函数形参：请求错误的相关配置项 // 添加请求拦截器 axios.interceptors.request.use(fu.
Axios配置中的请求响应拦截器
最新发布
m0_54007573的博客
05-23 769
Axios配置中的请求响应拦截器
axios request和response拦截器
扬帆前行
07-16 3289
main.js axios.interceptors.request.use(config => { if(store.state.token){ var str = store.state.token; // config.headers.common['Authorization']='JWT '+str; config.head...
有关axios的request与response拦截
weixin_44463883的博客
08-07 1572
// http request 拦截器 axios.interceptors.request.use( config => {　　　　 　var token = localStorage.getItem("antToken");　　//检查是否有token,有的话说明是已登录，没有就说明未登录　　　 　　　if (token) {　 　　　　//如果登录了就在每个接口的headers里面增加token　　　　 　　　　　　　config.headers.tok
axios的基本封装，包含request拦截器、response拦截器
7c
08-11 666
axios的基本封装，包含request拦截器、response拦截器
Vue封装Axios请求和拦截器的步骤
10-14
Vue封装Axios请求和拦截器的目的是为了提高代码的可维护性和复用性，以及提供统一的错误处理机制。以下是对这个主题的详细说明： 首先，我们需要在项目中安装axios。如果使用的是Vue CLI 3，可以通过`npm install ...
vue+ts下对axios的封装实现
10-15
在Vue.js和TypeScript的开发环境中，我们常常需要对第三方库如axios进行封装，以便更好地管理和定制网络请求。本文将详细介绍如何在Vue+TS项目中对axios进行封装，包括设置拦截器来处理请求和响应。 首先，确保你...
vue axios封装httpjs,接口公用配置拦截操作
10-14
在Vue项目中，为了提高代码复用性和管理效率，通常会进行HTTP请求的封装，本文主要介绍如何使用axios进行封装，并设置接口的公用配置和拦截操作。首先，我们需要在项目中的`src/utils`目录下创建一个名为`http.js`的...
详解axios中封装使用、拦截特定请求、判断所有请求加载完毕）
10-17
在`axios.js`中已经展示了如何设置拦截器，`axios.interceptors.request.use()`和`axios.interceptors.response.use()`分别用于处理请求前和响应后的逻辑。例如，你可以在这里添加身份验证、全局错误处理或者自定义...
vue 封装axiso及配置拦截request和response
码字不易，大家的支持就是我坚持下去的动力
04-01 463
在响应拦截器中，我们首先判断接口返回的状态码是否为 200。如果不是 200，则表示接口调用失败，此时我们使用 ElementUI 的 Message 组件提示用户失败原因，并根据返回的状态码进行相应的处理。如果返回的状态码为 200，则表示接口调用成功，将返回的数据进行返回。在这个示例中，我们首先创建了一个 Axios 实例，并在其中配置了请求的基础路径和超时时间。然后，我们通过请求拦截器和响应拦截器对请求和响应进行了统一的处理。在请求拦截器中，我们通过在请求头中添加 token 来实现用户认证。
【axios】拦截器：axios.interceptors.request.use|axios.interceptors.response.use
在这里你大概率会有所收获，欢迎指错||纠正||建议||水评+点赞&&评论&&关注&&转发
11-27 2695
axios有请求拦截器（request）、响应拦截器（response）、axios自定义回调处理（这里就是我们常用的地方，会将成功和失败的回调函数写在这里） 执行顺序: 请求拦截器 -> api请求 -> 响应拦截器->自定义回调。
axios拦截器： axios.interceptors.request.use，axios.interceptors.response.use
Allen的博客
12-01 4083
axios拦截器： axios.interceptors.request.use，axios.interceptors.response.use
axios拦截器之axios.interceptors.request.use和axios.interceptors.response.use
qq_59717525的博客
07-16 3041
简单配置： import axios from 'axios' import { Message, Loading } from 'element-ui' const loadOption={fullscreen: true ,lock: true, text: '拼命加载中......', spinner: 'el-icon-loading', background: 'rgba(255, 255, 255, 0.5)'} let loadingInstance=null; axios.in
axios的拦截请求与响应
weixin_30662849的博客
06-03 184
// 请求拦截（配置发送请求的信息） axios.interceptors.request.use(function (config) { // 处理请求之前的配置 return config }, function (error) { // 请求失败的处理 return Promise.reject(error) }) // 响应拦截（配置请求回来的信息）...
vue使用axios.interceptors.response响应拦截器。实现报错接口的重新加载，弹框报错点击按钮自动加载。
Min_Fox的博客
01-06 9747
vue使用axios.interceptors.response响应拦截器。实现报错接口的重新加载，弹框报错点击按钮自动加载。 axios.interceptors.response响应拦截器 axios.interceptors.response.use(function (res) { //这里是响应成功执行的代码 }, function axiosRetryInterceptor(err) { //这里是响应失败执行的代码 }); 我要实现的功能介绍 当接口请求超时，让报错接口默认再次加载一遍，第二遍
axios拦截器（请求拦截和响应拦截）
Oralinge
10-11 9650
axios拦截器分为request请求拦截器和response响应拦截器。 request请求拦截器：发送请求前统一处理，如：设置请求头headers等。 response响应拦截器：有时候我们要根据响应的状态码来进行下一步操作。 axios.interceptors.request.use(config => { config.interceptors = '请求拦截器' retu...
Axios拦截器
qq_44849271的博客
06-12 747
Axios拦截器 拦截器的作用： 在请求或响应被 then 或 catch 处理前拦截它们 说白了就是，在请求的时候，将请求拦截下来，可以给请求添加数据，或者查看该次请求；响应也是一样，将响应拦截下来，可以给响应的数据再添加数据，或者查看该次响应。 使用语法： 请求拦截器： axios.interceptors.request.use(callback); 响应拦截器： axios.interceptors.response.use(callback); callback是一个回调函数，回调函数
axios封装 拦截器
08-17
下面是一个简单的Axios封装和拦截器的示例： 首先，我们可以创建一个axios.js文件，用于封装Axios： ```javascript import axios from 'axios'; // 创建一个实例 const instance = axios.create({ baseURL: '...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值