vue - resource 使用过程的坑

一. get 传参的坑：加params对象传参（不能直接get(url, params)!!!）

 this.$http.get(url, {params: { offset: this.offset, label: this.categray }})

二. 使用post请求：
知识点
post参数的形式 form data(表单，通过url传参) 和 request payload（JSON, 通过请求体传参）
这两个本质是发送交易的报文头中的Content-type，我们都知道一般发请求报文中的特殊字符比如+等都会被转码，那是因为默认的Content-Type用的是application/x-www-form-urlencoded，也就是form data这种情况，默认的报文都是这种格式的，但原生ajax就不是，原生ajax报文头用的是text/plain;charset=UTF-8，在这种格式下大部分字符都是不编码的。这种差异就会产生一些问题，比如我们碰到的这个post，就是用的第二种方式，所以那边接不到参数。思路也很简单，就是改报文头。

vue-resource 默认采用 request payload 形式即 JSON 数据，后台需要在请求体中获得参数

若后台需通过表单的方式（即在 url 中）获得参数，有如下三种方案：

在vue实例中添加headers字段：

 http: {headers: {'Content-Type': 'application/x-www-form-urlencoded'}}

或者使用 vue 方面提供的更加简单做法：

全局设置，在main.js中加上

  Vue.http.options.emulateJSON = true;

局部设置，在方法上加三第三个参数

  this.$http.post('url', data, { emulateJSON: true })

三. 通过 POST 参数上传（二进制）文件时，请求参数需按一下步骤构建：

   //二进制文件必须通过formData.append()加入，并以formData作为请求参数，否则请求中参数将成 { }let formData = new FormData();formData.append('binary', binaryFile)formData.append('key', value);

   // 错误的示范，千万不要将formData包一层花括号，这会导致上传的值为{file: {}}，也就是空值，这是一个陷阱this.$http.post(url, formData, { emulateJSON: true })

直接以input 获取的 file 对象作为POST 参数会导致请求参数为 {} ！！

FormData 类详细介绍

vue - resource 使用过程的坑相关推荐

win10系统用户：如何获得超级管理员权限（vue开发之Win10踩坑）
作为win10系统的使用者Permission denied:cmd没权限.git没权限.npm没权限.delete文件夹也没权限.等等等:要权限没权限?或每次只给一次性权限?开发之痛,十指共愤! 如 ...
vue源码分析系列一：new Vue的初始化过程
import Vue from 'vue'(作者用的vue-cli一键生成) node环境下import Vue from 'vue'的作用是什么意思? 在 NPM 包的 dist/ 目录你将会找到很 ...
vue axios传递FormData填坑，headers不显示，后台报错等等问题
vue axios传递FormData填坑,headers不显示,后台报错等等问题你可能在以下vue axios的FormDara的文件上传中,有headers不显示问题,或遇到了以下报错 org. ...
VUE程序运行过程-runtime-complier和runtime-only的区别
1.VUE程序运行过程当把template传递给vue实例的时候,vue实例会把该模板内容保存到vm.options, 然后对该template解析成ast(抽象语法树) 将ast编译为render ...
vue项目中onscroll的坑
vue项目中onscroll的坑在项目中需要监听一个组件的scroll事件,以触发到底时加载更多. 但是实际操作下来发现scroll事件并没有被监听到. 通过查询资料得知,监听的目标元素elemen ...
VUE 使用中踩过的坑
vue如今可谓是一匹黑马,github star数已居第一位!前端开发对于vue的使用已经越来越多,它的优点就不做介绍了,本篇是我对vue使用过程中以及对一些社区朋友提问我的问题中做的一些总结,帮助大 ...
Oracle 19c RAC打补丁过程避坑指南
墨天轮原文链接:https://www.modb.pro/db/22393 导读:记录19.3 rac 打补丁过程中遇到的一些问题19.3升19.5.19.5升19.6. 新装的19.3 rac 需要 ...
记一次Vue全页面SSR深坑之旅 - 微弱的内存/CPU泄漏
如果我跟你说,我面试来这家的时候,面试题就是这个问题你会作何感想?估计一般人是不会进坑的.然而,我进来了.因为我觉得这种技术问题很好玩.仅此而已.否则工作会很无聊. 前言其实你没啥必要解决这个bug ...
vue中使用bootstrap4踩坑之旅
bootstrapvue官网 bootstrap4中文官网以下文章记录本人的踩坑过程,最后已亲测有效,但不保证是最简便的方法,最好的建议是去bootstrapvue官网看文档直接尝试. 一.引入jq ...

vue - resource 使用过程的坑

vue - resource 使用过程的坑相关推荐

最新文章

热门文章