AJAX——封装_简易axios

在JavaScript中，我们可以使用axios库来发送AJAX请求。axios是一个非常流行的基于Promise的HTTP客户端，它在浏览器和node.js中都可以使用。

以下是一个简易的axios封装示例，我们可以在项目中复用这个封装。

import axios from 'axios';
 
// 创建axios实例
const service = axios.create({
  baseURL: process.env.VUE_APP_BASE_API, // api的base_url
  timeout: 5000 // 请求超时时间
});
 
// 请求拦截器
service.interceptors.request.use(
  config => {
    // 可以在这里添加请求头等信息
    return config;
  },
  error => {
    // 请求错误处理
    console.log(error); // for debug
    Promise.reject(error);
  }
);
 
// 响应拦截器
service.interceptors.response.use(
  response => {
    // 可以在这里对响应数据进行处理
    return response.data;
  },
  error => {
    // 响应错误处理
    console.log('err' + error); // for debug
    return Promise.reject(error);
  }
);
 
export default service;

在这个封装中，我们使用axios.create创建了一个axios实例，并且设置了baseURL和timeout。然后，我们添加了请求拦截器和响应拦截器，在这些拦截器中，我们可以添加一些全局的处理逻辑，比如token的添加、错误的处理等。

使用这个封装，我们可以像下面这样发送GET和POST请求：

import service from '@/utils/request';
 
// 发送GET请求
service.get('/someUrl').then(response => {
  console.log(response);
}).catch(error => {
  console.log(error);
});
 
// 发送POST请求
service.post('/someUrl', { data: 'your data' }).then(response => {
  console.log(response);
}).catch(error => {
  console.log(error);
});

这样，我们就可以在整个项目中复用这个封装，减少了代码量，并提高了代码的可维护性。