为什么axios请求的端口是vue默认的端口_Vue学习笔记（二）

一. 数据请求

1. fetch

why

• XMLHttpRequest 是一个设计粗糙的 API，配置和调用方式非常混乱，
• 而且基于事件的异步模型写起来不友好。
• 兼容性不好

polyfill

//https://github.com/camsong/fetch-ie8


    //get
        fetch("**").then(res=>res.json()).then(res=>{
    console.log(res)})
        fetch("**").then(res=>res.text()).then(res=>{
    console.log(res)})
    //post
        fetch("**",{
    
              method:'post',
              headers: {
    
                        "Content-Type": "application/x-www-form-urlencoded"
                       },
              body: "name=kerwin&age=100"
        }).then(res=>res.json()).then(res=>{
    console.log(res)});
        fetch("/users",{
    
            
              method:'post',
              // credentials: 'include',
              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'})

2.axios

   axios.get("") 
   axios.post("") 
   axios.put("")
   axios.delete("")
​
   axios({
    
    url:"",
    headers:{
    
      'X-Client-Info': '{"a":"3000","ch":"1002","v":"1.0.0","e":"1"}',
      'X-Host': 'mall.cfg.common-banner'
    }
   }).then(res=>{
    
    console.log(res.data);
   })
​
   返回的数据会被包装
​
    {
    
      *:*
      data:真实后端数据
    }

二. 组件

1. 虚拟dom与diff算法 key的作用