温馨提示×

温馨提示×

您好,登录后才能下订单哦!

密码登录×
登录注册×
其他方式登录
点击 登录注册 即表示同意《亿速云用户服务条款》

Nuxt服务端请求及获取Cookie 的方法

发布时间:2021-06-28 17:10:41 来源:亿速云 阅读:774 作者:chen 栏目:编程语言

本篇内容主要讲解“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 <any> {
            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 <any> {
            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 <any> {
     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 的方法”有了更深的了解,不妨来实际操作一番吧!这里是亿速云网站,更多相关内容可以进入相关频道进行查询,关注我们,继续学习!

向AI问一下细节

免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。

AI