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 相关文章推荐
js动态修改整个页面样式达到换肤效果
May 23 Javascript
js实现对table动态添加、删除和更新的方法
Feb 10 Javascript
JavaScript Split()方法
Dec 18 Javascript
js实现上传图片及时预览
May 07 Javascript
js鼠标单击和双击事件冲突问题的快速解决方法
Jul 11 Javascript
深入理解Vue-cli搭建项目后的目录结构探秘
Jul 13 Javascript
浅谈如何使用 webpack 优化资源
Oct 20 Javascript
JavaScript实现QQ列表展开收缩扩展功能
Oct 30 Javascript
vue3.0 CLI - 2.2 - 组件 home.vue 的初步改造
Sep 14 Javascript
使用webpack搭建vue项目及注意事项
Jun 10 Javascript
jQuery创建折叠式菜单
Jun 15 jQuery
JS async 函数的含义和用法实例总结
Apr 08 Javascript
封装一下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
php实现字符串首字母转换成大写的方法
2015/03/17 PHP
PHP attributes()函数讲解
2019/02/03 PHP
php使用Swoole实现毫秒级定时任务的方法
2020/09/04 PHP
JavaScript 学习笔记(十五)
2010/01/28 Javascript
基于jQuery的实现简单的分页控件
2010/10/10 Javascript
Javascript 浮点运算精度问题分析与解决
2014/03/26 Javascript
jQuery循环动画与获取组件尺寸的方法
2015/02/02 Javascript
jQuery实现信息提示框(带有圆角框与动画)效果
2015/08/07 Javascript
javascript每日必学之基础入门
2016/02/16 Javascript
Bootstrap每天必学之模态框(Modal)插件
2016/04/26 Javascript
JS中作用域和变量提升(hoisting)的深入理解
2016/10/31 Javascript
JS中如何实现点击a标签返回页面顶部的问题
2017/01/19 Javascript
JS中去掉array中重复元素的方法
2017/05/26 Javascript
如何重置vue打印变量的显示方式
2017/12/06 Javascript
弱类型语言javascript中 a,b 的运算实例小结
2019/08/07 Javascript
JavaScript:ES2019 的新特性(译)
2019/08/08 Javascript
python判断windows系统是32位还是64位的方法
2015/05/11 Python
Python面向对象进阶学习
2019/05/21 Python
python3中eval函数用法使用简介
2019/08/02 Python
Python及Pycharm安装方法图文教程
2019/08/05 Python
python 一篇文章搞懂装饰器所有用法(建议收藏)
2019/08/23 Python
Python OpenCV图像指定区域裁剪的实现
2019/10/30 Python
python利用递归方法实现求集合的幂集
2020/09/07 Python
使用sublime text3搭建Python编辑环境的实现
2021/01/12 Python
世界上最好的帽子:Tilley
2016/11/27 全球购物
Public Desire美国/加拿大:全球性的在线鞋类品牌
2018/12/17 全球购物
白俄罗斯女装和针织品网上商店:Presli.by
2019/10/13 全球购物
德国2018年度最佳在线药房:Bodfeld Apotheke
2019/11/04 全球购物
黄金酒广告词
2014/03/21 职场文书
幼儿发展评估方案
2014/06/11 职场文书
师范类求职信
2014/06/21 职场文书
单位活动策划方案
2014/08/17 职场文书
个人授权委托书模板
2014/09/14 职场文书
交通运输局四风问题对照检查材料思想汇报
2014/10/09 职场文书
2016应届毕业生实习评语
2015/12/01 职场文书
CSS 一行代码实现头像与国旗的融合
2021/10/24 HTML / CSS