十年网站开发经验 + 多家企业客户 + 靠谱的建站团队
量身定制 + 运营维护+专业推广+无忧售后,网站问题一站解决
本篇内容主要讲解“Nuxt服务端请求及获取Cookie 的方法”,感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷,实用性强。下面就让小编来带大家学习“Nuxt服务端请求及获取Cookie 的方法”吧!
在江州等地区,都构建了全面的区域性战略布局,加强发展的系统性、市场前瞻性、产品创新能力,以专注、极致的服务理念,为客户提供网站设计、网站建设 网站设计制作定制开发,公司网站建设,企业网站建设,品牌网站制作,网络营销推广,成都外贸网站建设,江州网站建设费用合理。
介绍
nuxt.js是基于Vue的应用框架,它预设了利用 Vue.js 开发服务端渲染的应用所需要的各种配置。它提供了一个asyncData方法可用于在服务端里异步的获取数据,它可以在页面组件每次加载前被调用。
使用
这里使用的是typescript的方式,asyncData方法获取到数据后会填充到data中,且asyncData方法在vue组件实例化之前被调用,因此无法获取到实例this。
方式一:使用axios
import axios from 'axios' import { Component, Vue, } from "nuxt-property-decorator"; @Component({ asyncData(context: any): Promise{ return axios.get('http://test-api/get/data').then(res => { return {title: res.data.title, list: res.data.list} }) }, }) export default class Index extends Vue {}
方式二:使用async\await
import axios from 'axios' import { Component, Vue, } from "nuxt-property-decorator"; @Component({ async asyncData(context: any): Promise{ let {data} = await axios.get('http://test-api/get/data'); return {title: data.title, list: data.list} }, }) export default class Index extends Vue {}
上面就是asyncData部分的使用方式,当页面第一次加载时会在服务端请求数据并填充到页面的data中。
获取Cookie
因为asyncData是会在服务端调用的,因此它无法和浏览器一样去获取Cookie,但是asyncData中的第一个参数是一个上下文对象,它在服务端调用时,我们可以访问用户请求的req和res对象,因此我们也可以通过它来获取我们对应的Cookie信息。
import axios from 'axios' import { Component, Vue, } from "nuxt-property-decorator"; @Component({ async asyncData(context: any): Promise{ let params = { name: 'tom', age: 20, token: '', }; // 可以使用process.server检查是否在服务器端 if (process.server) { if (context.req && context.req.headers !== undefined) { // 获取Cookies信息 let cookieArr = context.req.headers.cookie; if (!params.token) { params.token = getCookie('token', cookieArr) } } } let {data} = await axios.post('http://test-api/post/data', params); return {title: data.title, list: data.list} }, }) export default class Index extends Vue {} //获取对应cookie方法 function getCookie (name: string, strCookie: any) { let arrCookie = strCookie.split(';'); let cookie = arrCookie.find(item => item.split('=')[0] === name); return cookie ? cookie.split('=')[1] : ''; }
结语
使用asyncData方法时需要注意上下文对象的一些参数是否可用,因为它同时应用在两个端,所以需要对一些参数进行判断之后在使用。
到此,相信大家对“Nuxt服务端请求及获取Cookie 的方法”有了更深的了解,不妨来实际操作一番吧!这里是创新互联网站,更多相关内容可以进入相关频道进行查询,关注我们,继续学习!