VUE使用axios请求后端数据

引言

最近学习vue尝试使用axios请求后端数据，发现了一大堆问题，后端接收不到请求的数据。查了资料之后，在这里总结记录一下。

先说一下常用的几种请求方式和模板：

Get方式

GET 方法传递参数格式如下：

<script type = "text/javascript">
  mounted () {
    axios.get('http://localhost:8022/user/login', {
    params: {
      ID: 12345	//参数ID
    }
  })
  .then(function (response) {	//请求成功
    console.log(response);
    alert(response.data.msg);
  })
  .catch(function (error) {		//请求失败
    console.log(error);
  });
  }
})
</script>

Post方式

POST 方法传递参数格式如下：

<script type = "text/javascript">
  mounted () {
    axios.post('http://localhost:8022/user/login', {
    params: {
      ID: 12345	//参数ID
    }
  })
  .then(function (response) {	//请求成功
    console.log(response);
    alert(response.data.msg);
  })
  .catch(function (error) {		//请求失败
    console.log(error);
  });
  }
})
</script>

axios API 方式

<script type = "text/javascript">
  mounted () {
    //  可以将请求方式、URL、请求/响应格式、请求头等参数进行单独配置
	axios({		//GET 请求远程图片
  		method:'get',
 		url:'http://bit.ly/2mTM3nY',
  		responseType:'stream'
	})
  	.then(function(response) {
  		response.data.pipe(fs.createWriteStream('ada_lovelace.jpg'))
	});
  }
})
</script>

axios响应结构

axios请求的响应包含以下信息：

{
  // `data` 由服务器提供的响应
  data: {},

  // `status`  HTTP 状态码
  status: 200,

  // `statusText` 来自服务器响应的 HTTP 状态信息
  statusText: "OK",

  // `headers` 服务器响应的头
  headers: {},

  // `config` 是为请求提供的配置信息
  config: {}
}

使用 then 时，会接收下面这样的响应：

axios.get("/user/12345")
  .then(function(response) {
    console.log(response.data);
    console.log(response.status);
    console.log(response.statusText);
    console.log(response.headers);
    console.log(response.config);
  });

axios配置默认值

可以指定将被用在各个请求的配置默认值。

全局的 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';

post请求出现的错误

我们知道在做 post 请求的时候，我们的传参是 data: {...} 或者直接 {...} 的形式传递的。

在使用时，axios会帮我们 转换请求数据和响应数据 以及 自动转换 JSON 数据

而在使用post方式请求时，会出现后端接收不到数据的现象

解决方案一

【用 URLSearchParams 传递参数】

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

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

---

解决方案二

【使用qs库】

npm install qs --save

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

axios({
	headers: {
		'deviceCode': 'A95ZEF1-47B5-AC90BF3'
	},
	method: 'post',
	url: '/api/lockServer/search',
	data: Qs.stringify(data)	//使用qs将参数转换为query参数
})

网上有很多方案说使用

axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded';

但是我用的时候不需要，没请求成功的可以试试

---

解决方案三

可以通过修改 transformRequest 来达到我们的目的

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'
	}
})

欢迎访问个人博客：http://www.itle.info/