axios.js以post方式传递数据后台获取不到数据,这到底是什么原因

版权声明:版权归作者所有 https://blog.csdn.net/qq_36772866/article/details/86189667

这篇文章始于自己封装了axios.js的里面的get方法,和post方法
首先我们先来看看
使用说明 · Axios 中文说明 · 看云
​http://link.zhihu.com/?target=https%3A//www.kancloud.cn/yunye/axios/234845

axios.post()方法
axios({
	method: 'post',
	url: '/user/123456',
	data: {
		username: 'ken',
		password: '123456'
	}
})

axios.post('/user', {
    firstName: 'Fred',
    lastName: 'Flintstone'
})
axios.get()方法
axios({
	method: 'get',
	url: '/user/123456',
})

// 可选地,上面的请求可以这样做
axios.get('/user', {
	params: {
	  ID: 12345
	}
})
这个下面是我的封装的伪代码
//伪代码的编写
axios({
	method: 'post' || 'get',
	url: '/user/123456',
	data: {
		username: 'ken',
		password: '123456',
	} || params: {
		ID: '123456'
	}
})
我一开始的封装的方式是这样的
// eslint-disable-next-line
/* eslint-disable */
// 对 axios.get() 和 axios.post()进行封装
import axios from 'axios'
import qs from 'qs'

/*
post 方式
axios({
	method: 'post',
	url: '/user/123456',
	data: {
		username: 'ken',
		password: '123456'
	}
})
axios.post('/user', {
    firstName: 'Fred',
    lastName: 'Flintstone'
})

get 方式
axios({
	method: 'get',
	url: '/user/123456',
})

// 可选地,上面的请求可以这样做
axios.get('/user', {
	params: {
	  ID: 12345
	}
})


//伪代码的编写
axios({
	method: 'post' || 'get',
	url: '/user/123456',
	data: {
		username: 'ken',
		password: '123456',
	} || params: {
		ID: '123456'
	}
})
*/
export default function axios_get_post(params){
	return new Promise((resolve, reject)=>{
		let opt = {
			method: params.method || 'get',
			url: params.url,
		}
		if(params.method == 'post'){
			opt.data = params.data
		}else {
			// 
			opt.params = params
		}
		axios(opt).then(res=>{
			resolve(res.data)
		}).catch(err=>{
			reject(err)
		})
	})
}
但是当我在这样调用测试接口的时候,

在这里插入图片描述

created() {
		// 测试封装
		axios_get_post({
			method: 'post',
			url: 'http://xxx.com/account/admin/login.php',
			data: {
				user_name: 'kennana',
				user_pass: '123456'
			}
		}).then(res=>{
			console.log('axios_get_post res',res)
		}).catch(err=>{
			console.log('axios_get_post err',err)
		})
	},
出现一个问题就是后台获取不到数据,后台返回的数据是null

在这里插入图片描述

后台设置如下

在这里插入图片描述

控制到检测到数据为Request Payload状态,

在这里插入图片描述

HTTP请求中的form data和request payload的区别:

request payload的数据状态是因为content-type:application/json
关键就是设置Content-type这个Headerapplication/x-www-form-urlencoded
实际上对于常规的HTML页面上的form的Content-type默认就是这个值。
这里要注意post请求的

Content-Type为application/x-www-form-urlencoded

,参数是在请求体中,即上面请求中的Form Data。
因为浏览器post传递数据一般是以表单的形式传递的,
而我上面的方式是以json的方式传递的,所以我们必须告诉服务端是以表单形式传递的,
所以要设置请求头的content-type,HTTP POST表单请求提交时,使用的Content-Type是application/x-www-form-urlencoded,而使用原生AJAX的POST请求如果不指定请求头RequestHeader,默认使用的Content-Type是text/plain;charset=UTF-8。

当然,设置了application/x-www-form-urlencoded的POST请求也可以通过这种方式来获取。
所以,在使用原生AJAX POST请求时,需要明确设置Request Header,即:

xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");  
同样使用axios.post()传输的时候也要设置content-type

所以上面封装的代码改成如下:

// eslint-disable-next-line
/* eslint-disable */
// 对 axios.get() 和 axios.post()进行封装
import axios from 'axios'
import qs from 'qs'

/*
post 方式
axios({
	method: 'post',
	url: '/user/123456',
	data: {
		username: 'ken',
		password: '123456'
	}
})
axios.post('/user', {
    firstName: 'Fred',
    lastName: 'Flintstone'
})

get 方式
axios({
	method: 'get',
	url: '/user/123456',
})

// 可选地,上面的请求可以这样做
axios.get('/user', {
	params: {
	  ID: 12345
	}
})


//伪代码的编写
axios({
	method: 'post' || 'get',
	url: '/user/123456',
	data: {
		username: 'ken',
		password: '123456',
	} || params: {
		ID: '123456'
	}
})
*/
export default function axios_get_post(params){
	return new Promise((resolve, reject)=>{
		let opt = {
			method: params.method || 'get',
			url: params.url,
			headers: {
				'Content-Type':'application/x-www-form-urlencoded'
			},
		}
		if(params.method == 'post'){
			opt.data = params.data
		}else {
			// 
			opt.params = params
		}

		axios(opt).then(res=>{
			resolve(res.data)
		}).catch(err=>{
			reject(err)
		})
	})
}

但是这样是解决问题了,但是又有一个问题来,我们来看看
在这里插入图片描述

真是一波平,一波起啊,查了一下文档,有个全局拦截器,可以在数据请求前先处理好数据,

所以我们要引入qs库

import qs from 'qs'
全局拦截器
在请求或响应被 then 或 catch 处理前拦截它们。

// 添加请求拦截器
axios.interceptors.request.use(function (config) {
    // 在发送请求之前做些什么
    return config;
  }, function (error) {
    // 对请求错误做些什么
    return Promise.reject(error);
  });

// 添加响应拦截器
axios.interceptors.response.use(function (response) {
    // 对响应数据做点什么
    return response;
  }, function (error) {
    // 对响应错误做点什么
    return Promise.reject(error);
  });
所以我们要来改造我上面的那个封装了
// eslint-disable-next-line
/* eslint-disable */
// 对 axios.get() 和 axios.post()进行封装
import axios from 'axios'
import qs from 'qs'

/*
post 方式
axios({
	method: 'post',
	url: '/user/123456',
	data: {
		username: 'ken',
		password: '123456'
	}
})
axios.post('/user', {
    firstName: 'Fred',
    lastName: 'Flintstone'
})

get 方式
axios({
	method: 'get',
	url: '/user/123456',
})

// 可选地,上面的请求可以这样做
axios.get('/user', {
	params: {
	  ID: 12345
	}
})


//伪代码的编写
axios({
	method: 'post' || 'get',
	url: '/user/123456',
	data: {
		username: 'ken',
		password: '123456',
	} || params: {
		ID: '123456'
	}
})
*/
export default function axios_get_post(params){
	return new Promise((resolve, reject)=>{
		let opt = {
			method: params.method || 'get',
			url: params.url,
			headers: {
				'Content-Type':'application/x-www-form-urlencoded'
			},
		}
		if(params.method == 'post'){
			opt.data = params.data
		}else {
			// 
			opt.params = params
		}
		// 拦截处理
		axios.interceptors.request.use((req) => {
		    if (req.method === 'post') {
		     	req.data = qs.stringify(req.data);
		    }
		    return req;
		}, (error) => Promise.reject(error));

		axios(opt).then(res=>{
			resolve(res.data)
		}).catch(err=>{
			reject(err)
		})
	})
}

终于解决了
在这里插入图片描述
更多请参考
https://www.kancloud.cn/yunye/axios/234845

展开阅读全文

没有更多推荐了,返回首页