Vue进阶（二十）： Vue中的请求方式

1.resource请求

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

  

 

  
1
  
2
  
3
  
4
 

2.axios 请求

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

  

 

  
1
  
2
  
3
  
4
 

3.axios 请求

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

  

 

  
1
  
2
  
3
 

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
  
2
  
3
  
4
  
5
  
6
  
7
 

附

(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) }) }
  }
} 
  

 

  
1
  
2
  
3
  
4
  
5
  
6
  
7
  
8
  
9
  
10
  
11
  
12
  
13
  
14
  
15
  
16
  
17
  
18
  
19
  
20
  
21
  
22
  
23
 

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) }) }) },

  

 

  
1
  
2
  
3
  
4
  
5
  
6
  
7
  
8
  
9
  
10
  
11
  
12
  
13
  
14
  
15
  
16
  
17
 

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

文章来源: shq5785.blog.csdn.net，作者：No Silver Bullet，版权归原作者所有，如需转载，请联系作者。

原文链接：shq5785.blog.csdn.net/article/details/85115392