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);
});

相关推荐
椒盐螺丝钉6 分钟前
TypeScript类型兼容性
运维·前端·typescript
_JinHao9 分钟前
Cesium Viewer对象详解——Cesium基础笔记(快速入门)
前端·javascript·笔记·3d·webgl
正义的大古13 分钟前
OpenLayers地图交互 -- 章节十三:拖拽旋转交互详解
javascript·vue.js·openlayers
r0ad41 分钟前
从痛点到解决方案:为什么我开发了Chrome元素截图插件
前端·chrome
OEC小胖胖1 小时前
连接世界:网络请求 `wx.request`
前端·微信小程序·小程序·微信开放平台
jingling5551 小时前
解决微信小程序真机调试中访问本地接口 localhost:8080 报错
前端·微信小程序·小程序
en-route1 小时前
使用 Flask 构建 Web 应用:静态页面与动态 API 访问
前端·python·flask
IT_陈寒1 小时前
Vite 5年迭代揭秘:3个核心优化让你的项目构建速度提升200%
前端·人工智能·后端
怎么吃不饱捏1 小时前
vue3+vite,引入阿里巴巴svg图标,自定义大小颜色
前端·javascript·vue.js
无敌最俊朗@1 小时前
MQTT 关键特性详解
java·前端·物联网