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 相关文章推荐
在textarea文本域中显示HTML代码的方法
Mar 06 Javascript
javascript 数组排序函数
Aug 20 Javascript
javascript 面向对象编程 聊聊对象的事
Sep 17 Javascript
Jquery中对数组的操作代码
Aug 12 Javascript
javascript手工制作悬浮菜单
Feb 12 Javascript
探析浏览器执行JavaScript脚本加载与代码执行顺序
Jan 12 Javascript
概述如何实现一个简单的浏览器端js模块加载器
Dec 07 Javascript
js实现弹窗暗层效果
Jan 16 Javascript
JavaScript 中 JSON.parse 函数 和 JSON.stringify 函数
Dec 05 Javascript
微信小程序云开发如何使用npm安装依赖
May 18 Javascript
VUE前后端学习tab写法实例
Aug 06 Javascript
javascript实现简易计算器功能
Sep 23 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
纯真IP数据库的应用 IP地址转化成十进制
2009/06/14 PHP
php下图片文字混合水印与缩略图实现代码
2009/12/11 PHP
php cache类代码(php数据缓存类)
2010/04/15 PHP
php压缩多个CSS为一个css的代码并缓存
2011/04/21 PHP
php中随机函数mt_rand()与rand()性能对比分析
2014/12/01 PHP
PHP的Yii框架入门使用教程
2016/02/15 PHP
一波PHP中cURL库的常见用法代码示例
2016/05/06 PHP
PHP new static 和 new self详解
2017/02/19 PHP
详谈PHP中public,private,protected,abstract等关键字的用法
2017/12/31 PHP
PHP实现微信公众号验证Token的示例代码
2019/12/16 PHP
获取Javscript执行函数名称的方法
2006/12/22 Javascript
浅析hasOwnProperty方法的应用
2013/11/20 Javascript
JavaScript实现维吉尼亚(Vigenere)密码算法实例
2013/11/22 Javascript
parentElement,srcElement的使用小结
2014/01/13 Javascript
javascript带回调函数的异步脚本载入方法实例分析
2015/07/02 Javascript
javascript实现类似于新浪微博搜索框弹出效果的方法
2015/07/27 Javascript
通过Jquery.cookie.js实现展示浏览网页的历史记录超管用
2015/10/23 Javascript
HTML5 Shiv完美解决IE(IE6/IE7/IE8)不兼容HTML5标签的方法
2015/11/25 Javascript
继续学习javascript闭包
2015/12/03 Javascript
jQuery实现复选框的全选和反选
2017/02/02 Javascript
jQuery基于ajax方式实现用户名存在性检查功能示例
2017/02/10 Javascript
bootstrap fileinput实现文件上传功能
2017/08/23 Javascript
JavaScript检查数据中是否存在相同的元素(两种方法)
2018/10/07 Javascript
使用ESLint禁止项目导入特定模块的方法步骤
2019/03/04 Javascript
javascript中的数据类型检测方法详解
2019/08/07 Javascript
javascript实现贪吃蛇小游戏
2020/07/28 Javascript
Python常用小技巧总结
2015/06/01 Python
Python 记录日志的灵活性和可配置性介绍
2018/02/27 Python
python图书管理系统
2020/04/05 Python
Python如何实现大型数组运算(使用NumPy)
2020/07/24 Python
经理职责范文
2013/11/08 职场文书
公司门卫岗位职责
2014/03/15 职场文书
节约用水的口号
2014/06/20 职场文书
公司承诺函范文
2015/01/21 职场文书
2015年司法所工作总结
2015/04/27 职场文书
教师节获奖感言
2015/07/31 职场文书