Vue学习笔记（9）

9.1 axios

9.1.1 概述

Axios是一个流行的基于Promise的HTTP客户端，用于在浏览器和Node中发送HTTP请求。它可以用于处理各种请求类型，例如GET，POST等。Axios可以很容易地与现代前端框架和库集成，例如React，Vue等。

Axios的特点：

1. 支持Promise API
2. 支持请求取消
3. 支持客户端防止CSRF
4. 支持浏览器和Node
5. 自动转换JSON数据
6. 支持拦截器，在请求或响应被处理前拦截和修改它们
7. 支持设置默认的请求配置

9.1.2 axios语法

Axios提供了一个简单的API，用于发送各种类型的HTTP请求，Axios的语法相对简单，可以通过创建一个Axios实例并使用其方法来发送HTTP请求。

首先需要在项目中引入Axios库：

import axios from 'axios';

axios请求示例：

不携带参数的示例：

axios.get('/api/data').then(response => {console.log(response.data);
}).catch(error => {console.log(error);
});

携带参数的示例：

axios.post('/api/data', {name: 'John Doe',email: '[e-mail]'
}).then(response => {console.log(response.data);
}).catch(error => {console.log(error);
});

Axios支持的HTTP请求类型有以下几种：

1. GET：一般用于获取数据；
2. POST：一般用于提交数据；
3. PUT：一般用于更新数据；
4. DELETE：一般用于删除数据；
5. HEAD：一般用于获取资源的头部信息；
6. OPTIONS：一般用于获取资源支持的请求方式；
7. PATCH：一般用于更新部分数据；

9.1.3 并发请求和请求拦截器：

Axios提供了axios.all和axios.spread方法来支持并发请求。我们可以使用axios.all方法一次性发送多个请求，返回一个包含所有响应结果的数组，也可以使用axios.spread方法将多个响应结果解构为多个参数，方便使用。

例如：

axios.all([axios.get('/api/user'),axios.get('/api/posts')
]).then(axios.spread((userRes, postsRes) => {console.log(userRes.data);console.log(postsRes.data);
})).catch(error => {console.log(error);
});

Axios提供了axios.interceptors.request属性来实现请求拦截器。我们可以使用这个属性来注册一个拦截器，在请求发送前对请求进行拦截和修改。

例如，我们可以在请求头中添加Token来进行身份认证，代码如下：

axios.interceptors.request.use(config => {const token = localStorage.getItem('token');if (token) {config.headers['Authorization'] = `Bearer ${token}`;}return config;
}, error => {return Promise.reject(error);
});

9.1.4 axios的参数

Axios的各种方法中，具体的参数数量和类型会根据不同的请求类型和需要传递的数据而有所不同，但通常包括以下参数：

1. URL：请求的URL地址，可以是相对路径或者绝对路径。
2. Data：请求体中的数据，用于POST、PUT等请求。
3. Config：用于设置请求的一些配置，如请求头、超时时间、认证等。
4. CancelToken：用于取消请求。
5. OnUploadProgress：用于监听上传进度的回调函数。
6. OnDownloadProgress：用于监听下载进度的回调函数。

这些参数都是可选的，具体是否需要取决于我们发送请求的需求。例如，发送一个简单的GET请求只需要URL参数，而POST请求还需要Data参数，另外还可以设置Config参数来控制请求的一些细节。

需要注意的是，在使用Axios发送请求时，一些参数是可以通过默认配置来设置的，如baseURL、headers等。如果请求中需要的参数在默认配置中已经设置，我们不需要在每个请求中都重复设置，可以直接使用默认配置。

9.2 配置代理服务器

9.2.1 为什么配置代理服务器

Vue项目中配置代理服务器是为了解决跨域请求的问题。

1. 当Vue应用程序向不同的域名或端口发出请求时，由于浏览器的安全限制，会导致请求失败，这就是跨域请求问题。例如，在开发阶段，我们可能会将Vue应用程序部署在本地的开发服务器上，而API服务则部署在远程的服务器上，这就可能导致跨域请求问题。
2. 配置代理服务器可以解决这个问题，代理服务器可以将Vue应用程序发出的请求转发到目标服务器上，然后将目标服务器返回的响应转发回Vue应用程序。在这个过程中，代理服务器会伪装成目标服务器，浏览器会认为请求是发给同一域名和端口的服务器，因此不会出现跨域请求问题。
3. 配置代理服务器也有助于开发和调试，我们可以在代理服务器中添加一些拦截和转换逻辑，方便在开发过程中调试和测试。同时，代理服务器还可以用于在测试环境中模拟目标服务器的行为，方便测试和验收。

9.2.2 如何配置

在Vue项目中配置代理服务器可以使用vue.config.js文件来实现。下面是具体的步骤：

1. 在Vue项目的根目录下创建一个名为vue.config.js的文件。
2. 在vue.config.js文件中添加如下代码：

module.exports = {devServer: {proxy: {'/api': {target: 'http://localhost:3000', // 设置代理目标changeOrigin: true, // 开启跨域pathRewrite: {'^/api': '' // 重写路径，去掉/api前缀}}}}
};

在上面的代码中，我们使用module.exports导出了一个对象，其中包含了devServer属性，这个属性表示开发服务器的配置。在devServer中，我们又添加了一个名为proxy的属性，它是一个对象，用于配置代理服务器。我们使用'/api'作为键，表示需要代理的路径，target属性表示代理的目标服务器，changeOrigin属性开启跨域，pathRewrite属性用于重写路径，将路径中的'/api'前缀去掉。

3. 在完成以上配置后，我们可以使用如下代码来发送请求：

axios.get('/api/data').then(response => {console.log(response.data);
}).catch(error => {console.log(error);
});

在上面的代码中，我们发送了一个GET请求，请求的URL为/api/data，由于/api前缀被重写去掉了，因此实际发送的请求URL为http://localhost:3000/data，这个请求会被代理到目标服务器上。

9.3 插槽

Vue中的插槽是一种高级组件技术，用于将父组件的内容插入到子组件中，实现组件间的灵活组合。插槽可以用来代替Vue中的传递props属性和使用emit事件，使得组件之间的关系更加简洁和易于维护。

9.3.1 默认插槽

默认插槽是Vue中插槽的一种类型，用于将父组件中的内容插入到子组件中。默认插槽是最简单的一种插槽，它不需要任何名称或参数，只需要在子组件中使用<slot>元素即可。

使用默认插槽的方式非常简单，只需要在父组件中使用子组件标签包含需要插入到子组件中的内容，就可以将这些内容插入到子组件的默认插槽中。例如，下面是一个使用默认插槽的示例：

<!-- 父组件中的模板 -->
<template><div><h2>{{title}}</h2><slot></slot></div>
</template>

在上面的代码中，父组件中包含一个默认插槽，使用<slot>元素表示。在父组件中，我们可以使用子组件标签包含需要插入到子组件中的内容，例如：

<my-component title="Title"><p>Content</p>
</my-component>

在上面的代码中，父组件使用<my-component>标签包含一个<p>标签，在子组件中，这个<p>标签将被插入到默认插槽中。

在子组件中，可以像访问普通插槽一样访问默认插槽中的内容，例如：

<!-- 子组件中的模板 -->
<template><div><h3>{{subtitle}}</h3><slot></slot></div>
</template>

在上面的代码中，子组件中也包含一个默认插槽，使用<slot>元素表示。子组件中的这个默认插槽将包含父组件传递进来的内容。在子组件中，我们可以通过<slot>元素来访问这个默认插槽，例如使用v-for指令对插入的内容进行遍历：

<my-component title="Title"><p v-for="(item, index) in items" :key="index">{{item}}</p>
</my-component>

在上面的代码中，父组件使用v-for指令生成了多个<p>标签，这些标签将被插入到子组件的默认插槽中，然后在子组件中使用<slot>元素和v-for指令对这些标签进行遍历。这样就可以方便地将父组件中的内容插入到子组件中，并进行灵活的组合和处理。

9.3.2 具名插槽

除了默认插槽外，Vue中还支持一种叫做具名插槽的插槽类型。具名插槽可以给插槽命名，允许父组件向子组件中的不同插槽插入不同的内容，从而更灵活地组合和使用组件。

使用具名插槽需要在子组件中使用<slot>元素并添加name属性，表示这是一个具名插槽。例如，下面是一个使用具名插槽的示例：

<!-- 父组件中的模板 -->
<template><div><h2>{{title}}</h2><slot name="content"></slot><slot name="footer"></slot></div>
</template>

在上面的代码中，父组件中包含两个具名插槽，分别命名为content和footer，使用<slot>元素和name属性表示。在父组件中，我们可以使用<template>元素来包含需要插入到这些具名插槽中的内容，例如：

<my-component title="Title"><template v-slot:content><p>Content</p></template><template v-slot:footer><button>OK</button><button>Cancel</button></template>
</my-component>

在上面的代码中，我们使用<template>元素来包含需要插入到具名插槽中的内容，并使用v-slot指令来指定插入到哪个具名插槽中。在上面的示例中，<p>标签将被插入到名为content的具名插槽中，而两个<button>标签将被插入到名为footer的具名插槽中。

在子组件中，可以通过<slot>元素的name属性来访问具名插槽中的内容，例如：

<!-- 子组件中的模板 -->
<template><div><h3>{{subtitle}}</h3><slot name="content"></slot><hr><slot name="footer"></slot></div>
</template>

在上面的代码中，子组件中也包含两个具名插槽，分别命名为content和footer。在子组件中，我们可以使用<slot>元素的name属性来访问这些具名插槽，例如<slot name="content"></slot>表示访问名为content的具名插槽。

使用具名插槽可以让组件更加灵活和可重用，通过将不同的内容插入到不同的具名插槽中，可以轻松组合和定制不同的UI效果。

9.3.3 作用域插槽

作用域插槽是Vue中一种特殊的插槽类型，它可以让父组件向子组件中传递数据，从而实现更灵活的组件组合。

作用域插槽通过将数据传递给子组件来工作。在父组件中，我们可以使用<template>元素和v-slot指令来定义作用域插槽，例如：

<!-- 父组件中的模板 -->
<template><div><my-component><template v-slot:default="slotProps"><p>{{slotProps.text}}</p></template></my-component></div>
</template>

在上面的代码中，我们使用<template>元素和v-slot指令来定义一个名为default的作用域插槽，并将其传递给名为my-component的子组件。在作用域插槽中，我们可以使用slotProps参数来访问父组件传递过来的数据。

在子组件中，我们可以通过<slot>元素的name属性来定义作用域插槽，并通过v-bind指令将数据传递给插槽。例如：

<!-- 子组件中的模板 -->
<template><div><slot :text="message"></slot></div>
</template>
<script>export default {data() {return {message: 'Hello world!'};}}
</script>

在上面的代码中，我们使用<slot>元素的name属性来定义一个名为default的作用域插槽，并通过v-bind指令将数据传递给插槽。在子组件中，我们可以通过this.$slots.default({text: this.message})来访问作用域插槽，并将message属性的值传递给父组件。

通过使用作用域插槽，我们可以轻松地向子组件中传递数据，并在子组件中使用这些数据来定制UI效果。这种方法可以让组件更加灵活和可重用，让父组件和子组件之间的通信变得更加简单和直接。