Vue2学习笔记之请求数据交互vue-resource
基本语法
必须引入一个库:vue-resource github地址
// 基于全局Vue对象使用http Vue.http.get('/someUrl', [options]).then(successCallback, errorCallback); Vue.http.post('/someUrl', [body], [options]).then(successCallback, errorCallback); // 在一个Vue实例内使用$http this.$http.get('/someUrl', [options]).then(successCallback, errorCallback); this.$http.post('/someUrl', [body], [options]).then(successCallback, errorCallback);
vue-resource的请求API是按照REST风格设计的,它提供了7种请求API:
get(url, [options])
head(url, [options])
delete(url, [options])
jsonp(url, [options])
post(url, [body], [options])
put(url, [body], [options])
patch(url, [body], [options])
Options
Parameter
Type
Description
url
string
请求的UR
body
Object, FormData, string
request body
headers
Object
request header
params
Object
请求的URL参数对象
method
string
请求的HTTP方法,例如:'GET', 'POST'或其他HTTP方法
timeout
number
单位为毫秒的请求超时时间 (0 表示无超时时间)
before
function(request)
请求发送前的处理函数,类似于jQuery的beforeSend函数
progress
function(event)
ProgressEvent回调处理函数
credentials
boolean
表示跨域请求时是否需要使用凭证
emulateHTTP
boolean
发送PUT, PATCH, DELETE请求时以HTTP POST的方式发送,并设置请求头的X-HTTP-Method-Override
emulateJSON
boolean
将request body以application/x-www-form-urlencoded content type发送
1. 向文本发出get请求
准备一个1.txt 的文本数据,时面的内容是:welcomet to vue!!!
<!DOCTYPE html> <html> <head> <title></title> <meta charset="utf-8"> <script src="/UploadFiles/2021-04-02/vue.js">上面代码实现了,点击按钮,就发送get请求,成功就会执行弹窗 welcomet to vue!!!
2. 关于向后端请求,并带参数的写法
<!DOCTYPE html> <html> <head> <title></title> <meta charset="utf-8"> <script src="/UploadFiles/2021-04-02/vue.js">以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。
下一篇:JavaScript基本类型值-Undefined、Null、Boolean