axios封装示例

xiaoxiao

2023 年 05 月 01 日

987 次浏览

暂无评论

1426字数

axios Vue JavaScript 前端

# axios封装示例

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

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

```javascript
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请求，并将其导出，以便在项目中使用。在封装请求方法时，我们可以根据实际需求添加请求参数和配置项，以满足不同的请求场景。

# 相关文章

<a class="post_link" href="https://www.xxhzm.cn/archives/789/">vue2使用ajax发送网络请求</a>

<a class="post_link" href="https://www.xxhzm.cn/archives/790/">vue3使用ajax发送网络请求</a>

<a class="post_link" href="https://www.xxhzm.cn/archives/792/">axios封装token示例</a>