axios的封装使用

最新推荐文章于 2024-10-29 20:34:27 发布

原创最新推荐文章于 2024-10-29 20:34:27 发布 · 235 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#前端 #javascript #vue.js

前端工具箱专栏收录该内容

9 篇文章

订阅专栏

该文章展示了如何对axios库进行二次封装，通过设置基础URL、超时时间和拦截器，实现请求和响应的处理。特别是，它引入了请求重试机制，当遇到网络问题或请求超时时，能自动进行重试。此外，还定义了通用的createRequest函数，简化了GET、POST、PUT和DELETE等HTTP方法的调用。

对axios进行二次封装，实现更强的复用性和扩展性

axios

import axios from 'axios';

const instance = axios.create({
  baseURL: 'https://api.example.com',
  timeout: 5000,
});

// 请求拦截器
instance.interceptors.request.use(
  config => {
    // 可以在请求头中添加token等信息
    return config;
  },
  error => {
    return Promise.reject(error);
  }
);

// 响应拦截器
instance.interceptors.response.use(
  response => {
    // 可以在这里对响应数据进行处理，例如统一处理错误码等
    return response.data;
  },
  error => {
    // 如果请求超时或者网络错误，可以进行请求重试
    const config = error.config;
    if (!config || !config.retry) return Promise.reject(error);

    config.__retryCount = config.__retryCount || 0;
    if (config.__retryCount >= config.retry) {
      return Promise.reject(error);
    }

    config.__retryCount += 1;

    const backoff = new Promise(resolve => {
      setTimeout(() => {
        resolve();
      }, config.retryDelay || 1);
    });

    return backoff.then(() => {
      return instance(config);
    });
  }
);

// 创建请求函数
const createRequest = (method, url, data = {}, config = {}) => {
  return instance({
    url,
    method,
    data,
    ...config,
  });
};

// 封装get请求
export const get = (url, params = {}, config = {}) => {
  return createRequest('get', url, { params, ...config });
};

// 封装post请求
export const post = (url, data = {}, config = {}) => {
  return createRequest('post', url, data, config);
};

// 封装put请求
export const put = (url, data = {}, config = {}) => {
  return createRequest('put', url, data, config);
};

// 封装delete请求
export const del = (url, params = {}, config = {}) => {
  return createRequest('delete', url, { params, ...config });
};

使用示例

import { createRequest } from './axios';

const request = createRequest('get', '/user', { id: 1 });
request.then(res => {
  console.log(res);
});

在这个示例中，我们抽象出了一个createRequest函数，用于创建请求。我们只需要传入请求方法、请求地址、请求数据和请求配置即可创建一个请求。这样我们就可以通过这个函数来封装任何类型的请求，而不需要每一种请求都写一遍封装代码。