axios响应拦截处理(二次封装)搭配await更适合

axios请求拦截:添加额外参数:

平时接口封装:

import request from '@/utils/request';

// 
export const getList = async (data, otherConfig) => {
  return await request({
    url: `getList`,
    method: 'post',
    data,
    otherConfig
  });
};

// 平时使用,特殊页面
const res = await getList(data,{loading:true,...})


场景1:如果确定该接口为长接口,比较耗时等,其他相关配置baseURL等
export const getList = async (data, otherConfig) => {
  return await request({
    url: `getList`,
    method: 'post',
    data,
    otherConfig:{
      ...otherConfig,
      timeout:60000,
      baseURL:'/api'
    }
  });
};

// response 拦截器
service.interceptors.response.use(
  (response) => {
    const res = response.data;
    // 其他处理省略...
    return res;
  },
  async (error) => {
    // 根据实际情况设置
    // 如果是返回reject则会被catch捕获,await之后的代码不会执行
    // return Promise.reject(error);
    //  如果是以下,则不会被catch捕获,await后代码会执行
    return Promise.resolve(error)
  
  }
);

普通情况:接口error错误时返回 Promise.reject(err) 不再推荐

接口响应拦截处理
错误时返回 return Promise.reject(error) ===  中断拦截

const funA = async () => {
  try{
    const res = await 异常接口()
    console.log('AAA:',res);
  }catch(err){
    console.log('AAA:err',err);  
  }

}

const funB = async () => {
  try{
    const res = await 正常接口()
    console.log('BBB:',res);
  }catch(err){
    console.log(&#
### Axios 及其二次封装的面试问题 #### 1. 什么是 AxiosAxios 是一个基于 Promise 的 HTTP 客户端,用于发起 HTTP 请求。它可以在浏览器和 Node.js 中使用,并支持拦截器、取消请求等功能[^1]。 #### 2. 如何在 Vue 项目中进行 Axios二次封装? 为了提高代码的可维护性和复用性,在 Vue 项目中通常会对 Axios 进行二次封装。具体做法是在 `src` 文件夹下创建一个新的文件夹 `api`,并在其中建立一个名为 `request.js` 的文件来进行配置[^3]: ```javascript import axios from 'axios'; const service = axios.create({ baseURL: process.env.VUE_APP_BASE_API, // api base_url timeout: 5000 // request timeout }); // Request interceptors service.interceptors.request.use( config => { // Do something before request is sent return config; }, error => { // Do something with request error console.log(error); // for debug return Promise.reject(error); } ); // Response interceptors service.interceptors.response.use( response => { const res = response.data; // If the custom code is not zero, it means there was an error. if (res.code !== 20000) { Message({ message: res.message || 'Error', type: 'error', duration: 5 * 1000 }); return Promise.reject(new Error(res.message || 'Error')); } else { return res; } }, error => { console.log('err' + error); // for debug Message({ message: error.message, type: 'error', duration: 5 * 1000 }); return Promise.reject(error); } ); export default service; ``` 此段代码展示了如何设置基础 URL 和超时时间,以及定义请求和响应拦截器来处理全局错误或特定条件下的逻辑。 #### 3. 使用 Axios 发起 GET/POST 请求的方式是什么样的? 对于简单的 GET 或 POST 请求,可以直接调用 Axios 实例的方法: ```javascript // Get request example axios.get('/user?ID=12345') .then(function(response){ console.log(response); }) .catch(function(error){ console.error(error); }); // Post request example axios.post('/user', { firstName: 'Fred', lastName: 'Flintstone' }) .then(function(response){ console.log(response); }) .catch(function(error){ console.error(error); }); ``` 当进行了上述提到的二次封装之后,则可以通过自定义的服务实例 `service` 来简化操作并统一管理接口路径和其他参数。 #### 4. 怎样解决并发 AJAX 请求按顺序执行的问题? 如果存在多个 AJAX 请求需要依次完成才能继续下一个的话,可以利用 JavaScript 的 async/await 结合 promise.all() 方法实现这一点。但是推荐的做法是通过控制业务流程设计使得不需要严格依赖前后的请求关系;或者采用防抖动(debounce)/节流(throttle)技术减少不必要的重复请求次数。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值