使用axios发送post请求,body传送数据格式form和json区别

先来看看这两个种传送格式的写法 1.form格式,将Content-Type类型设置为application/x-www-form-urlencode,POST请求时将data序列化,提交的数据会按照 key1=val1&key2=val2 的方式进行编码,key 和 val 都进行了 URL 转码

var instance = axios.create({

baseURL: conf.api.api_owt,
    timeout: 60000,
    headers: {
      "Content-Type": "application/x-www-form-urlencoded; charset=utf-8;"
    }
  });

  // http request 拦截器
  instance.interceptors.request.use(
    config => {
      // POST传参序列化
      if (config.method === "post") {
        config.data = qs.stringify(config.data);
      }
      return config;
    },
    error => {
      return Promise.reject(error);
    }
  );

2.json格式,有时候后台需要body传送的是json数据,将Content-Type类型设置为application/json,注意POST请求时data不要序列化

var instance = axios.create({

baseURL: conf.api.api_owt,
    timeout: 60000,
    headers: {
      "Content-Type": "application/json;"
    }
  });
原文链接:segmentfault.com

上一篇:下拉刷新,上拉加载插件mescroll源码分析
下一篇:vue + webpack 模拟后台数据

相关推荐

  • 项目整理11.27——axios相关

    1、配置请求的根路径 2、请求任意接口之前进行统一拦截判断 (https://img.javascriptcn.com/539d96611a9889...

    8 个月前
  • 逐行解析Axios源码

    image(https://img.javascriptcn.com/ebf0e6753d1e997cdc179de364317eed "image") 源码目录结构 前言 本文主要关注...

    1 年前
  • 详解javascript中对数据格式化的思考

    在实际应用场景中,我们常常需将一些数据输出成更加符合人类习惯阅读的格式。 保留小数点后面两位 在一些要求精度没有那么准确的场景下,我们可以直接通过来实现保留小数点两位这样的需求。

    3 年前
  • 记录 关于axios封装

    废话不多说,直接上代码,本人也是菜鸡 如果有什么不对请指教~ ps: message为iview组件的插件 按需引入。 ...

    1 年前
  • 记一次eggjs+axios传输multipart的纠错过程

    总所周知,egg的csrf策略让post每次都要发送token码验证,为了方便,我在axios的interceptor里作了前置拦截。 结果不幸从此发生! 最开始没有看官方文档,以为csrf应该加在...

    1 年前
  • 解决vue-axios和vue-resource跨域问题

    最近在学习vue,在vue中没有ajax,而是利用vueresource和vueaxios进行数据通信。Vue2.0之后,官方推荐使用vueaxios。 问题 在使用vueaxios的post...

    2 年前
  • 表单按钮重复提交,axios重复请求的处理方案

    1.自定义指令directive思路: 点击之后当前按钮一定时间内(例如:setTimeout 1000ms)不可以再次被点击,相当于节流;但是如果一个请求1000ms以上还没有返回,那么再次点击就会...

    3 个月前
  • 聊一聊Axios与登录机制

    前言 因为HTTP是一个stateless的协议,服务器并不会保存任何关于状态数据。 所以需要登录功能让服务器在以后请求的过程中能够识别到你的身份,而不是每次发请求都要输入用户名和密码。

    3 个月前
  • 第八课时: vue中axios请求拦截封装

    1.解决跨域问题 出现跨域的情况(受浏览器同源策略的影响): 图片描述(https://img.javascriptcn.com/160148068b848c26efe7b59e6c170636 "图...

    1 年前
  • 移动端实现表头固定,tbody滚动,三种方法

    实现表头固定,tbody垂直滚动 准备工作: 1. 获取页面可是区域高度 2.屏幕旋转触发事件 方法一:两个table 思路:第一个table放表头,第二个table方内容。

    1 年前

官方社区

扫码加入 JavaScript 社区