网站首页开发-4 ajax

1.使用axios处理ajax请求

axios和jquery 中ajax区别

1、传统ajax 指JS原生的XMLHttpRequest（XHR），最早出现的发送后端请求技术，核心使用XMLHttpRequest对象，多个请求之间如果有先后关系的话，就会出现回调地狱。
2、JQuery ajax 是对原生XHR的封装，除此以外还增添了对JSONP的支持。但针对的是MVC编程,不符合现在前端MVVM的浪潮。
3、axios 是一个基于Promise 用于浏览器和 nodejs 的 HTTP 客户端，本质上也是对原生XHR的封装，只不过它是Promise的实现版本，符合最新的ES规范。

fetch vue-resourse
axios 发送跨平台请求进行ajax请求
首页的五个组件都发送ajax请求-》5个请求-》会造成网络性能下降 -》发送一个
在home.vue中设置发送，得到数据后再分别传送给其他组件
把文件放到static下能被url访问到

访问json文件.png

不想数据被访问到 gitignore 添加一行static/mock 就不会被git追踪控制，也不会提交到本地仓库里
config文件夹里index.js ->proxyTable

proxyTable: {
            '/api': {
                target: 'http://localhost:8080',
                pathRewrite: {
                  一旦请求地址是以/api开头的，就把它替换到/static/mock地址下
                    '^/api': '/static/mock'
                }
            }
        },

首页父子组件数据传递

gethomeinfo中使用axios请求，因为返回的是promise对象，在得到请求后调用gethomesucc函数。
那gethomeinfo这个函数在哪调用呢？这里使用生命周期函数里的mounted函数，在el挂载后自动调用mounted函数。

 methods:{
        getHomeInfo (){
            axios.get('/api/index.json')
            .then(this.getHomeInfoSucc)
        },
        getHomeInfoSucc (res){
            res=res.data
            // 如果正确返回结果 && 有内容
            if(res.ret && res.data){
                const data=res.data
                this.city = data.city
                this.swiperList=data.swiperList
                this.iconList=data.iconList
                this.recommendList=data.recommendList
                this.weekendList=data.weekendList
            }
        }
    },

在data里定义

 data() {
        return {
            city:'',
            swiperList:[],
            iconList:[],
            recommendList:[],
            weekendList:[]
        }
    }

父子组件传值
在组件里使用bind绑定，在子组件里通过props接收。

父组件传递
<home-header :city="city"></home-header>
子组件引用 & 校验参数必须为Array形式
props:{
        list:Array
    },

最后编辑于：2020.10.21 21:55:32