2018-01-02 17:03:06 guoscy 阅读数 24560
  • Vue.js 2.0之全家桶系列视频课程

    基于新的Vue.js 2.3版本, 目前新全的Vue.js教学视频,让你少走弯路,直达技术前沿! 1. 包含Vue.js全家桶(vue.js、vue-router、axios、vuex、vue-cli、webpack、ElementUI等) 2. 采用笔记+代码案例的形式讲解,通俗易懂

    5371 人正在学习 去看看 汤小洋

vue+axios post请求

axios 全局默认配置

axios.defaults.baseURL = 'https://api.example.com';
axios.defaults.headers.common['Authorization'] = AUTH_TOKEN;
axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded';

默认情况下,axios将JavaScript对象序列化为JSON。 要以应用程序/ x-www-form-urlencoded格式发送数据,您可以使用以下选项之一。

axios 发送post请求

1. 浏览器

在浏览器中,您可以使用URLSearchParams API,如下所示:

var params = new URLSearchParams();
params.append('param1', 'value1');
params.append('param2', 'value2');
axios.post('/foo', params);

注意: 所有浏览器都不支持URLSearchParams,但是有一个polyfill可用(确保polyfill全局环境)。

polyfill就是一个用在浏览器API上的shim(是一个库,它将一个新的API引入到一个旧的环境中,而且仅靠旧环境中已有的手段实现).我们通常的做法是先检查当前浏览器是否支持某个API,如果不支持的话就加载对应的polyfill.然后新旧浏览器就都可以使用这个API了。

axios 依赖本机要支持ES6 Promise实现。 如果您的环境不支持ES6 Promises,您可以使用polyfill。

或者,您可以使用qs插件地址库对数据进行编码(将axios发送的数据格式转换为form-data格式):

//npm install axios的时候默认会安装qs
// qs相关的问题请搜索"nodejs qs"或者看这里https://www.npmjs.com/package/qs
import qs from 'qs';

// 将请求数据转换为form-data格式
// 这里不用qs,用FormData也可以,不赘述
var data = qs.stringify({
  currentPage: "0",
  pageSize: "10",
  type: "1",
});

axios.post('/url', data)
.then(function (response) {
})
.catch(function (error) {
});

2. Node.js

在node.js中,可以使用querystring模块(也可以使用qs库。),如下所示:

var querystring = require('querystring');
axios.post('http://something.com/', querystring.stringify({ foo: 'bar' });

用axios发送post请求去登录,能成功返回数据,但是用作权限验证的cookie就是没有保存,经查阅,axios 默认不发送cookie,跨域也是一个原因,需要全局设置:文档地址

axios.defaults.withCredentials = true 

axios跨域问题

Vue-cli proxyTable 解决开发环境的跨域问题
在vue-cli的config文件index.js里有一个参数叫proxyTable

proxyTable: {
  '/list': {
    target: 'http://api.xxxxxxxx.com',
    changeOrigin: true,
    pathRewrite: {
      '^/list': '/list'
    }
  }
}

changeOrigin参数接收一个布尔值,如果设置为true,那么本地会虚拟一个服务端接收你的请求并代你发送该请求,这样就不会有跨域问题了,当然这只适用于开发环境。
相关资料:
API proxy
http-proxy-middleware
package

2018-05-17 13:41:04 sinat_37680470 阅读数 1252
  • Vue.js 2.0之全家桶系列视频课程

    基于新的Vue.js 2.3版本, 目前新全的Vue.js教学视频,让你少走弯路,直达技术前沿! 1. 包含Vue.js全家桶(vue.js、vue-router、axios、vuex、vue-cli、webpack、ElementUI等) 2. 采用笔记+代码案例的形式讲解,通俗易懂

    5371 人正在学习 去看看 汤小洋
import axios from 'axios'
import qs from 'qs'

axios.defaults.baseURL = 'http://www.baidu.com/api' // 路径
axios.defaults.withCredentials = true //设置跨域

export default {
  post(url, data) {
    return new Promise((resolve, reject) => {
      axios.post(url, qs.stringify(data)).then(res => {
        resolve(res.data)
      }).catch(err => {
        reject(err)
      })
    })
  },
  get(url, params) {
    return new Promise((resolve, reject) => {
      axios.get(url, {
        params: params
      }).then(res => {
        resolve(res.data)
      }).catch(err => {
        reject(err)
      })
    })
  }
}

2019-06-06 16:16:44 sjpeter 阅读数 5993
  • Vue.js 2.0之全家桶系列视频课程

    基于新的Vue.js 2.3版本, 目前新全的Vue.js教学视频,让你少走弯路,直达技术前沿! 1. 包含Vue.js全家桶(vue.js、vue-router、axios、vuex、vue-cli、webpack、ElementUI等) 2. 采用笔记+代码案例的形式讲解,通俗易懂

    5371 人正在学习 去看看 汤小洋

有关axios post参数的传值问题

let data = {}

axios({
    url: '连接地址 path参数直接放里面',
    method: 'post 默认是 get',
    params: '必须是一个无格式对象 query参数',
    data: '是作为请求主体被发送的数据 body参数',
    timeout: 1000,
    headers: 'object 发送的自定义请求头'
})
let data = {}

axios.post( '连接地址 path和query参数直接放里面', '是作为请求主体被发送的数据 body参数', {
    timeout: 1000,
    headers: 'object 发送的自定义请求头'
})

1.json

headers里面设置'Content-Type': 'application/json; charset=utf-8'

data直接传object就行

2.form-data

let data = new FormData()
data.append('age', '34')
data.append('name', 'peter')

headers里面设置'Content-Type': 'multipart/form-data'

data直接传object就行

3.application/x-www-form-urlencoded

方法一

const params = new URLSearchParams();
params.append('param1', 'value1');
params.append('param2', 'value2');
axios.post('/foo', params);

方法二

import qs from 'Qs'
let data = {"code":"1234","name":"yyyy"};

下面我们来看看application/x-www-form-urlencoded与application/json的区别

说明:这两个都是发送请求的格式说明

1.application/x-www-form-urlencoded

在Form元素的语法中,EncType表明提交数据的格式 用 Enctype 属性指定将数据回发到服务器时浏览器使用的编码类型。 下边是说明: application/x-www-form-urlencoded: 窗体数据被编码为名称/值对。这是标准的编码格式。 multipart/form-data: 窗体数据被编码为一条消息,页上的每个控件对应消息中的一个部分。 text/plain: 窗体数据以纯文本形式进行编码,其中不含任何控件或格式字符。 
补充 
form的enctype属性为编码方式,常用有两种:application/x-www-form-urlencoded和multipart/form-data,默认为application/x-www-form-urlencoded。 当action为get时候,浏览器用x-www-form-urlencoded的编码方式把form数据转换成一个字串(name1=value1&name2=value2…),然后把这个字串append到url后面,用?分割,加载这个新的url。 当action为post时候,浏览器把form数据封装到http body中,然后发送到server。 如果没有type=file的控件,用默认的application/x-www-form-urlencoded就可以了。 但是如果有type=file的话,就要用到multipart/form-data了。浏览器会把整个表单以控件为单位分割,并为每个部分加上Content-Disposition(form-data或者file),Content-Type(默认为text/plain),name(控件name)等信息,并加上分割符(boundary).

npm仓库上qs的使用

var obj = qs.parse('a=c');
// 结果 parse解析 { a: 'c' }
 
var str = qs.stringify(obj);
// 结果 stringify‘加密’ 'a=c'

qs.parse('foo[bar]=baz')
// {
    foo: {
        bar: 'baz'
    }
}

 

参考1

参考2

2019-12-05 20:40:36 IOT_player 阅读数 21
  • Vue.js 2.0之全家桶系列视频课程

    基于新的Vue.js 2.3版本, 目前新全的Vue.js教学视频,让你少走弯路,直达技术前沿! 1. 包含Vue.js全家桶(vue.js、vue-router、axios、vuex、vue-cli、webpack、ElementUI等) 2. 采用笔记+代码案例的形式讲解,通俗易懂

    5371 人正在学习 去看看 汤小洋

一.首先说一下采用的技术:

前端:Vue,使用原始方法CDN引入,没采用cli,ajax使用的axios

后端:springboot MVC

 

二.再来说一下碰到的坑:

axios中使用post方法传参提交表单,后端没收到相应的参数,我f12看了看,参数是传了的,然后没定位到问题。网上查了查,并看了看post方法的源码,定位到了问题。当post方法提供了data对象时,post请求http字段中的content-type是

application/json;charset=UTF-8

而我们需要的content-type是

application/x-www-form-urlencoded

 

三.解决方法:

我按照网上的方法,使用qs解决问题。首先CDN引入qs,引入后可以获得一个Qs,利用stringify()方法处理所有的参数

const qs = Qs

var data = {
                key1: value1,
                key2: JSON.stringify(value2)
            }
axios.post('https://xxx.com/api/xxx', qs.stringify(data))
                .then(function (res) {
                    console.log(res)
                })
                .catch(function (err) {
                    console.log(err)
                })

此时就说到第二个坑了,我的value2是一个数组,java又无法解析了,不能出现符号"[]",于是将 JavaScript 对象转换为字符串

JSON.stringify(value2)

最后解决了问题,成功对接接口

 

2018-03-23 15:52:43 csdn_yudong 阅读数 33282
  • Vue.js 2.0之全家桶系列视频课程

    基于新的Vue.js 2.3版本, 目前新全的Vue.js教学视频,让你少走弯路,直达技术前沿! 1. 包含Vue.js全家桶(vue.js、vue-router、axios、vuex、vue-cli、webpack、ElementUI等) 2. 采用笔记+代码案例的形式讲解,通俗易懂

    5371 人正在学习 去看看 汤小洋

问题场景

场景很简单,就是一个正常 axios post 请求:

axios({
	headers: {
		'deviceCode': 'A95ZEF1-47B5-AC90BF3'
	},
	method: 'post',
	url: '/api/lockServer/search',
	data: {
		username,
		pwd
	}
})

后台说没有接收到你的传参。

这就有点奇怪了,我看了一下浏览器的请求信息是 OK 的,参数都是有的,而且之前这样用 axios 也没有这个问题。

但是这个接口是通用的,别人都用了,是 OK 的,接口没问题。

问题原因

要点1

原因就是这次的接口使用 java spring mvc
并且在这个方法上使用了注解 @RequestParam

那么这个是什么意思呢,这个是只能从请求的地址中取出参数,也就是只能从 username=admin&password=admin 这种字符串中解析出参数。

要点2

我们还可以看到我们这次请求的 Content-Type:

application/json;charset=UTF-8

关于这一点需要说明的是:

1、axios会帮我们 转换请求数据和响应数据 以及 自动转换 JSON 数据

2、在 axios 源码中发现下面这段内容:(很关键)

我们知道在做 post 请求的时候,我们的传参是 data: {...} 或者直接 {...} 的形式传递的,嗯,就是下面这两种形式

【第一种形式】

【第二种形式】

非常的刺激,这两种形式无一例外都触发了 axios 源码中【很关键】的那一段代码

问题分析

也就是说,我们的 Content-Type 变成了 application/json;charset=utf-8
然后,因为我们的参数是 JSON 对象,axios 帮我们做了一个 stringify 的处理。
而且查阅 axios 文档可以知道:axios 使用 post 发送数据时,默认是直接把 json 放到请求体中提交到后端的。

那么,这就与我们服务端要求的 'Content-Type': 'application/x-www-form-urlencoded' 以及 @RequestParam 不符合。

解决方案

解决方案一

【用 URLSearchParams 传递参数】

let param = new URLSearchParams()
param.append('username', 'admin')
param.append('pwd', 'admin')
axios({
	method: 'post',
	url: '/api/lockServer/search',
	data: param
})

需要注意的是: URLSearchParams 不支持所有的浏览器,但是总体的支持情况还是 OK 的,所以优先推荐这种简单直接的解决方案

解决方案二

网上有很多方案说使用
axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded';
或者
{headers:{'Content-Type':'application/x-www-form-urlencoded'}}
我试了一下,其实这样还是不行的
【还需要额外的操作,(我们要将参数转换为query参数)
引入 qs ,这个库是 axios 里面包含的,不需要再下载了。

import Qs from 'qs'
let data = {
	"username": "admin",
	"pwd": "admin"
}

axios({
	headers: {
		'deviceCode': 'A95ZEF1-47B5-AC90BF3'
	},
	method: 'post',
	url: '/api/lockServer/search',
	data: Qs.stringify(data)
})

解决方案三

既然 axios 源码中有那么一段【很关键】的代码,那么,我们也可以通过修改 transformRequest 来达到我们的目的。

在 axios 的请求配置项中,是有 transformRequest 的配置的:
这里写图片描述

OK,那么现在我们的请求就可以写成下面这个样子了:

import Qs from 'qs'
axios({
	url: '/api/lockServer/search',
	method: 'post',
	transformRequest: [function (data) {
	    // 对 data 进行任意转换处理
	    return Qs.stringify(data)
    }],
	headers: {
		'deviceCode': 'A95ZEF1-47B5-AC90BF3'
	},
	data: {
	    username: 'admin',
		pwd: 'admin'
	}
})

解决方案四

【重写一个 axios 实例,重新实现属于我们自己的 transformRequest】

import axios from 'axios'
let instance = axios.create({
	transformRequest: [function transformRequest(data, headers) {
	    normalizeHeaderName(headers, 'Content-Type');
	    if (utils.isFormData(data) ||
	      utils.isArrayBuffer(data) ||
	      utils.isBuffer(data) ||
	      utils.isStream(data) ||
	      utils.isFile(data) ||
	      utils.isBlob(data)
	    ) {
	      return data;
	    }
	    if (utils.isArrayBufferView(data)) {
	      return data.buffer;
	    }
	    if (utils.isURLSearchParams(data)) {
	      setContentTypeIfUnset(headers, 'application/x-www-form-urlencoded;charset=utf-8');
	      return data.toString();
	    }
	    /*改了这里*/
	    if (utils.isObject(data)) {
	      setContentTypeIfUnset(headers, 'application/x-www-form-urlencoded;charset=utf-8');
	      let _data = Object.keys(data)
	      return encodeURI(_data.map(name => `${name}=${data[name]}`).join('&'));
	    }
	    return data;
	}],
})

解决方案五

axios.post('/api/lockServer/search',"userName='admin'&pwd='admin'");

解决方案六

我们知道现在我们服务端同学接收参数用的是 @RequestParam(通过字符串中解析出参数)
其实还有另一种是 @RequestBody(从请求体中获取参数)。

我们让后端的同学改成 @RequestBody 不就可以了吗,(#.#) 【他说我才不改呢】

---------------------------(正文完)------------------------------------
一个前端的学习交流群,想进来面基的,可以点击这个logoVue学习交流,或者手动search群号:685486827


写在最后:约定优于配置-------软件开发的简约原则.
--------------------------------(完)--------------------------------------

我的:
个人网站: https://neveryu.github.io/neveryu/
Github: https://github.com/Neveryu
新浪微博: https://weibo.com/Neveryu

更多学习资源请关注我的新浪微博…

axios中post传参

阅读数 33

vue.js中使用axios的post传参方法

博文 来自: sunwolfer
没有更多推荐了,返回首页