vue---进行post和get请求
参考文档:
https://www.jb51.net/article/125717.htm
使用axios
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
基本使用方法:
get请求:
// Make a request for a user with a given ID axios.get('/user?ID=12345').then(function (response) {console.log(response);}).catch(function (error) {console.log(error);});// Optionally the request above could also be done as axios.get('/user', {params: {ID: 12345}}).then(function (response) {console.log(response);}).catch(function (error) {console.log(error);});
Post请求:
axios.post('/user', {firstName: 'Fred',lastName: 'Flintstone' }) .then(function (response) {console.log(response); }) .catch(function (error) {console.log(error); });
简单示例:
// 在进行 post 和 get 请求的时候,使用 axios 进行访问 // 进行 get 请求 axios.get(url).then(function (response){console.log(response); }).catch(function(error){console.log(error); }); // 进行post 请求 axios.post(url,{firstName:'Fred',lastName:'Flintstone'}).then(function (response) {console.log(response); }).catch(function (error) {console.log(error); });
这样发送请求,虽然是可以发送,但是携带的参数,是一个json字符串,会出现问题。所以我们在用post发送请求的时候,需要这样:
axios({ method:'post', url:url, data:{title:this.title,content:this.content}, headers:{'Content-Type': 'application/x-www-form-urlencoded'}, transformRequest: function(obj) { var str = []; for(var p in obj){ str.push(encodeURIComponent(p) + "=" + encodeURIComponent(obj[p])); } return str.join("&"); } }).then((res)=>{console.log(res.data); });
上面这种只能提交一些简单的数据,对于复杂的数据,可以考虑使用 QS 对数据进行处理。
使用方法,如果找不到QS文件,可以只用 npm 安装:
npm install qs
下载这个文件之后,使用 script 标签正常引入即可。
使用方法:
var formData = Qs.stringify({imgIds: [48,49],});
axios.post(url,Qs.stringify(this.formData)).then(function (response) {console.log(response); }).catch(function (error) {console.log(error); });
或者是:
axios({method: 'post',url:url,data:Qs.stringify(this.formData), }).then((res)=>{console.log(res); });
转载于:https://www.cnblogs.com/e0yu/p/9949857.html
vue---进行post和get请求相关推荐
- axios队列 vue_(十三 )Vue 封装axios(四种请求)及相关介绍
Vue 封装axios(四种请求)及相关介绍 首先axios是基于promise的http库 promise是什么? 1.主要用于异步计算 2.可以将异步操作队列化,按照期望的顺序执行,返回符合预期的 ...
- Axios的Vue插件(添加全局请求/响应拦截器)
/** * @file Axios的Vue插件(添加全局请求/响应拦截器) */ // https://github.com/mzabriskie/axios import axios from ...
- [vue] 如果将axios异步请求同步化处理?
[vue] 如果将axios异步请求同步化处理? // 统一处理axios请求async getHistoryData (data) {try {let res = await axios.get(' ...
- Vue如何mock数据模拟Ajax请求
我们在做一个项目时前期可能没有后端提供接口模拟数据,那么作为前端就需要自己写json文件模拟数据加载.网上往往参考的都是不全面的,比如get请求没问题但是post请求就报错了.在Vue中只需要vue- ...
- vue-cli快速构建vue项目和本地模拟请求数据
Vue-cli快速构建 Vue 项目和本地模拟请求数据 1 前提: 安装了 node.js 首先: 全局安装 vue-cli npm intsall vue-cli -g (-g代表全局安装) 2 使 ...
- Vue打包部署IIS无法请求
ARRv3_0 下载安装URl重写URL Rewrite 第一步安装,IIS配置,打开 第二步,点击 Server Proxy Settings 第三步,选中 应用 Vue打包部署 配置URL重写规则 ...
- Vue之axios发送Ajax请求
2.10 axios发送ajax请求 axios github 2.10.1 准备工程 创建一个django工程,例如 login.创建完成之后,再创建一个子应用,例如users.最后再设置一下模板文 ...
- vue + axios---封装一个http请求
在使用vue开发时,官方推荐使用axios来请求接口 // axios官方地址 https://github.com/axios/axios 但是axios并不像 vue-resource 一样拥有i ...
- VUE.JS 使用axios数据请求时数据绑定时 报错 TypeError: Cannot set property 'xxxx' of undefined 的解决办法...
data里面做了定义 在方法里面进行赋值 用 this.info = repos.data 数据可以请求到,但是会报错 TypeError: Cannot set property 'listgrou ...
- 前段框架——Vue的get和post请求数据
vue的get请求和post请求其实很简单 1.首先我们要在编译软件的终端下输入指令: npm install --save axios vue-axios 来下载两个文件. 2.其次,我们要在使用g ...
最新文章
- hust1350Trie【字典树+dfs || 字典树 + LCA】
- 【设计模式1】宏观总结
- SOA流程项目到底是业务流还是工作流
- 【经验分享】非科班出身怎么转行计算机?
- 【数据结构总结】第七章 查找
- C#刷剑指Offer | 在O(1)时间删除链表节点
- Linux中对进程的管理
- Laravel核心解读--观察者模式
- amazon中文文档
- python概念-各类绑定的概念和property的变态一面
- ThinkPad T400 笔记本详细拆机过程 清理风扇(图文教程)
- vite:15个插件推荐
- 四性检测功能在档案系统中的实现
- 计算机网络中的ping什么意思,PING命令是什么?PING使用方法和参数详解
- 树莓派——4G网卡华为ME909s-821 4G上网及开机自启动(1)
- 白天黑夜模式切换引起的activity销毁重启
- C#工控上位机实例_南京物流仓库【仓库物流】_智能云仓储库存wms管理分配货_电子标签价签拣货系统_工控erp上位机软件开发设计...
- VideoSolo Blu ray Player for Mac(mac蓝光播放器)
- Java中synchronization和Lock对比
- B站这场跨年晚会价值60亿,凭啥?
热门文章
- OpenCV代码提取:transpose函数的实现
- Windows7上配置Python Protobuf 操作步骤
- CV_IMAGE_ELEM参数赋值时注意的问题
- 电脑计算机科学型,电脑里附带的计算器有标准型和科学型二种,它 – 手机爱问...
- 服务器无线网卡驱动程序,在Ubuntu里使用Windows的无线网卡驱动程序的方法教程...
- webgl 游戏_30个令人惊叹的WebGL示例和演示
- 【jdbc】兴唐第三十一节课之修改数据和查询数据(使用自己写的DBUtil)
- plc和pc串口通讯接线_让你搞懂PLC串口通讯和通讯接口,这东西估计没几个能说清楚~...
- Quartz 2D基本图形的绘制
- 1小时学会:最简单的iOS直播推流(十一)spspps和AudioSpecificConfig介绍(完结)