初学浏览器发送请求的时候，我们都是自己封装Ajax。比如 myAjax

而现在我们要开始偷懒，学会开始使用axios

axios

第一步下载包

这里提供两种方法，你可以选择npm下载npm i axios,下载完成后用script标签引入即可 <script src="./node_modules/axios/dist/axios.min.js"></script>

另外，你也可以选择直接在线引入。

开始发送请求

这里同样存在两种请求方式，你自行选择即可，功能都是同样的，给服务器发送请求，获得响应数据并处理数据。

axios({
        method: "get",
        baseURL: "http://121.43.116.41/demo/php",
        url: "/searchGradeOrderLimit.php",
        params: this.myParams,
        responseType: "json",
      })
        .then((resp) => {
          console.log(resp);
          if (resp.status === 200) {
            return resp.data;
          } else {
            let err = new Error("出错了");
            throw err;
          }
        })
        .then((data) => console.log(data))
        .catch((err) => console.log(err));

这里复习一下，在使用 Promise 对象时，.then() 方法返回的是一个新的 Promise 对象，因此我们可以链式调用多个 .then()

以上内容比较简单，注意用法即可。接下来的重点是，如何封装Vue的组件，什么是全局组件，什么是局部组件？

为了搞明白这个问题，我们先用vue实现一个倒计时的功能，然后将其封装成组件，后续使用就相当方便了。

VUE组件

先做个倒计时

思路很简单，data存放关键数据count，methods中增加定时器来控制count--，computed则是负责将count数字转化成具体的时分秒，最后在mounted环节来执行异步任务函数即可。

下面是简单的实现供参考：

 let app = new Vue({
          el: "#app",
          data: {
            count: 1000,
            timer: null,
          },
          methods: {
            countDownHandle() {
              this.timer = null;
              timer = setInterval(() => {
                this.count--;
              }, 1000);
            },
          },
          computed: {
            hour: function () {
              return parseInt((this.count % (24 * 60 * 60)) / (60 * 60));
            },
            min: function () {
              return parseInt((this.count % (60 * 60)) / 60);
            },
            sec: function () {
              return parseInt(this.count % 60);
          },
          mounted() {
            this.countDownHandle();
          },
        });

接着我们就可以将这个功能直接封装成组件count-down， 后续只要在页面中写下<count-down></count-down>就可以直接生成一个倒计时，如图

全局组件

其实不难，直接把我们写在vue()内部的内容，改写到Vue.component()中即可。 同时，对于data的内容需要加以修改，写成函数形式，返回对象。因为如果后续多次调用数据都是来自同一片地址会出现问题。

局部组件

第一步配置对象

如果B组件中会用到C组件，那么B需要配置在C上面

第二步注册

你需要用谁就注册谁，直接写在components中即可

全局组件和局部组件，异同点

全局组件

优点:

一次注册，全局使用

缺点:

1. 全局组件一经注册,无论项目中是否使用, 都会打包到项目的源码中 => 如果注册组件不使用, 代码冗余
2. 使用全局组件,会造成组件的层级关系比较混乱

局部组件

优点:

父组件需要先注册子组件才能使用 => 依赖关系比较明确 如果组件注册之后没有被使用, 项目打包过程中,会作为冗余代码删除

缺点:

如果多次使用，需要注册多次