axios封装示例

Axios是一个基于Promise的HTTP客户端库,可以用于在浏览器和Node.js中发送HTTP请求。为了方便使用,我们可以对Axios进行封装,将常用的配置项和请求方法封装起来,使其更易于使用。

以下是一个简单的Axios封装示例:

import axios from 'axios';

// 创建一个Axios实例
const instance = axios.create({
  baseURL: 'http://api.example.com',
  timeout: 5000,
  headers: {
    'Content-Type': 'application/json'
  }
});

// 请求拦截器
instance.interceptors.request.use(config => {
  // 在发送请求之前做些什么
  // 可以在此处添加token等认证信息
  return config;
}, error => {
  // 对请求错误做些什么
  return Promise.reject(error);
});

// 响应拦截器
instance.interceptors.response.use(response => {
  // 对响应数据做些什么
  return response.data;
}, error => {
  // 对响应错误做些什么
  return Promise.reject(error);
});

// 封装GET请求
export function get(url, params = {}) {
  return instance.get(url, {
    params
  });
}

// 封装POST请求
export function post(url, data = {}) {
  return instance.post(url, data);
}

// 封装PUT请求
export function put(url, data = {}) {
  return instance.put(url, data);
}

// 封装DELETE请求
export function del(url) {
  return instance.delete(url);
}

以上示例中,我们首先创建了一个Axios实例,并对其进行了一些默认配置。然后,我们对请求和响应进行了拦截处理,以便添加或处理一些公共的请求或响应信息,如添加token等认证信息或统一处理错误信息。

最后,我们封装了常用的GET、POST、PUT和DELETE请求,并将其导出,以便在项目中使用。在封装请求方法时,我们可以根据实际需求添加请求参数和配置项,以满足不同的请求场景。

相关文章

vue2使用ajax发送网络请求

vue3使用ajax发送网络请求

axios封装token示例

最后修改:2023 年 08 月 27 日
如果觉得我的文章对你有用,请随意赞赏