Vue简单封装axios之解决post请求后端接收不到参数问题


Posted in Javascript onFebruary 16, 2020

1.在src/下新建api文件夹,api/下新建index.js和public.js

在public.js中:

import axios from 'axios';
import qs from 'qs'
import router from '../router'
import { MessageBox} from 'mint-ui'
// 注意点,按照以下写
var instance = axios.create();
instance.defaults.timeout = 10000;
instance.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded';
export default {
  fetchGet(url, params = {}) {
    return new Promise((resolve, reject) => {
      axios.get(url, params).then(res => {
        if(res.data.code === 302) {
          MessageBox('提示', '登录失效,请重新登录');
          MessageBox.alert('登录失效,请重新登录', '提示').then(action => {  
            router.push("/login");
          });
        }
        resolve(res.data);
      }).catch(error => {
        reject(error);
      })
    })
  },
  fetchPost(url, params = {}) {
    /* 
    axios post请求后端接收不到参数问题:
    解决方案一:有效,但是兼容性不是很好,不是所有浏览器都支持
      let data = new URLSearchParams()
      for (var key in params) {
        data.append(key, params[key])
      }
    */
    // 解决方案二:使用qs模块(axios中自带),使用qs.stringify()序列化params
    return new Promise((resolve, reject) => {
      axios.post(url, qs.stringify(params)).then(res => {
        resolve(res.data);
      }).catch(error => {
        reject(error);
      })
    })
  }
}

2.在index.js中:

import http from './public'
export const getStation = (params) => {
  return http.fetchGet('/hydro/rest/getBelongUser', params);
}
export const userLogin = (params) => {
  return http.fetchPost("/hydro/rest/login", params);
}

3.在Login.vue中调用post请求方法:

<template>
  <div class="login">
    <h1>登录页面</h1>
    <input type="text" placeholder="请输入用户名" v-model="Username">
    <input type="password" placeholder="请输入密码" v-model="Password">
    <input type="button" value="登录" @click="toLogin">
  </div>
</template>
<script>
import {userLogin} from "../../api/index"
export default {
 name: 'app',
 data() {
  return {
   Username: "",
   Password: ""
  }
 },
 methods: {
  toLogin() {
    let params = {
      username: this.Username,
      password: this.Password
    };
    userLogin(params).then(res => {
      if(res.code === 200) {
        this.$router.push("/home")
      }
    })
  }
 }
}
</script>

#### 4.在Home.vue调用get请求方法

<template>
  <h1 class="home">
    {{stationName}}
  </h1>
</template>
<script>
import {getStation} from "../../api/index"
export default {
  data() {
    return{
      stationName: ""
    }
  },
  created() {
    getStation().then(res => {
      this.stationName = res.msg;
    })
  }
}
</script>

总结

以上所述是小编给大家介绍的Vue简单封装axios之解决post请求后端接收不到参数问题,希望对大家有所帮助!

Javascript 相关文章推荐
javascript 同时在IE和FireFox获取KeyCode的代码
Feb 07 Javascript
js中top、clientTop、scrollTop、offsetTop的区别 文字详细说明版
Jan 08 Javascript
js解决弹窗问题实现班级跳转DIV示例
Jan 06 Javascript
js图片处理示例代码
May 12 Javascript
AngularJS控制器详解及示例代码
Aug 16 Javascript
layui导航栏实现代码
May 19 Javascript
javascript流程控制语句集合
Sep 18 Javascript
对vux点击事件的优化详解
Aug 28 Javascript
angular4笔记系列之内置指令小结
Nov 09 Javascript
vue+element加入签名效果(移动端可用)
Jun 17 Javascript
JS document对象简单用法完整示例
Jan 14 Javascript
vue+springboot实现登录验证码
May 27 Vue.js
封装一下vue中的axios示例代码详解
Feb 16 #Javascript
Vue.js的模板语法详解
Feb 16 #Javascript
Vue两个版本的区别和使用方法(更深层次了解)
Feb 16 #Javascript
vue数据响应式原理知识点总结
Feb 16 #Javascript
vue中利用iscroll.js解决pc端滚动问题
Feb 15 #Javascript
JS localStorage存储对象,sessionStorage存储数组对象操作示例
Feb 15 #Javascript
ES6 proxy和reflect的使用方法与应用实例分析
Feb 15 #Javascript
You might like
SMARTY学习手记
2007/01/04 PHP
PHP+iFrame实现页面无需刷新的异步文件上传
2014/09/16 PHP
PHP自带方法验证邮箱是否存在
2016/02/01 PHP
Laravel中获取路由参数Route Parameters的五种方法示例
2017/09/29 PHP
PHP结合Ffmpeg快速搭建流媒体服务的实践记录
2018/10/31 PHP
Laravel框架实现定时Task Scheduling例子
2019/10/22 PHP
PhpStorm2020.1 安装 debug - Postman 调用的详细教程
2020/08/17 PHP
在JavaScript中typeof的用途介绍
2013/04/11 Javascript
js关于字符长度限制的问题示例探讨
2014/01/24 Javascript
js实现ctrl+v粘贴上传图片(兼容chrome、firefox、ie11)
2016/03/09 Javascript
移动端 一个简单易懂的弹出框
2016/07/06 Javascript
js判断是否是手机页面
2017/03/17 Javascript
vue.js中过滤器的使用教程
2017/06/08 Javascript
详解Web使用webpack构建前端项目
2017/09/23 Javascript
JavaScript判断输入是否为数字类型的方法总结
2017/09/28 Javascript
vue返回上一页面时回到原先滚动的位置的方法
2018/12/20 Javascript
VUE引入第三方js包及调用方法讲解
2019/03/01 Javascript
JS array数组检测方式解析
2020/05/19 Javascript
JS实现多功能计算器
2020/10/28 Javascript
[03:10]2014DOTA2 TI马来劲旅Titan首战告捷目标只是8强
2014/07/10 DOTA
Python实现对比不同字体中的同一字符的显示效果
2015/04/23 Python
关于Python中异常(Exception)的汇总
2017/01/18 Python
python多进程实现文件下载传输功能
2018/07/28 Python
Python正则表达式实现简易计算器功能示例
2019/05/07 Python
python print 格式化输出,动态指定长度的实现
2020/04/12 Python
详解使用Python写一个向数据库填充数据的小工具(推荐)
2020/09/11 Python
PyCharm中关于安装第三方包的三个建议
2020/09/17 Python
基于HTML5+tracking.js实现刷脸支付功能
2020/04/16 HTML / CSS
世界上最大的罕见唱片、CD和音乐纪念品网上商店:991.com
2018/05/03 全球购物
The North Face官方旗舰店:美国著名户外品牌
2020/09/28 全球购物
大四自我鉴定范文
2013/10/06 职场文书
《狼》教学反思
2014/03/02 职场文书
网络技术专业求职信
2014/07/13 职场文书
社会实践单位意见
2015/06/05 职场文书
导游词范文之颐和园/重庆/云台山
2019/09/10 职场文书
css清除浮动clearfix:after的用法详解(附完整代码)
2023/05/21 HTML / CSS