vue中发送ajax请求使用第三发工具vue-resource
2020-08-01 13:51
211 查看
vue-resource安装引入
方式一:终端安装
安装:
npm i -D vue-resource
导入:
import VueResource from 'vue-resource'
注册:
Vue.(VueResource)
注:导入vue-resource时需要写在导入Vue的后面
方式二:标签引入
<script src="https://cdn.staticfile.org/vue-resource/1.5.1/vue-resource.min.js"></script>
发送get请求
getInfo() { //发起get请求 // 第二步送请求,https://cn.vuejs.org/为请求地址,.then表示拿取数据里面可以写两个回调函数,第一个表示成功,第二个表示失败 this.$http.get("https://cn.vuejs.org/").then(function(result) { console.log(result) }) },
发送post请求
postInfo() { //发起post请求 // post请求需要表单模式,需要在第三个{}内用emulateJSON: true配置,手动发起的post没有表单模式,很多服务器无法处理 this.$http.post("https://jsonplaceholder.typicode.com/posts/", {}, { emulateJSON: true }).then(result => { console.log(result.body) }) }
发送jsonp请求
jsonpInfo() { //发起jsonp请求 this.$http.jsonp("http://jsonplaceholder.typicode.com/posts").then(function(result) { console.log(result) }) }
说明
1、使用then方法来处理响应结果,then方法有两个参数,第一个参数是响应成功时的回调函数,第二个参数是响应失败时的回调函数。
2、如果使用便签引入的vue-resource,需要写在引入的vue文件下面
相关文章推荐
- Vue中发送ajax请求——axios使用详解
- vuejs中vue-resource或使用axios发送请求及解决跨域问题
- vue项目使用axios发送请求让ajax请求头部携带cookie
- vue项目使用axios发送请求让ajax请求头部携带cookie的方法
- Vue--axios:vue中的ajax异步请求(发送和请求数据)、vue-resource异步请求和跨域...
- 使用vue-resource发送post、get请求传参后台接收不到
- Vue项目首页_使用axios发送ajax请求
- Vue--axios:vue中的ajax异步请求(发送和请求数据)、vue-resource异步请求和跨域
- vue-resource得到表格当前行的数据并向后台发送ajax请求(小白整理~)
- vue中使用axios发送ajax请求
- 使用Java原生API编写发送HTTP_POST请求的工具类
- Spring MVC 中使用ajax发送POST请求时的参数问题
- php服务端 如何接受前端使用ajax发送get请求而传递过来的汉字
- Vue 爬坑之路(六)—— 使用 Vuex + axios 发送请求
- 使用原生JS发送ajax异步请求
- 使用XMLHttpRequest发送Ajax请求
- ajax向服务端发送请求的简单使用
- 使用vue时,发送请求不带cookie
- 浅谈使用Fiddler工具发送post请求(带有json数据)以及get请求(Header方式传参)
- (二)vue开发 - 使用vue-resource实现网络请求