Vue进阶(二十): Vue中的请求方式
2018-12-20 11:31
639 查看
版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/sunhuaqiang1/article/details/85115392
1.resource请求
cnpm install vue-resource --save import VueResource from 'vue-resource' Vue.use(VueResource) this.$http.get("")
2.axios 请求
cnpm install axios --save axios.defaults.baseURL = "根地址" //vue页面引入import axios from 'axios' axios.get(请求的地址)
3.axios 请求
cnpm install axios --save Vue.prototype.http = axios //配置Vue原型 this.http.get("")
4.fetch(“”) // es6的请求方式
fetch是新一代XMLHttpRequest的一种替代方案。无需安装其他库。可以在浏览器中直接提供其提供的api轻松与后台进行数据交互。
基本用法:
fetch(url,{parmas}).then(res=> return res.json() //返回promise对象 ).then(data=>{ return data //返回真正数据 }).catch(err=>{ throw new Error(err) })
附
(1) get 方式:
注意:如果是提交表单元素,那么一定要添加headers参数, 而且content-Type的值必须是application/x-www-form-urlencoded
heders:{
‘Content-Type’:“application/x-www-form-urlencoded”
},
(2)通过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中axios 配置请求拦截功能 及请求方式如何封装
- vue-cli axios请求方式及跨域处理问题
- vue 的axios请求数据2种方式 很重要
- Android进阶(一)几种网络请求方式详解
- 关于vue项目中,axios请求方式,跨域请求的处理
- Android进阶(一)几种网络请求方式详解
- Android进阶(一)几种网络请求方式详解
- vue2.0 axios发送post请求,后端参数获取不到的解决方式
- 用Vue框架和后台请求的时候传递的参数的方式
- 常用vue请求交互数据方式
- vue请求方式axios和axios.get
- vue-resource 中 get / post / jsonp 三种请求方式的异同
- 基本分页、请求分页储存管理方式
- android 向服务器Get和Post请求的两种方式,android向服务器发送文件,自己组装协议和借助第三方开源
- android 联网请求的两种方式HttpURLConnection和HttpClient
- PHP发送POST请求的三种方式
- 尝试向 URI“ ”发出请求时出错。这可能是由于试图以跨域方式访问服务而又没有正确的跨域策略,或策略不适用于 SOAP 服务...。出现此错误也可能是由于使用的是 Web 服务代理中的内部类型而没有使用 InternalsVisibleToAttribute 属性。
- 写接口请求类型为get或post的时,参数定义的几种方式,如何用注解(原创)--雷锋
- Vue-Router2.X多种路由实现方式
- Webx系列之Ajax请求的四种方式