当前位置: 首页 > 编程日记 > 正文

vue 网络请求 axios vue POST请求 vue GET请求 代码示例

QQ技术交流群 173683866 526474645 欢迎加入交流讨论,打广告的一律飞机票

1.安装 axios 和 vue-axios 和 qs (qs是为了解决post默认使用的是x-www-from-urlencoded 请求,导致请求参数无法传递到后台)

$ npm install --save axios vue-axios qs

2.在 main.js 中引入 axios 和 qs

import axios from 'axios';
import qs from 'qs';

3.在 main.js 中把qs配置到axios

// http请求拦截器 请求之前的一些操作
axios.interceptors.request.use(config => {if(config.method=='post'){config.data=qs.stringify(config.data);//防止post请求参数无法传到后台}return config
}, error => {return Promise.reject(error)
});

4.在 main.js 中使用原型链继承,给VUE添加属性 axios

Vue.prototype.$axios = axios;

5.网络请求  get

var url ="/getProductInfo.do?userId=123";
this.$axios.get(url).then(res => {console.log(res)});

6.网络请求 post

var url ="/getProductInfo.do";
var data = { session, areaId };
this.$axios.post(url, data).then(res => {console.log(res)});

完成

番外:(可以看可以不看)

1.

给 axios 拦截器中的传输数据添加参数

// http请求拦截器 请求之前的一些操作
axios.interceptors.request.use(config => {if (config.url.indexOf('https') == -1) {config.url = comm.httpUrl + config.url}if (config.method == 'post') {config.data.session= "20190904175901546091d34ab9e1e4572b3e2889979232d51";console.log(config.url,'session-post',config.data)config.data = qs.stringify(config.data);} else if (config.method == 'get') {config.params.session= "20190904175901546091d34ab9e1e4572b3e2889979232d51";console.log(config.url,'session-get',config.params)}return config
}, error => {return Promise.reject(error)
});

2.简单的封装使用

<script>
var that,axios;
export default {data() {return {login_status : false};},mounted() {that=this;axios=this.$axios;this.getData(); // 页面list列表数据},methods:{getData(){axios.post('/login.do',{code:'123'}).then(res=>{that.login_status = true;})}}

vue 把一个网络请求返回的结果封装成一个变量

​_this.prototype.getJsSdkConfig= ()=>{var url = "/v1/api/getJsSdkConfig.do";var data = { url:window.location.href};_this.prototype.$axios.post(url, data).then(res => {return res;}).catch(error => {return error;});};​        var jsSdkConfig = _this.prototype.getJsSdkConfig();console.log(jsSdkConfig)

相关文章:

bff v2ex_语音备忘录的BFF-如何通过Machine Learning简化Speech2Text

bff v2exby Rafael Belchior通过拉斐尔贝尔基奥尔(Rafael Belchior) 语音备忘录的BFF-如何通过Machine Learning简化Speech2Text (The voice memo’s BFF — how to make Speech2Text easy with Machine Learning) Do you think recording voice memos is inconvenient becaus…

pat1094. The Largest Generation (25)

1094. The Largest Generation (25) 时间限制200 ms内存限制65536 kB代码长度限制16000 B判题程序Standard作者CHEN, YueA family hierarchy is usually presented by a pedigree tree where all the nodes on the same level belong to the same generation. Your task is to …

web-view里面的网页能请求未配置的request域名吗

QQ技术交流群 173683866 526474645 欢迎加入交流讨论&#xff0c;打广告的一律飞机票 可以

.NET调用JAVA的WebService方法

调用WebService&#xff0c;最简单的办法当然是直接添加WEB引用&#xff0c;然后自动产生代理类&#xff0c;但是在调用JAVA的WebService时并没有这么简单&#xff0c;特别是对于SoapHeader的处理&#xff0c;在网上也有相关资料&#xff0c;但是都整理的不够清晰明了。根据网上…

适合初学者的数据结构_数据结构101:图-初学者的直观介绍

适合初学者的数据结构了解您每天使用的数据结构 (Get to know the data structures that you use every day) Welcome! Let’s Start with Some Vital Context. Let me ask you something:✅ Do you use Google Search? ✅ Do you use Google Maps? ✅ Do you use social med…

深入解析CSS样式层叠权重值

本文为转载内容&#xff0c;源地址&#xff1a;http://www.ofcss.com/2011/05/26/css-cascade-specificity.html 读到《重新认识CSS的权重》这篇&#xff0c;在文章最后给出了便于记忆的顺序&#xff1a; “important > 内联 > ID > 类 > 标签 | 伪类 | 属性选择 &…

VUE做一个公共的提示组件,显示两秒自动隐藏,显示的值父组件传递给子组件

需求&#xff1a;VUE做一个公共的提示组件&#xff0c;显示两秒自动隐藏&#xff0c;显示的值由父组件动态传给子组件。 效果图&#xff1a; 实现步骤&#xff1a; 1.创建一个子组件 Toptips.vue (它就是公共提示组件)&#xff0c; optips.vue代码如下&#xff1a; <temp…

Linux课堂随笔---第四天

用户账户简介 在Linux系统中有三大类用户&#xff0c;分别是root用户&#xff0c;系统用户和普通用户。 在Linux系统中&#xff0c;root用户UID为0&#xff0c;root用户的权限是最高的&#xff0c;普通用户无法执行的操作&#xff0c;root用户都能完成。所以也被称为超级用户。…

初级开发人员的缺点_作为一名初级开发人员,我如何努力克服自己的挣扎

初级开发人员的缺点by Syeda Aimen Batool通过Syeda Aimen Batool 作为一名初级开发人员&#xff0c;我如何努力克服自己的挣扎 (How I’m working to overcome my struggles as a junior developer) I believe the other name for coding is the “struggle”. And if you ar…

lintcode-136-分割回文串

136-分割回文串 给定一个字符串s&#xff0c;将s分割成一些子串&#xff0c;使每个子串都是回文串。 返回s所有可能的回文串分割方案。 样例 给出 s "aab"&#xff0c;返回 [ ["aa", "b"], ["a", "a", "b"] ] 标…

微信小程序把繁琐的判断用Js简单的解决

场景&#xff1a; 订单列表&#xff0c;有很多种订单状态&#xff0c;根据不同的订单状态要显示不同的css。 适用场景&#xff1a;需要根据数组下标判断不同的显示。 示例代码&#xff1a; this.data.order [{"_type":"1","custName":"…

数论(Lucas定理) HDOJ 4349 Xiao Ming's Hope

题目传送门 题意&#xff1a;求C (n,0),C (n,1),C (n,2)...C (n,n)中奇数的个数 分析&#xff1a;Lucas 定理&#xff1a;A、B是非负整数&#xff0c;p是质数。AB写成p进制&#xff1a;Aa[n]a[n-1]...a[0]&#xff0c;Bb[n]b[n-1]...b[0]。则组合数C(A,B)与C(a[n],b[n])*C(a[n-…

docker容器虚拟化技术_Docker,虚拟机和容器的全面介绍

docker容器虚拟化技术by shota jolbordi通过Shota Jolbordi Docker has been a buzzword for tech people for the last several years, and the more times goes by, the more often you hear about it. We’re seeing it more in job requirements, and more companies are …

IOS中的响应者链

响应者链就是当子视图不响应,父视图有响应事件,父视图响应 #import "RootViewController.h" #import "ResponderView.h" interface RootViewController ()endimplementation RootViewController- (void)viewDidLoad {[super viewDidLoad];// Do any additi…

MySQL闪退问题的解决

刚刚学习了数据库&#xff0c;并且安装了MySQL&#xff0c;正当高兴之余&#xff0c;发现我的MySQL出现了闪退的显现。上网搜了好久的解决方案。最后解决了这个问题&#xff0c;也舒心了。 问题从这里开始&#xff1a; 接着我打开MySQL&#xff0c;寻思能不能用&#xff0c;结果…

HTML封装AJAX请求,在请求里面写登录的逻辑 ajax 网络请求 post

调用方法&#xff1a; 先引用config.js&#xff0c;然后调用封装网络请求。 里面三个参数 1.url&#xff0c; 2.请求需要提交的数据, 3.请求类型 // 获取二维码、背景图片接口 getScheduleInfo() {var url /v1/basketball/getQRCode.do;var params {phone: 13977284414}co…

oye pandora_我尝试了Pandora出色的功能优先级排序方法。 这是我学到的。

oye pandoraby Josh Temple通过乔什坦普尔 我尝试了Pandora出色的功能优先级排序方法。 这是我学到的。 (I tried Pandora’s brilliant method for feature prioritization. Here’s what I learned.) 潘多拉(Pandora)的方法和3美元的便签纸如何使利益相关者的管理变得轻而易…

2016-2017-2软件工程课程总结

2016-2017-2软件工程课程总结 本学期的软件工程课程终于在大家的共同努力下圆满落幕了&#xff0c;我们的暑假也正式开启&#xff0c;终于有时间写写这门课的总结了。 在2016年下半学期末的时候课程组就决定使用邹欣老师的书《构建之法》&#xff0c;由课程组长王瑞老师带领入构…

asp.net mvc jqgrid 同一个页面查询不同的表,jqgrid显示不同表的表头和数据并且分页...

基于我上一篇文章<a href"http://www.cnblogs.com/alasai/p/4765756.html">asp.net mvc excel导入</a>中不同的部门上传不同的excel文件类型&#xff0c;当在同一个页面查询时怎么办呢。 解决方案&#xff1a;根据传过来的表名和时间参数一次性把数据全部…

降维后的高维特征的参数_高维超参数调整简介

降维后的高维特征的参数by Thalles Silva由Thalles Silva 高维超参数调整简介 (An introduction to high-dimensional hyper-parameter tuning) 优化ML模型的最佳做法 (Best practices for optimizing ML models) If you ever struggled with tuning Machine Learning (ML) mo…

细细品味大数据--初识hadoop

初识hadoop 前言 之前在学校的时候一直就想学习大数据方面的技术&#xff0c;包括hadoop和机器学习啊什么的&#xff0c;但是归根结底就是因为自己太懒了&#xff0c;导致没有坚持多长时间&#xff0c;加上一直为offer做准备&#xff0c;所以当时重心放在C上面了&#xff08;虽…

js中Array数组中的常用方法汇总

Array的push与unshift方法性能比较分析从原理就可以知道&#xff0c;unshift的效率是较低的。原因是&#xff0c;它每添加一个元素&#xff0c;都要把现有元素往下移一个位置。unshift比push要慢差不多100倍&#xff01;Array有一个叫做reverse的方法&#xff0c;能够把一个数组…

vue写一个通用的toast弹窗 toast 弹窗 提示

效果图 代码 <!DOCTYPE html> <html lang"en"><head><title>弹窗</title><meta charset"UTF-8"><meta name"viewport" content"widthdevice-width, initial-scale1.0, user-scalableno, minimum-s…

我对Node.js Core的首次贡献中学到了什么

by Yael Hermon通过Yael Hermon 我对Node.js Core的首次贡献中学到了什么 (What I Learned from My First Contribution To Node.js Core) A couple of weeks ago my very first PR for Node.js core was merged! A few days later, I decided to tweet about it and share ho…

SHA204A加密芯片配置

1、参考配置文章&#xff1a;http://blog.csdn.net/a5882230/article/details/522148452、可以选slot configuration 1作为密钥区&#xff0c;该区的配置应为&#xff1a;0x81 81&#xff0c;对应的data 0的数据就密钥数据。3、slot configuration的配置有7个参数&#xff0c;其…

[剑指offer] 二叉搜索树的后序遍历序列

二叉搜索树的后序遍历序列 P157 题目&#xff1a;输入一个数组&#xff0c;判断这个数组是不是一个二叉搜索树的后序遍历的结果。 solution&#xff1a;我们知道后序遍历序列的最后一个item是根节点&#xff0c;如果确实是二叉搜索树的后序遍历结果&#xff0c;那么在[0,N-2]中…

HbuilderX中的git的使用 git HbuilderXgit HbuilderX 使用git

【前戏】&#xff1a;得在HubilderX中找到 "工具"->"插件安装" -> "Git插件" 。 【提交代码】&#xff1a;&#xff08;1&#xff09;选中该项目的文件&#xff0c;右键&#xff0c;Git提交 &#xff08;2&#xff09;填写提交信息、查看…

Swift与Objective-C:与恐龙有关的趋势

by Colin Smith通过科林史密斯 Swift与Objective-C&#xff1a;与恐龙有关的趋势 (Swift vs. Objective-C: The trending up-and-comer vs. the dinosaur) Swift的简短历史 (A short history of Swift) I remember how pivotal it was when Swift was introduced at Apple’s …

我的JavaScript学习笔记

1. 那些老旧的实例可能会在 <script> 标签中使用 type"text/javascript"。现在已经不必这样做了。JavaScript 是所有现代浏览器以及 HTML5 中的默认脚本语言。 2. <head> 或 <body> 中的 JavaScript 您可以在 HTML 文档中放入不限数量的脚本。 …

获取枚举值上的Description特性说明

/// <summary> /// 获取枚举值上的Description特性说明 /// </summary> /// <typeparam name"T">枚举类型</typeparam> /// <param name"obj">枚举值</param> /// <returns></returns> public static str…