vue通用axios封装 get put post delete

Vue通常使用Axios作为Http库来发送HTTP请求。下面是一个通用的Axios封装，可以用于发送get、put、post和delete请求。

首先，我们需要在项目中安装Axios依赖。可以使用npm或yarn命令来安装：

npm install axios

或者

yarn add axios

然后，我们可以在项目中创建一个utils文件夹，并在其中创建一个http.js文件。在http.js文件中，我们可以编写通用的Axios封装代码：

import axios from 'axios';

// 创建一个axios实例
const instance = axios.create({
  baseURL: 'http://api.example.com' // 设置请求的默认基本URL
});

// 请求拦截器，可以在请求发送之前做一些处理，比如添加请求头
instance.interceptors.request.use(
  config => {
    // 在请求发送之前添加一个Authorization请求头（如果需要）
    config.headers['Authorization'] = 'Bearer ' + localStorage.getItem('token');
    return config;
  },
  error => {
    return Promise.reject(error);
  }
);

// 响应拦截器，可以在请求返回之后做一些处理，比如处理错误信息
instance.interceptors.response.use(
  response => {
    // 在请求成功返回之后处理响应数据
    return response;
  },
  error => {
    // 在请求失败返回之后处理错误信息
    return Promise.reject(error.response.data);
  }
);

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

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

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

// 封装delete请求
export const del = url => {
  return instance.delete(url);
};

以上是一个简单的对Axios进行封装的例子。你可以根据自己的项目需求进行相应的修改和扩展。在组件中使用get、put、post和delete方法来发送不同类型的请求。示例代码如下：

import { get, put, post, del } from '@/utils/http';

// 使用get请求
get('/api/users').then(response => {
  console.log(response.data);
}).catch(error => {
  console.error(error);
});

// 使用put请求
put('/api/user/1', { name: 'John', age: 30 }).then(response => {
  console.log(response.data);
}).catch(error => {
  console.error(error);
});

// 使用post请求
post('/api/user', { name: 'John', age: 30 }).then(response => {
  console.log(response.data);
}).catch(error => {
  console.error(error);
});

// 使用delete请求
del('/api/user/1').then(response => {
  console.log(response.data);
}).catch(error => {
  console.error(error);
});

以上就是一个通用的Axios封装，可以用于发送get、put、post和delete请求。通过这种封装，可以简化和统一项目中的HTTP请求处理。