Hey,天还没亮，夜猫子，要注意身体哦！

Vue.js 2.0采用axios进行AJAX请求

发布于2018-6-15 分类：JS / Vue.js / 前端 评论(0) 阅读(2,480)
　　　

最近在用vue.js折腾一个文件储存的小网站，正真的体验到前后端分离，前端Vue.js + 后端ASP.NET，仅用ASHX（一般处理程序）以AJAX的方式进行前后端交互。

写代码时发现了Vue本身不支持发送AJAX请求，需要插件支持，搜索了一下发现方法挺多的：JQuery、Vue-resource（Vue 2.0不再维护）、axios、自封装AJAX。个人感觉Vue里用JQuery有点点奇怪，并且在segmentfault看到挺多用推荐用axios，就打算用这个了，axios使用详细说明：https://www.kancloud.cn/yunye/axios/234845

一、GET

执行GET请求直接在链接后加入参数即可：

  1. axios.get("../tools/user.ashx?action=isToken&username=" + user + "&token=" + tk).then(function(response) {
  2.     if (response.data[0].status == “yes”) {} else {}
  3. }).
  4. catch(function(error) {
  5.     console.log(error);
  6. });

二、POST

但是POST时问题就来了：

  1. let params = {
  2.     username: name,
  3.     password: pw
  4. };
  5. axios.post("../tools/user.ashx?action=login", params).then(function(response) {
  6.     if (response.data[0].status == "yes") {
  7.         localStorage.username = response.data[0].username;
  8.         localStorage.token = response.data[0].token;
  9.         vm.$message({
  10.             message: '登陆成功',
  11.             type: 'success'
  12.         });
  13.         //…
  14.     }
  15. }).
  16. catch(function(error) {
  17.     console.log(error);
  18. });

.NET后端并没有接收到axios POST过来的参数，调试报错了：

传过去后端的时JSON格式的参数（form格式才是正确的格式）：

终于在这篇文章：https://segmentfault.com/a/1190000012635783，找到了解决方案

我采用的是第三种方案：使用qs处理参数，这里提一下：Qs.stringify()会将对象序列化成URL的形式，以&进行拼接，看下图：

在传参前用Qs.stringify()将参数处理一下就可以了，完整的POST请求：

  1. //将对象序列化为url格式
  2. let params = Qs.stringify({
  3.     username: name,
  4.     password: pw
  5. })
  6. // POST请求
  7. axios.post("../tools/user.ashx?action=login", params).then(function(response) {
  8.     if (response.data[0].status == "yes") {
  9.         localStorage.username = response.data[0].username;
  10.         localStorage.token = response.data[0].token;
  11.         vm.$message({
  12.             message: '登陆成功',
  13.             type: 'success'
  14.         });
  15.         //...
  16.     }
  17. }).
  18. catch(function(error) {
  19.     console.log(error);
  20. });

传送的数据正确了，后端也能接收到参数：

未经允许不得转载：Rising Sun's Blog » JS / Vue.js / 前端 » Vue.js 2.0采用axios进行AJAX请求
标签：
评论 0
 
 
发表评论