码迷,mamicode.com
首页 > 移动开发 > 详细

vue基础4——fetch&axios

时间:2020-07-10 13:27:38      阅读:64      评论:0      收藏:0      [点我收藏+]

标签:后端   ica   test   size   状态   默认   div   json格式   cat   

1. fetch

why:
XMLHttpRequest 是一个设计粗糙的 API,配置和调用方式非常混乱,
而且基于事件的异步模型写起来不友好。
兼容性不好
get
 
//fetch get
fetch("json/test.json?name=kerwin&age=100").then(res=>{
// console.log(res.json())
//拿到的是 状态码
// return a.text() // 文本格式
  return res.json() //json格式
}).then(res=>{
   console.log(res.data.films)
   this.datalist = res.data.films
}).catch(err=>{
     console.log(err)
})

 

post-1  

form 编码 ,name=kerwin&age=100
fetch("json/test.json",{
       method:"post",
       headers:{
                "Content‐Type": "application/x‐www‐form‐urlencoded"
        },
        body:"name=kerwin&age=100" //请求体
  }).then(res=>res.json()).then(res=>{
                        console.log(res)
  })

post-2  

json 编码 ,"{name:‘kerwin‘,age:100}"
fetch("json/test.json",{
           method:"post",
           headers:{
           "Content-Type":"application/json"
         },
          body:JSON.stringify({
              name:"kerwin",
              age:100
         }) //请求体
}).then(res=>res.json()).then(res=>{
       console.log(res)
}) 
注意:
Fetch 请求默认是不带 cookie 的,需要设置 fetch(url, {credentials:‘include‘})
fetch("**",{
    credentials:"include",
    method:‘post‘,
    headers: {
    "Content‐Type": "application/x‐www‐form‐urlencoded"
    },
body: "name=kerwin&age=100",

}).then(res=>res.json()).then(res=>{console.log(res)});

 

2. axios

https://github.com/axios/axios

axios.get("json/test.json?name=kerwin&age=100").then(res=>{
       // res.data 才是真正的后端数据
      console.log(res.data.data.films)
      this.datalist=  res.data.data.films
})

  

post -1- x-www-form-urlencode
axios.post("json/test.json","name=kerwin&age=100").then(res=>{
    console.log(res.data)
})

  

post -2- application/json
axios.post("json/test.json",{
    name:"kerwin",
    age:100
}).then(res=>{
console.log(res.data)
})

 

 

 

 

 

 

vue基础4——fetch&axios

标签:后端   ica   test   size   状态   默认   div   json格式   cat   

原文地址:https://www.cnblogs.com/wuziqiang/p/13278533.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!