Vue进阶（二十）：请求方式详解

文章目录

一、resource请求
二、axios 请求
三、axios 请求（原型方式）
四、fetch请求
- 4.1 get 方式
- 4.2 POST方式
- 4.3 在vue中的应用
- - 4.3.1 组件中发送请求
  - 4.3.2 表单通过 fetch 发送 ajax 请求
  - 4.3.3 通过 vuex 请求数据
五、拓展阅读

一、resource请求

npm install vue-resource --save
import VueResource from 'vue-resource'
Vue.use(VueResource)
this.$http.get("")

二、axios 请求

npm install axios --save
axios.defaults.baseURL = "根地址"
//vue页面引入import axios from 'axios'
axios.get(请求的地址)

三、axios 请求（原型方式）

cnpm install axios --save
Vue.prototype.http = axios //配置Vue原型
this.http.get("")

四、fetch请求

fetch是es6新一代XMLHttpRequest的请求方式。无需安装其他库。可以在浏览器中直接提供其提供的api轻松与后台进行数据交互。

基本用法：

fetch（url，{parmas}）.then(res=>return res.json()  //返回promise对象).then(data=>{return data     //返回真正数据}).catch(err=>{throw new Error(err)})

4.1 get 方式

<script type="text/javascript">window.onload=function(){var url="http://www.baidu.com"  //填写自己的域名地址var btn=document.getElementById("btn");var data={verified:1, warningLevel:0,sessionID:"3ecf8905a98cb752b127302bf08f08e5"}btn.onclick=function(){fetch(url+"/stats/getUserList?sessionID=3ecf8905a98cb752b127302bf08f08e5&verified=1&warningLevel=0").then(res=>     {return res.json();     //返回promise对象}).then(data=>{console.log("返回值：",data)}).catch(err=>{console.log(err)})}

4.2 POST方式

btn.onclick=function(){             fetch(url+"/stats/getUserList",{method:"POST",headers:{'Content-Type': 'application/x-www-form-urlencoded'},body:Qs.stringify(data)}).then(res=>{console.log(res)return res.json();}).then(data=>{console.log("返回值：",data)}).catch(err=>{console.log(err)})
}

注意：

fetch返回的是promise对象。所以fetch().then()第一个then里返回的并不是真正的数据。而是一个promise，所以我们需要通过链式操作第二个then()来获取真正的数据。
fetch发送参数是通过body字段来实现的。body是fetch第二个参数的必选参数之一。params的参数如下

method(String): HTTP请求方法，默认为GET;

body(String): HTTP的请求参数;

headers(Object): HTTP的请求头，默认为{};

credentials(String): 默认为omit,忽略的意思，也就是不带cookie;还有两个参数，same-origin，意思就是同源请求带cookie；include,表示无论跨域还是同源请求都会带cookie。

body带的参数是一个序列化以后的字符串。类似 name="coc"&age=30.所以这里我们通过qs库进行序列化。注意通过cdn引入qs后qs函数应该是Qs,Qs.stringify(data)。

4.3 在vue中的应用

fetch支持在vue中使用。这样通过ajax请求就无需通过安装axios依赖库来实现。

具体使用：

4.3.1 组件中发送请求

<div style="margin-top:20px"><button @click="getLevelData" >获取用户信息</button>
</div>export default{name:"users",data(){return{arr:[]}},methods:{getLevelData(){async function getInfo(){return  await fetch(api+"/stats/getUserList",{method:"post",headers:{'Content-Type':"application/x-www-form-urlencoded"},body:qs.stringify(data)}).then(res=>res.json())}getInfo().then(res=>{this.arr=res.data.data}).catch(err=>{console.log("get--error:",err)})}}

4.3.2 表单通过 fetch 发送 ajax 请求

<p>手机号：<input type="text" v-model="mobile"></p>
<p>密码:<input type="password" v-model="password"></p>
<input type="button" value="登录" @click="go"><script>export default {name:"Login2",data(){return{mobile:"",password:"",}},methods:{go(){var data={mobile:this.mobile,password:this.password}getLevelData(){async function getInfo(){return await fetch(api+"/stats/getUserList",{method:"post",headers:{'Content-Type':"application/x-www-form-urlencoded"},body:qs.stringify(data)}).then(res=>res.json())}getInfo().then(res=>{this.arr=res.data.data}).catch(err=>{console.log("get--error:",err)})}}}}    </script>

注意⚠️：如果是提交表单元素，那么一定要添加headers参数，而且content-Type的值必须是application/x-www-form-urlencoded。

heders:{'Content-Type':"application/x-www-form-urlencoded"
},

4.3.3 通过 vuex 请求数据

 export default {name:"Login2",data(){return{mobile:"",password:"",val:""}},methods:{go(){var data={mobile:this.mobile,password:this.password}this.$store.dispatch("login",data).then(res=>{this.arr=res.data.data}).catch(err=>{console.log("登录；err",err)})}}}

store.js 中对应的action:

login({commit},payload){return new Promise((resolve,reject)=>{fetch("/account/login",payload).then(res=>{resolve(res)}).catch(err=>{console.log("登录--err:",err)reject(err)})}) },

通过vuex实现请求，fetch发送请求可以不用带method，body和headers等参数。

五、拓展阅读

《Vue进阶（幺捌伍）：应用 qs 插件实现参数格式化》

Vue进阶（二十）：请求方式详解相关推荐

C++语法学习笔记二十九：详解decltype含义，decltype主要用途
实例代码 // 详解decltype含义,decltype主要用途#include <iostream> #include <functional> #include < ...
系统学习NLP（二十四）--详解Transformer （Attention Is All You Need）
转自:https://zhuanlan.zhihu.com/p/48508221 推荐:http://jalammar.github.io/illustrated-transformer/ 前言注意 ...
android 请求方式有哪些,Android中的几种网络请求方式详解
Android应用经常会和服务器端交互,这就需要手机客户端发送网络请求,下面整理四种常用网络请求方式. java.net包中的HttpURLConnection类 Get方式: // Get方式请求 ...
c++ post请求_前端工程师进阶：网络请求方法详解，GET和POST的区别
1 前言最近看了一些同学的面经,发现无论什么技术岗位,还是会问到 get 和 post 的区别,而搜索出来的答案并不能让我们装得一手好逼,那就让我们从 HTTP 报文的角度来撸一波,从而搞明白他们的 ...
二十六万字详解bat文件
批处理文件,在DOS和Windows(任意)系统中,.bat文件是可执行文件,由一系列命令构成,其中可以包含对其他程序的调用.这个文件的每一行都是一条DOS命令(大部分时候就好像我们在DOS提示符下执 ...
get，post请求方式详解
本文转自:http://blog.csdn.net/findsafety/article/details/47129021 前几天工作中,所有表单我都采用post方法,头儿说那样不好,大型网站上一般都 ...
C语言基础篇（二十五）详解C语言第一大功臣：函数
文章目录 C语言为什么有函数? 函数书写的一般原则函数是动词,变量是名词函数的实质是:数据处理器函数的基本使用函数原型和作用编译器的工作流程 C语言为什么有函数? 1.整个程序分成多个文件, ...
（十二）命令模式详解（故事版）- 转
作者:zuoxiaolong8810(左潇龙),转载请注明出处. 背景:小左是魔都某公司技术部的一名屌丝程序猿,每天的工作就是维护一个20世纪的古董级项目,由于公司不大,所以公司很多制度不太完善,导致 ...
（二十二）访问者模式详解（伪动态双分派） - 转
作者:zuoxiaolong8810(左潇龙),转载请注明出处. 本次LZ和各位分享一下访问者模式,从场景.设计初衷以及实现方面来说,访问者模式算是LZ即将写到的24种设计模式当中,最复杂也是最难理解 ...

Vue进阶（二十）：请求方式详解

文章目录

一、resource请求

二、axios 请求

三、axios 请求（原型方式）

四、fetch请求

4.1 get 方式

4.2 POST方式

4.3 在vue中的应用

4.3.1 组件中发送请求

4.3.2 表单通过 fetch 发送 ajax 请求

4.3.3 通过 vuex 请求数据

五、拓展阅读

Vue进阶（二十）：请求方式详解相关推荐

最新文章

热门文章

Vue进阶（二十）： 请求方式详解

文章目录

一、resource请求

二、axios 请求

三、axios 请求（原型方式）

四、fetch请求

4.1 get 方式

4.2 POST方式

4.3 在vue中的应用

4.3.1 组件中发送请求

4.3.2 表单通过 fetch 发送 ajax 请求

4.3.3 通过 vuex 请求数据

五、拓展阅读

Vue进阶（二十）： 请求方式详解相关推荐

最新文章

热门文章

Vue进阶（二十）：请求方式详解

Vue进阶（二十）：请求方式详解相关推荐