关于自己在项目中对axios的使用

参考：axios在vue-cli项目中的封装使用
 Axios中文说明

1、首页实现思路

2、为什么要在vue-cli中使用axios？

因为它可以实现：

从浏览器中创建 XMLHttpRequests
从 node.js 创建 http 请求
拦截请求和响应
转换请求数据和响应数据
支持 Promise API
客户端支持防止CSRF
提供了一些并发请求的接口
轻量，体积小

2、我如何使用的？

（1）封装、配置axios

在src下新建一个文件夹network专门用来存放接口相关的文件和配置
在request.js中
- import axios
- 设置 post put 请求默认的Content-type
- 添加请求拦截器
- 添加响应拦截器
- 封装常用的请求方法
- export 封装过的axios实例。return一个promise。axios(config)，即向实例传递相关配置来创建请求。

（2）将其挂载到vue的prototype上

在我的项目中，没有将其挂载到vue.prototype上，因为系统比较简单，只在home页面和detail页面请求数据。
封装好axios实例后，分别在home.js和detail.js中引入创建的axios实例request，然后传入配置来创建请求。
我的系统中只封装了get请求方法，包括对轮播图推荐页面数据的请求(getHomeMutidata)和商品数据展示三个类别的数据(getHomeGoods(type))。

在这里插入图片描述

（3）在home.js和detail.js中引入实例并传入配置

home.js
在这里插入图片描述
detail.js

（4）在创建请求的时候可以用的配置选项

url : 用于请求的服务器 URL
baseURL: 通过设置一个 baseURL 便于为 axios 实例的方法传递相对 URL. baseURL 将自动加在 url 前面，除非 url 是一个绝对 URL
method: 创建请求时使用的方法，默认为get
headers: 即将被发送的自定义请求头
params: 即将与请求一起发送的 URL 参数
data: 作为请求主体被发送的数据。只适用于这些请求方法 ‘PUT’, ‘POST’, 和 ‘PATCH’
timeout: 请求超时的毫秒数(0 表示无超时时间)
withCredentials: 默认false. 表示跨域请求时是否需要使用凭证
responseType：表示服务器响应的数据类型，默认json
xsrfCookieName：‘XSRF-TOKEN’, // default。用作 xsrf token 的值的cookie的名称
xsrfHeaderName: ‘X-XSRF-TOKEN’, // default。承载 xsrf token 的值的 HTTP 头的名称
proxy: 定义代理服务器的主机名称和端口

还有一些其他的就不提了。

对项目首页模块的总结描述：

实现思路
- 封装axios实例
- 设计数据结构，用于保存数据：goods对象中包括pop new sell
- 发送数据请求，动态获取page
- 对商品数据进行展示：（1）封装GoodList组件，props: goods -> list[30] （2）封装GoodListItem组件
在商品首页这个模块，Home.vue主要包括的组件有：1、nav-bar组件（可复用的组件）2、scroll组件，即滚动组件 3、home-swiper组件，即轮播图推荐 4、tab-control组件（可复用的组件），选择不同的type 5、good-list组件，展示商品信息。
在商品信息展示这一块的具体做法：在父组件Home.vue中引入子组件GoodList，在子组件GoodList中通过props得到Home中请求得到的goods信息，在GoodList组件中又引入一个子组件GoodListItem，也是通过props得到goodsItem信息。整个商品展示是通过DIV+CSS布局来实现，整个GoodList是一个弹性盒子。
添加的一些自己的逻辑：在利用axios进行数据请求时，首先对axios进行了封装。创建文件夹保存所有接口相关的文件和配置，创建axios实例，配置好一些基本选项，比如baseURL，method默认设置为get，设置请求超时时间等，然后添加请求拦截器、响应拦截器，封装一些常用的方法。配置好之后导出这个axios实例。我没有将实例挂载到vue的prototype上，因为只在首页和详情页进行了数据请求。分别在home.js和detail.js中引入这个axios实例并传入配置来创建请求。比如home.js中，添加方法获得轮播图展示图片时，在实例中传入添加在baseURL后面的服务器url；添加方法获得展示的商品信息时，除了添加url，还要配置params来获得商品的type和page.
主要实现的交互：（1）上下滚动商品（2）点击跳转到详情页
交互1的实现以及遇到的问题下面步骤已经讲明
交互2的实现：通过路由带参数进行传值。在组件GoodListItem中对itemClick事件进行监听：this.$router.push('/detail/' + this.goodsItem.iid)，然后在详情页组件Detail中的created中保存传入的iid：this.iid = this.$route.params.iid
在首页部分遇到的难点以及如何解决：为了实现商品的滚动效果，引入插件Better-Scroll（移动端的滚动插件，可以实现滚动，上拉刷新，返回顶部等效果）。但是Better-Scroll是根据scrollerHeight属性来决定滚动区域的，在使用插件的过程中，会出现滚动出现问题的情况，原因是scrollerHeight属性是根据content中的子组件高度进行计算的，此时DOM树解析完成，但是图片还没有下载完成，后来图片加载进来之后有了新高度，导致计算的滚动条高度不准确。解决方案：监听每一张图片的加载，每加载完成一次，执行一次refresh()方法。在这个过程中又涉及到了非父子组件的传值，因为需要在GoodListItem组件中监听图片的加载，然后在Home组件中监听这个事件并调用refresh()方法，采取的方案是用事件总线来传值。实现在GoodListItem组件中，每次图片加载完，通过this.$bus.$emit发射事件，Home组件通过this.$bus.$on来监听图片加载事件。前提操作是在main.js中，vue.prototype.$bus = new Vue()。
在以上解决方案中，为了实现性能的更优化，对于refresh执行防抖操作，因为如果我们每张图片加载完成后都直接执行referesh()，会导致非常频繁的调用，实际上如果图片加载速度快，并不需要执行这么多次，所以定义了一个debounce防抖函数，将refresh函数传入其中生成一个新的函数。
另一个性能的优化，引入VueLazyLoad图片懒加载插件，实现首页商品图片懒加载，利用loading配置，放入了自定义的占位图片