Vue简单封装axios—解决post请求后端接收不到参数问题
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()序列化paramsreturn 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>
转载于:https://www.cnblogs.com/mica/p/10879770.html
Vue简单封装axios—解决post请求后端接收不到参数问题相关推荐
- 【跨域问题】Vue简单封装axios—解决post请求后端接收不到参数问题
原因分析: 1. 传参数据没有序列化? 解决办法: [推荐] [推荐阅读] vue+axios+qs序列化 "三步解析"[含demo实例]- 代码篇 2. 服务端接受数据格式参数配 ...
- axios delete有请求体吗_封装 axios 取消重复请求
编者按:本文作者舒丽琦,奇舞团前端开发工程师 在我们web开发过程中,很多地方需要我们取消重复的请求.但是哪种场合需要我们取消呢?我们如何取消呢?带着这些问题我们阅读本文. 阅读完本文,你将了解以下内 ...
- 封装 axios 取消重复请求
编者按:本文作者舒丽琦,奇舞团前端开发工程师 在我们web开发过程中,很多地方需要我们取消重复的请求.但是哪种场合需要我们取消呢?我们如何取消呢?带着这些问题我们阅读本文. 阅读完本文,你将了解以下内 ...
- axios队列 vue_(十三 )Vue 封装axios(四种请求)及相关介绍
Vue 封装axios(四种请求)及相关介绍 首先axios是基于promise的http库 promise是什么? 1.主要用于异步计算 2.可以将异步操作队列化,按照期望的顺序执行,返回符合预期的 ...
- 每天一点点之vue框架开发 - axios解决跨越问题
每天一点点之vue框架开发 - axios解决跨越问题 参考文章: (1)每天一点点之vue框架开发 - axios解决跨越问题 (2)https://www.cnblogs.com/cap-rq/p ...
- uni.request POST 请求后台接收不到参数
uni.request POST 请求后台接收不到参数 问题描述 前端用 uni.reauest 发送 POST 请求,后台接收不到参数. 原因分析 是因为 uni.request 对传入 data ...
- 微信小程序request请求后台接收不到参数问题
微信小程序request请求后台接收不到参数问题 一. 小程序部分代码 二. 后端 三. 问题代码 四. 请求头 一. 小程序部分代码 发一个普通的request请求 wx.request({url: ...
- promise的应用和在VUE中使用axios发送AJAX请求服务器
promise 用promise对函数封装: 原来的代码: <!DOCTYPE html> <html> <head><title>vue demo&l ...
- axios使用post请求服务端不能获取参数的解决方法
项目中使用到axios作为ajax请求插件,用到post请求是常见的,诸如以下场景的一个普通的post请求: export function listManage(params) { retu ...
最新文章
- Go 语言同一个包内函数调用、包名和实际路径最后一个目录不一致问题
- npoi上传xlsx文件,并读取数据
- android classloader异常,Android中ClassLoader类加载机制
- access 合并多行字符串_八种方法玩转字符串合并,这篇文章全都给你讲明白!...
- 操作系统(十)进程通信
- boost::is_sorted相关的测试程序
- 在iOS中安装OpenCV
- Swift之深入解析可选类型Optional的底层原理
- VC++ 删除当前读取行 代码
- web性能压测——webbench
- 电信运营商x86服务器定制策略
- 程序员过关斩将--Http请求中如何保持状态?
- 数字图像处理:各种变换滤波和噪声的类型和用途总结
- 如何基于阿里云搭建适合初创企业的轻量级架构?
- 一步一步学Remoting之二:激活模式
- arcgis server mysql_ArcGIS Server 10.1发布要素服务时遇到的数据库注册问题总结 (二)...
- 计算机二级北京工业大学耿丹学院官网,北京工业大学耿丹学院
- 三维电子沙盘大数据互动触摸交互可视化地理信息系统
- Spreadsheet_Excel_Writer
- 使用路由器上网微信qq绝地求生腾讯系打开慢或打不开的问题
热门文章
- 搭建基于spring MVC框架 + RESTful架构风格技术总结
- Packstack安装havana后,计算节点连接DB错误解决
- 20佳精美404错误页面设计欣赏
- Windows7优化开机、关机速度的方法
- pom添加依赖后不报错但是代码依然缺少依赖
- 编译Flink项目的时候遇到cannot find symbol symbol: variable Time
- js中输出变量的类型和输出对象的的属性/方法/成员函数
- 对几个submission文件迅速做voting操作
- scipy实现的共轭梯度法以及相关原理图解
- SecureCRT连接CentOS阿里云,小键盘在VIM情况下,无法输入数字反而出现英文