概述
这篇文章始于自己封装了axios.js的里面的get方法，和post方法
首先我们先来看看使用说明 · Axios 中文说明 · 看云www.kancloud.cn
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状态，
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)
})
})
}
终于解决了
更多请参考
最后
以上就是含糊宝马为你收集整理的axios post封装对象到后端_axios.js以post方式传递数据后台获取不到数据，这到底是什么原因...的全部内容，希望文章能够帮你解决axios post封装对象到后端_axios.js以post方式传递数据后台获取不到数据，这到底是什么原因...所遇到的程序开发问题。
如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。
发表评论 取消回复