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

最新推荐文章于 2025-03-09 14:46:09 发布

weixin_34319111

最新推荐文章于 2025-03-09 14:46:09 发布

阅读量698

点赞数

CC 4.0 BY-SA版权

文章标签：数据库 json

原文链接：https://juejin.im/post/5c361ad06fb9a049b7808f74

本文详细介绍了如何封装axios库中的get和post方法，包括解决后台接收数据为null的问题，通过设置Content-Type为application/x-www-form-urlencoded，并利用qs库进行数据转换。同时，文章还探讨了使用全局拦截器来优化请求和响应处理。

这篇文章始于自己封装了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这个Header为application/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)
		})
	})
}
复制代码

终于解决了

更多请参考 www.kancloud.cn/yunye/axios…