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 相关文章推荐
jQuery ajax cache缓存问题
Jul 01 Javascript
javascript 禁用IE工具栏,导航栏等等实现代码
Apr 01 Javascript
简单的代码实现jquery定时器
Nov 17 Javascript
基于javascript实现页面加载loading效果
Sep 15 Javascript
JS实现把鼠标放到链接上出现滚动文字的方法
Apr 06 Javascript
jQuery基于ajax方式实现用户名存在性检查功能示例
Feb 10 Javascript
bootstrap是什么_动力节点Java学院整理
Jul 14 Javascript
jQuery实现checkbox的简单操作
Nov 18 jQuery
微信小程序排坑指南详解
May 23 Javascript
Node.js命令行/批处理中如何更改Linux用户密码浅析
Jul 22 Javascript
微信小程序本地存储实现每日签到、连续签到功能
Oct 09 Javascript
Vue动态加载图片在跨域时无法显示的问题及解决方法
Mar 10 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 self,$this,const,static,-&amp;gt;的使用
2009/10/22 PHP
本地机apache配置基于域名的虚拟主机详解
2013/08/10 PHP
详解thinkphp实现excel数据的导入导出(附完整案例)
2016/12/29 PHP
浅谈Laravel中的一个后期静态绑定
2017/08/11 PHP
jQuery 取值、赋值的基本方法整理
2014/03/31 Javascript
JavaScript拆分字符串时产生空字符的解决方案
2014/09/26 Javascript
浅谈EasyUI中Treegrid节点的删除
2015/03/01 Javascript
Jsonp post 跨域方案
2015/07/06 Javascript
基于JavaScript实现智能右键菜单
2016/03/02 Javascript
深入浅析JS的数组遍历方法(推荐)
2016/06/15 Javascript
详解nodejs 文本操作模块-fs模块(一)
2016/12/22 NodeJs
基于JavaScript实现本地图片预览
2017/02/08 Javascript
JavaScript定义函数_动力节点Java学院整理
2017/06/27 Javascript
深入浅析javascript函数中with
2018/10/28 Javascript
js canvas实现二维码和图片合成的海报
2020/11/19 Javascript
jquery html添加元素/删除元素操作实例详解
2020/05/20 jQuery
浅谈vue 多个变量同时赋相同值互相影响
2020/08/05 Javascript
React实现阿里云OSS上传文件的示例
2020/08/10 Javascript
[01:14]辉夜杯战队访谈宣传片—NEWBEE.Y
2015/12/26 DOTA
Python的迭代器和生成器使用实例
2015/01/14 Python
用Python计算三角函数之atan()方法的使用
2015/05/15 Python
在MAC上搭建python数据分析开发环境
2016/01/26 Python
Python卸载模块的方法汇总
2016/06/07 Python
python文件操作之批量修改文件后缀名的方法
2018/08/10 Python
轻松掌握CSS3中的字体大小单位rem的使用方法
2016/05/24 HTML / CSS
英国第一蛋白粉品牌:Myprotein
2016/09/14 全球购物
Eton丹麦官网:精美的男式衬衫
2020/05/27 全球购物
公司中层干部的自我评价分享
2014/03/01 职场文书
2014年女职工工作总结
2014/11/27 职场文书
武夷山导游词
2015/02/03 职场文书
学校教师培训工作总结
2015/10/14 职场文书
2016继续教育研修日志
2015/11/13 职场文书
创业计划书之养殖业
2019/10/11 职场文书
pyqt5蒙版遮罩mask,setmask的使用
2021/06/11 Python
NodeJs使用webpack打包项目的方法详解
2022/02/28 NodeJs
python中redis包操作数据库的教程
2022/04/19 Python