Vue:axios(POST请求)

发送 POST 请求

基本用法

javascript 复制代码
axios.post('/api/login', {
  username: 'lcyyyy',
  password: '123456'
})
.then(response => {
  console.log('请求成功:', response.data);
})
.catch(error => {
  console.error('请求失败:', error);
});

在 Vue 组件中使用

javascript 复制代码
export default {
  methods: {
    async submitForm() {
      try {
        const response = await axios.post('/api/submit', {
          name: this.name,
          email: this.email
        });
        console.log('提交成功:', response.data);
      } catch (error) {
        console.error('提交失败:', error.response?.data || error.message);
      }
    }
  }
}

处理请求参数

发送 JSON 数据(默认)

Axios 默认会将 JavaScript 对象序列化为 JSON,并自动设置请求头 Content-Type: application/json

发送表单数据(FormData)

如果需要提交表单格式数据(如文件上传),需使用 FormData

javascript 复制代码
const formData = new FormData();
formData.append('file', this.file); // 文件对象
formData.append('comment', '这是一个文件');

axios.post('/api/upload', formData, {
  headers: {
    'Content-Type': 'multipart/form-data' // Axios 会自动识别,可省略
  }
});

全局配置与拦截器

1全局默认配置

javascript 复制代码
// main.js 或单独配置文件
axios.defaults.baseURL = 'https://api.example.com';
axios.defaults.timeout = 5000; // 超时时间

请求拦截器

javascript 复制代码
axios.interceptors.request.use(config => {
  // 在发送请求前做些什么(如添加 token)
  config.headers.Authorization = `Bearer ${localStorage.getItem('token')}`;
  return config;
}, error => {
  return Promise.reject(error);
});

响应拦截器

javascript 复制代码
axios.interceptors.response.use(response => {
  // 对响应数据做统一处理
  return response.data; // 直接返回核心数据
}, error => {
  // 统一处理错误(如 401 跳转登录页)
  if (error.response.status === 401) {
    router.push('/login');
  }
  return Promise.reject(error);
});

相关推荐
喜葵9 分钟前
前端安全防护深度实践:从XSS到供应链攻击的全面防御
前端·安全·xss
_r0bin_14 分钟前
分片上传-
前端·javascript·状态模式
东北南西17 分钟前
手写React状态hook
前端·javascript·react.js
诗书画唱18 分钟前
【前端教程】JavaScript DOM 操作实战案例详解
开发语言·前端·javascript
lypzcgf19 分钟前
Coze源码分析-资源库-删除提示词-前端源码
前端·typescript·react·ai应用·coze·coze源码分析·智能体平台
代码青铜20 分钟前
【实战指南】Cursor前端+Zion后端:10分钟打造能收款的AI商业应用MVP
前端·人工智能
quan26311 小时前
Vue实践篇-02,AI生成代码
前端·javascript·vue.js
GIS之路1 小时前
GDAL 读取影像元数据
前端
qb2 小时前
vue3.5.18源码-编译-入口
前端·vue.js·架构
小桥风满袖2 小时前
极简三分钟ES6 - 类与继承
前端·javascript