中国城市建设网网站,怎么开店铺,做关于什么样的网站好,网站开发报价技巧9.1 axios
9.1.1 概述
Axios是一个流行的基于Promise的HTTP客户端#xff0c;用于在浏览器和Node中发送HTTP请求。它可以用于处理各种请求类型#xff0c;例如GET#xff0c;POST等。Axios可以很容易地与现代前端框架和库集成#xff0c;例如React#xff0c;Vue等。
A…9.1 axios
9.1.1 概述
Axios是一个流行的基于Promise的HTTP客户端用于在浏览器和Node中发送HTTP请求。它可以用于处理各种请求类型例如GETPOST等。Axios可以很容易地与现代前端框架和库集成例如ReactVue等。
Axios的特点 支持Promise API支持请求取消支持客户端防止CSRF支持浏览器和Node自动转换JSON数据支持拦截器在请求或响应被处理前拦截和修改它们支持设置默认的请求配置 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: john.doeexample.com
}).then(response {console.log(response.data);
}).catch(error {console.log(error);
});Axios支持的HTTP请求类型有以下几种 GET一般用于获取数据POST一般用于提交数据PUT一般用于更新数据DELETE一般用于删除数据HEAD一般用于获取资源的头部信息OPTIONS一般用于获取资源支持的请求方式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的各种方法中具体的参数数量和类型会根据不同的请求类型和需要传递的数据而有所不同但通常包括以下参数 URL请求的URL地址可以是相对路径或者绝对路径。Data请求体中的数据用于POST、PUT等请求。Config用于设置请求的一些配置如请求头、超时时间、认证等。CancelToken用于取消请求。OnUploadProgress用于监听上传进度的回调函数。OnDownloadProgress用于监听下载进度的回调函数。 这些参数都是可选的具体是否需要取决于我们发送请求的需求。例如发送一个简单的GET请求只需要URL参数而POST请求还需要Data参数另外还可以设置Config参数来控制请求的一些细节。
需要注意的是在使用Axios发送请求时一些参数是可以通过默认配置来设置的如baseURL、headers等。如果请求中需要的参数在默认配置中已经设置我们不需要在每个请求中都重复设置可以直接使用默认配置。
9.2 配置代理服务器
9.2.1 为什么配置代理服务器
Vue项目中配置代理服务器是为了解决跨域请求的问题。 当Vue应用程序向不同的域名或端口发出请求时由于浏览器的安全限制会导致请求失败这就是跨域请求问题。例如在开发阶段我们可能会将Vue应用程序部署在本地的开发服务器上而API服务则部署在远程的服务器上这就可能导致跨域请求问题。配置代理服务器可以解决这个问题代理服务器可以将Vue应用程序发出的请求转发到目标服务器上然后将目标服务器返回的响应转发回Vue应用程序。在这个过程中代理服务器会伪装成目标服务器浏览器会认为请求是发给同一域名和端口的服务器因此不会出现跨域请求问题。配置代理服务器也有助于开发和调试我们可以在代理服务器中添加一些拦截和转换逻辑方便在开发过程中调试和测试。同时代理服务器还可以用于在测试环境中模拟目标服务器的行为方便测试和验收。 9.2.2 如何配置
在Vue项目中配置代理服务器可以使用vue.config.js文件来实现。下面是具体的步骤 在Vue项目的根目录下创建一个名为vue.config.js的文件。在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前缀去掉。 在完成以上配置后我们可以使用如下代码来发送请求 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元素即可。
使用默认插槽的方式非常简单只需要在父组件中使用子组件标签包含需要插入到子组件中的内容就可以将这些内容插入到子组件的默认插槽中。例如下面是一个使用默认插槽的示例
!-- 父组件中的模板 --
templatedivh2{{title}}/h2slot/slot/div
/template在上面的代码中父组件中包含一个默认插槽使用slot元素表示。在父组件中我们可以使用子组件标签包含需要插入到子组件中的内容例如
my-component titleTitlepContent/p
/my-component在上面的代码中父组件使用my-component标签包含一个p标签在子组件中这个p标签将被插入到默认插槽中。
在子组件中可以像访问普通插槽一样访问默认插槽中的内容例如
!-- 子组件中的模板 --
templatedivh3{{subtitle}}/h3slot/slot/div
/template在上面的代码中子组件中也包含一个默认插槽使用slot元素表示。子组件中的这个默认插槽将包含父组件传递进来的内容。在子组件中我们可以通过slot元素来访问这个默认插槽例如使用v-for指令对插入的内容进行遍历
my-component titleTitlep v-for(item, index) in items :keyindex{{item}}/p
/my-component在上面的代码中父组件使用v-for指令生成了多个p标签这些标签将被插入到子组件的默认插槽中然后在子组件中使用slot元素和v-for指令对这些标签进行遍历。这样就可以方便地将父组件中的内容插入到子组件中并进行灵活的组合和处理。
9.3.2 具名插槽
除了默认插槽外Vue中还支持一种叫做具名插槽的插槽类型。具名插槽可以给插槽命名允许父组件向子组件中的不同插槽插入不同的内容从而更灵活地组合和使用组件。
使用具名插槽需要在子组件中使用slot元素并添加name属性表示这是一个具名插槽。例如下面是一个使用具名插槽的示例
!-- 父组件中的模板 --
templatedivh2{{title}}/h2slot namecontent/slotslot namefooter/slot/div
/template在上面的代码中父组件中包含两个具名插槽分别命名为content和footer使用slot元素和name属性表示。在父组件中我们可以使用template元素来包含需要插入到这些具名插槽中的内容例如
my-component titleTitletemplate v-slot:contentpContent/p/templatetemplate v-slot:footerbuttonOK/buttonbuttonCancel/button/template
/my-component在上面的代码中我们使用template元素来包含需要插入到具名插槽中的内容并使用v-slot指令来指定插入到哪个具名插槽中。在上面的示例中p标签将被插入到名为content的具名插槽中而两个button标签将被插入到名为footer的具名插槽中。
在子组件中可以通过slot元素的name属性来访问具名插槽中的内容例如
!-- 子组件中的模板 --
templatedivh3{{subtitle}}/h3slot namecontent/slothrslot namefooter/slot/div
/template在上面的代码中子组件中也包含两个具名插槽分别命名为content和footer。在子组件中我们可以使用slot元素的name属性来访问这些具名插槽例如slot namecontent/slot表示访问名为content的具名插槽。
使用具名插槽可以让组件更加灵活和可重用通过将不同的内容插入到不同的具名插槽中可以轻松组合和定制不同的UI效果。
9.3.3 作用域插槽
作用域插槽是Vue中一种特殊的插槽类型它可以让父组件向子组件中传递数据从而实现更灵活的组件组合。
作用域插槽通过将数据传递给子组件来工作。在父组件中我们可以使用template元素和v-slot指令来定义作用域插槽例如
!-- 父组件中的模板 --
templatedivmy-componenttemplate v-slot:defaultslotPropsp{{slotProps.text}}/p/template/my-component/div
/template在上面的代码中我们使用template元素和v-slot指令来定义一个名为default的作用域插槽并将其传递给名为my-component的子组件。在作用域插槽中我们可以使用slotProps参数来访问父组件传递过来的数据。
在子组件中我们可以通过slot元素的name属性来定义作用域插槽并通过v-bind指令将数据传递给插槽。例如
!-- 子组件中的模板 --
templatedivslot :textmessage/slot/div
/template
scriptexport default {data() {return {message: Hello world!};}}
/script在上面的代码中我们使用slot元素的name属性来定义一个名为default的作用域插槽并通过v-bind指令将数据传递给插槽。在子组件中我们可以通过this.$slots.default({text: this.message})来访问作用域插槽并将message属性的值传递给父组件。
通过使用作用域插槽我们可以轻松地向子组件中传递数据并在子组件中使用这些数据来定制UI效果。这种方法可以让组件更加灵活和可重用让父组件和子组件之间的通信变得更加简单和直接。
