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()序列化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请求后端接收不到参数问题,希望对大家有所帮助!

(0)

相关推荐

  • 浅谈在Vue-cli里基于axios封装复用请求

    本文介绍了浅谈在Vue-cli里基于axios封装复用请求,分享给大家,具体如下: 安装 只用安装一个axios就可以了. npm install axios --save 接口代理设置 为了请求可以正常发送,我们一般要进行一个接口代理的配置,这样可以避免请求跨域,项目打包之后,后端一般也要搭建一个nginx之类的东西进行转发请求,不然请求会因为跨域问题失败的. //文件位置:config/index.js proxyTable: { '/api': { target: 'http://47.9

  • vue 里面使用axios 和封装的示例代码

    vue官方推荐使用 axios发送请求 首先上需求 1.需要封装全局调用 2.返回一个promise对象 3.错误全局统一处理 4.除了登录界面token带入头部 5.登录时候把用户信息自动存到vuex里面 首先上封装代码 /** * User: sheyude * Date: 2017/8/23 0023 * Time: 下午 13:15 * */ import axios from 'axios'; // 导入配置文件 配置文件就导入的请求的前缀地址 import {defaults} fr

  • 详解Vue用axios发送post请求自动set cookie

    vue-resource不再维护之后,我也用起了axios,但是死活无法设置服务器发送过来的cookie 后来查询文档发现,这个是要单独配置的. // `withCredentials` indicates whether or not cross-site Access-Control requests // should be made using credentials withCredentials: false, // default 当我们把此配置项设置成默认配置项并且设置成true

  • 详解Vue 2.0封装axios笔记

    前言 单页面应用大多采用前后端分离开发思路,我们知道,前端和后端交互有多中方式(服务器端渲染.Ajax.websocket等),今天我们主要讲解Ajax部分. 最近团队讨论了一下,Ajax 本身跟 Vue 并没有什么需要特别整合的地方,使用 fetch polyfill 或是 axios.superagent 等等都可以起到同等的效果,vue-resource 提供的价值和其维护成本相比并不划算,所以决定在不久以后取消对 vue-resource 的官方推荐.已有的用户可以继续使用,但以后不再把

  • 解决vue axios的封装 请求状态的错误提示问题

    如下所示: /** * axios配置,输出为vue组建 * */ import axios from 'axios'; import qs from 'qs' import CookiesJS from 'js-cookie' import router from '../router' // http request 拦截器 axios.interceptors.request.use( config => { config.headers = { 'Content-Type': 'appl

  • vue中axios处理http发送请求的示例(Post和get)

    本文介绍了vue中axios处理http发送请求的示例(Post和get),分享给大家,具体如下: axios中文文档 https://github.com/mzabriskie/axios#using-applicationx-www-form-urlencoded-format   axios文档 在处理http请求方面,已经不推荐使用vue-resource了,而是使用最新的axios,下面做一个简单的介绍. 安装 使用node npm install axios 使用cdn <scrip

  • vue中Axios的封装与API接口的管理详解

    如图,面对一团糟代码的你~~~真的想说,What F~U~C~K!!! 回归正题,我们所要的说的axios的封装和api接口的统一管理,其实主要目的就是在帮助我们简化代码和利于后期的更新维护. 一.axios的封装 在vue项目中,和后台交互获取数据这块,我们通常使用的是axios库,它是基于promise的http库,可运行在浏览器端和node.js中.他有很多优秀的特性,例如拦截请求和响应.取消请求.转换json.客户端防御XSRF等.所以我们的尤大大也是果断放弃了对其官方库vue-reso

  • vue 2.x 中axios 封装的get 和post方法

    vue 2.x axios 封装的get 和post方法 import axios from 'axios' import qs from 'qs' export class HttpService { Get(url, data) { return new Promise((resolve, reject) => { axios.get(url, { params: data }).then((res) => { if (res) { //成功回调 resolve(res); } }).ca

  • 解决Vue在封装了Axios后手动刷新页面拦截器无效的问题

    项目类型:vue+vux+axios 刚开始,把Axios封装在了http.js文件里面,然后为了使用VUX的提示框消息,把拦截器直接写在了main.js里面.直接调用接口,一切正常. 然而因为返回值有统一的code错误代码提示,所以在拦截器里面加入了code的判断以便统一返回值.刚开始一切都是按照预期的结果来走的.就在一个夜黑风高的晚上,我头晕眼花的按F5手动刷新了一下页面,惊奇的发现拦截器失效了,并没有拦截外面的Coode Json代码层,而是直接把服务器的全部json数据劈头盖脸的砸在了我

  • 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; i

  • Vue简单封装axios网络请求的方法

    目录 Vue简单封装axios网络请求 一.utils下的httpUtils.js: 二./api下的path.js: 三./api下的index.js: 四.组件中引入并请求: Vue简单封装axios网络请求 一.utils下的httpUtils.js: import axios from 'axios'; import querystring from 'querystring'; const errorHandler = (status, info) => { switch(status

  • vue简单封装axios插件和接口的统一管理操作示例

    本文实例讲述了vue简单封装axios插件和接口的统一管理操作.分享给大家供大家参考,具体如下: 现在很多公司的项目都是前后端分离的项目,那么说到前后端分离,必定会有ajax请求来获得后台的数据. 在做jquery项目的时候,我们都会使用它封装好的方法来直接发起ajax请求. 在vue项目中,我们使用最多的就是axios这个插件,下面就简单的封装下这个插件并且把接口给统一化管理. 一.安装和配置 1.在项目根目录下打开终端安装 npm install axios -S 2.安装完成以后,在src

  • axios 发 post 请求,后端接收不到参数的完美解决方案

    目录 问题场景 问题原因 要点1 要点2 问题分析 解决方案 解决方案一 解决方案二 解决方案三 解决方案四 解决方案五 解决方案六 问题场景 场景很简单,就是一个正常 axios post 请求: axios({ headers: { 'deviceCode': 'A95ZEF1-47B5-AC90BF3' }, method: 'post', url: '/api/lockServer/search', data: { username, pwd } }) 后台说没有接收到你的传参. 这就有

  • vue中如何简单封装axios浅析

    把axios注入到Vue中 import axios from 'axios'; Vue.prototype.$axios = axios; import axios from 'axios' axios.defaults.timeout = 5000; //响应时间 axios.defaults.headers.post['Content-Type'] = 'application/json;charset=UTF-8'; //配置请求头 axios.defaults.withCredenti

  • vue中封装axios并实现api接口的统一管理

    在vue项目中,我们通常都是使用axios与后台进行数据交互,axios有很多好用的特性,这里不多做介绍,相关细节可以查阅axios中文网.在对axios进行封装之前,我们要使用vue脚手架工具创建一个vue项目(这里我用的是cli4). 安装 cnpm install axios --save-dev; // 安装axios cnpm install qs --save-dev; // 安装qs模块,用来序列化post类型的数据,否则后端无法接收到数据 模块引入 在src目录下创建一个serv

  • vue3学习笔记简单封装axios示例实现

    目录 简介 openapi 基本配置 拦截器 api请求 数据渲染 简介 axios是一个基于promise的网络请求库,管理后台使用的场景通常 获取后端api数据,然后交给页面渲染 还是在前面的示例项目上操作,安装axios最新0.27.2版本 cd HELLO-WORLD npm install axios 复制代码 openapi 在网上找到一个开放的openapi地址,免费且无需认证就可以使用 方便开发时模拟接口数据,但不能使用在生产环境中 该openapi返回json数据,比较符合我们

  • axios发送post请求springMVC接收不到参数的解决方法

    axios发送post请求时,出现了参数后台接收不到的情况,分析了下请求,发现是请求头content-type不对,是application/json,正常应该是application/x-www-form-urlencoded. 解决方法有以下三种: 1.设置axios的默认请求头 //设置全局的 axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded'; var instance = a

  • vue如何封装Axios的get、post请求

    目录 封装Axios的get.post请求 1.封装Axios基础配置 2.封装网络请求 3.vue中使用 vue axios两种方法(封装和不封装)get请求和post请求 一.没有封装的用法 二.封中之后的用法 封装Axios的get.post请求 Axios在vue项目中用的较多,每次都要写一遍很是不方便,尤其其中的config配置项是公用的,完全可以封装一下,这样下次再用就可以直接CV了!毕竟CV大法香啊! 1.封装Axios基础配置 创建一个request.js 文件,内容如下,我把解

  • 基于vue 添加axios组件,解决post传参数为null的问题

    好,下面上货. 1.安装axios npm install axios --save 2.添加axios组件 import axios from 'axios' axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded'; axios.defaults.baseURL = 'http://localhost:7878/zkview'; Vue.prototype.$ajax = axios;

随机推荐