Axios request 封装技巧:提升代码复用和效率的步骤

简介: 在开发中,为了提高效率,通常对 Axios 进行封装,简化了请求的发送和对响应的处理。同时,统一错误处理机制有助于维护代码的清晰和一致性。本文介绍了一些高效封装 Axios 请求的方法。

在开发中,为了提高效率,通常对 Axios 进行封装,简化了请求的发送和对响应的处理。同时,统一错误处理机制有助于维护代码的清晰和一致性。本文介绍了一些高效封装 Axios 请求的方法。

图片.png

封装理念

通过创建一个请求函数,我们可以隐藏 Axios 的直接调用,将请求的配置作为参数传入。成功的请求会解析(resolve)返回数据,失败的请求则拒绝(reject)并返回错误信息。promise 的使用使得处理这些行为变得异常便利。

封装基础请求如下所示:

function request(options) {
  return new Promise((resolve, reject) => {
    axios(options)
      .then(response => {
        resolve(response.data);
      })
      .catch(error => {
        reject(error);
      });
  });
}

进一步,封装常用的 get 和 post 请求方法:

function get(endpoint, query) {
  return request({
    method: 'get',
    url: endpoint,
    params: query
  });
}

function post(endpoint, payload) {
  return request({
    method: 'post',
    url: endpoint,
    data: payload
  });
}

现在,在代码中直接利用 getpost 函数即可发起请求。

精简重复代码

通用设置,如 baseURL,应当被提取,避免每次请求重复声明。

function request(options) {
  let axiosInstance = axios.create({
    baseURL: 'https://your-api-domain.com/api/',
    timeout: 10000
  });

  // 应用实例配置
  options = Object.assign({}, options, { axiosInstance });

  return new Promise((resolve, reject) => {
    axiosInstance(options)
      .then(response => {
        resolve(response.data);
      })
      .catch(error => {
        reject(error);
      });
  });
}

如此一来,简化了通用配置的过程。

拦截器的应用

拦截器是 Axios 的重要特性,使得对请求和响应的修改变得简洁。

// 添加请求拦截器
axiosInstance.interceptors.request.use(
  config => {
    // 修改请求之前的配置
    return config;
  },
  error => {
    // 请求错误的处理逻辑
    return Promise.reject(error);
  }
);

// 添加响应拦截器
axiosInstance.interceptors.response.use(
  response => {
    // 统一处理响应数据
    return response;
  },
  error => {
    // 统一处理响应错误
    return Promise.reject(error);
  }
);

错误的统一管理

利用 .catch 捕捉整个请求流程中可能出现的异常,简化了错误处理逻辑。

function request(options) {
  // ...
}

request(options)
  .then(data => {
    // 处理请求成功的数据
  })
  .catch(error => {
    // 统一处理请求异常
  });

请求的取消

在需要中断请求时, Axios 的取消令牌(cancel token)提供了便利。

const CancelToken = axios.CancelToken;
const source = CancelToken.source();

request({
  // 其他配置...
  cancelToken: source.token
});

// 如需取消请求
source.cancel('Operation canceled by the user.');

使用示例

以下是一个调用实例,演示了封装函数的使用方法:

import { get, post } from './request';

get('/user', { id: '12345' })
  .then(response => {
    console.log(response);
  })
  .catch(error => {
    console.error(error);
  });

post('/user', { name: 'Jane' })
  .then(response => {
    console.log(response);
  })
  .catch(error => {
    console.error(error);
  });

通过这些方法,你可以轻松实现请求的发起和结果的处理。

实用提示

  • 把 Axios 封装进一个可配置的 request 方法
  • 将基础配置如 baseURL 提取出来
  • 利用拦截器优化请求与响应的处理
  • 通过 .catch 异常处理简化错误处理
  • 支持请求的取消

结束语

Axios 进行恰当的封装能够大幅提升开发效率,减少重复代码,并且集中处理错误,以上提到的封装策略都是常见的实践,依据具体情况灵活调整。

知识扩展:

参考:

相关文章
|
3月前
|
存储 JSON 前端开发
封装axios的两种方式
封装axios的两种方式
|
3月前
|
前端开发
十分钟封装一个好用的axios,省时又省力他不香吗
十分钟封装一个好用的axios,省时又省力他不香吗
|
7月前
|
JSON 缓存 前端开发
基于Axios二次封装请求库,带你重构面试亮点(一)
基于Axios二次封装请求库,带你重构面试亮点
50 0
|
1月前
|
前端开发
AJAX发送请求方法封装和请求函数底层刨析以及axios二次封装
AJAX发送请求方法封装和请求函数底层刨析以及axios二次封装
|
2月前
|
资源调度 JavaScript API
|
3月前
|
JSON JavaScript 前端开发
axios详解以及完整封装方法
axios详解以及完整封装方法
578 0
|
3月前
|
JavaScript 前端开发 API
在VUE项目中做一个简单的Axios二次封装及使用
在VUE项目中做一个简单的Axios二次封装及使用
42 0
|
4月前
|
JavaScript 前端开发
vue axios封装
vue axios封装
25 0
|
4月前
|
资源调度 JavaScript API
vue封装axios请求接口并添加前置拦截器和响应拦截器
vue封装axios请求接口并添加前置拦截器和响应拦截器
44 0
|
4月前
|
JSON 数据格式
axios.post请求出错:Request header field content-type is not allowed by Access-Control-Allow-Headers in……
axios.post请求出错:Request header field content-type is not allowed by Access-Control-Allow-Headers in……