参考文档:

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请求相关推荐

  1. axios队列 vue_(十三 )Vue 封装axios(四种请求)及相关介绍

    Vue 封装axios(四种请求)及相关介绍 首先axios是基于promise的http库 promise是什么? 1.主要用于异步计算 2.可以将异步操作队列化,按照期望的顺序执行,返回符合预期的 ...

  2. Axios的Vue插件(添加全局请求/响应拦截器)

    /**  * @file Axios的Vue插件(添加全局请求/响应拦截器)  */ // https://github.com/mzabriskie/axios import axios from ...

  3. [vue] 如果将axios异步请求同步化处理?

    [vue] 如果将axios异步请求同步化处理? // 统一处理axios请求async getHistoryData (data) {try {let res = await axios.get(' ...

  4. Vue如何mock数据模拟Ajax请求

    我们在做一个项目时前期可能没有后端提供接口模拟数据,那么作为前端就需要自己写json文件模拟数据加载.网上往往参考的都是不全面的,比如get请求没问题但是post请求就报错了.在Vue中只需要vue- ...

  5. vue-cli快速构建vue项目和本地模拟请求数据

    Vue-cli快速构建 Vue 项目和本地模拟请求数据 1 前提: 安装了 node.js 首先: 全局安装 vue-cli npm intsall vue-cli -g (-g代表全局安装) 2 使 ...

  6. Vue打包部署IIS无法请求

    ARRv3_0 下载安装URl重写URL Rewrite 第一步安装,IIS配置,打开 第二步,点击 Server Proxy Settings 第三步,选中 应用 Vue打包部署 配置URL重写规则 ...

  7. Vue之axios发送Ajax请求

    2.10 axios发送ajax请求 axios github 2.10.1 准备工程 创建一个django工程,例如 login.创建完成之后,再创建一个子应用,例如users.最后再设置一下模板文 ...

  8. vue + axios---封装一个http请求

    在使用vue开发时,官方推荐使用axios来请求接口 // axios官方地址 https://github.com/axios/axios 但是axios并不像 vue-resource 一样拥有i ...

  9. VUE.JS 使用axios数据请求时数据绑定时 报错 TypeError: Cannot set property 'xxxx' of undefined 的解决办法...

    data里面做了定义 在方法里面进行赋值 用 this.info = repos.data 数据可以请求到,但是会报错 TypeError: Cannot set property 'listgrou ...

  10. 前段框架——Vue的get和post请求数据

    vue的get请求和post请求其实很简单 1.首先我们要在编译软件的终端下输入指令: npm install --save axios vue-axios 来下载两个文件. 2.其次,我们要在使用g ...

最新文章

  1. hust1350Trie【字典树+dfs || 字典树 + LCA】
  2. 【设计模式1】宏观总结
  3. SOA流程项目到底是业务流还是工作流
  4. 【经验分享】非科班出身怎么转行计算机?
  5. 【数据结构总结】第七章 查找
  6. C#刷剑指Offer | 在O(1)时间删除链表节点
  7. Linux中对进程的管理
  8. Laravel核心解读--观察者模式
  9. amazon中文文档
  10. python概念-各类绑定的概念和property的变态一面
  11. ThinkPad T400 笔记本详细拆机过程 清理风扇(图文教程)
  12. vite:15个插件推荐
  13. 四性检测功能在档案系统中的实现
  14. 计算机网络中的ping什么意思,PING命令是什么?PING使用方法和参数详解
  15. 树莓派——4G网卡华为ME909s-821 4G上网及开机自启动(1)
  16. 白天黑夜模式切换引起的activity销毁重启
  17. C#工控上位机实例_南京物流仓库【仓库物流】_智能云仓储库存wms管理分配货_电子标签价签拣货系统_工控erp上位机软件开发设计...
  18. VideoSolo Blu ray Player for Mac(mac蓝光播放器)
  19. Java中synchronization和Lock对比
  20. B站这场跨年晚会价值60亿,凭啥?

热门文章

  1. OpenCV代码提取:transpose函数的实现
  2. Windows7上配置Python Protobuf 操作步骤
  3. CV_IMAGE_ELEM参数赋值时注意的问题
  4. 电脑计算机科学型,电脑里附带的计算器有标准型和科学型二种,它 – 手机爱问...
  5. 服务器无线网卡驱动程序,在Ubuntu里使用Windows的无线网卡驱动程序的方法教程...
  6. webgl 游戏_30个令人惊叹的WebGL示例和演示
  7. 【jdbc】兴唐第三十一节课之修改数据和查询数据(使用自己写的DBUtil)
  8. plc和pc串口通讯接线_让你搞懂PLC串口通讯和通讯接口,这东西估计没几个能说清楚~...
  9. Quartz 2D基本图形的绘制
  10. 1小时学会:最简单的iOS直播推流(十一)spspps和AudioSpecificConfig介绍(完结)