vue -- 网络应用 -- axios

axios 网络请求库

• axios必须先导入后使用
• 使用get或post方法即可发送对应的请求
• then方法中的回调函数会在请求成功或失败时触发
• 通过回调函数的形参可以获取相应内容，或错误信息

image.png

image.png

axios中文文档：起步 | Axios 中文文档 | Axios 中文网 (axios-http.cn)

axios+vue

• axios回调函数中的this已经改变,无法访问到data中的数据

• 把this保存起来.回调函数值中直接使用保存的this即可

  
  
  image.png

        
        
{{ joke }}
    
    
    

实例 - 天气查询

回车查询

• 按下回车(v-on .enter)
• 查询数据(axios 接口 v-model)

• 渲染数据(v-for 数组 that)

  
  
  image.png

    
    
    
    


    

        

            
天气查询
            

                
            
        
        

            
            
            
            
        
        

            

                
{{ item.type }}
                

                    {{ item.low }}
                    ~
                    {{ item.high }}
                
                
{{ item.date }}
            
        
    
    
    

这里出现过一个bug,就是在输入框中输入城市名字后,并没有反应
经过排查,发现没有写v-model绑定数据
原先在输入框后面有个button,点击即可查询天气
但是目前还不太会写 留个坑