Nuxt.js asyncData()获取数据、nuxt反向代理跨域 |
您所在的位置：网站首页 › nuxtlayout中获取数据 › Nuxt.js asyncData()获取数据、nuxt反向代理跨域 |
Nuxt.js asyncData()获取数据、nuxt反向代理跨域
|
在项目中需要在初始化页面前先得到数据服务器请求数据，也就是我们常说的异步请求数据。Nuxt.js贴心的为我们扩展了Vue.js的方法，增加了asyncData(){……}。从名字上就很好理解，这是一个异步的方法。 创建远程数据 在这里制作一些假的远程数据，我选择的网站是myjson.com，它是一个json的简单仓库，学习使用是非常适合的。我们打开网站，在对话框中输入JSON代码，这个代码可以自己随意输入哦。 { "name": "名字", "age": 18, "interest": "I love coding!" }输入后，网站会给你一个地址，这就是你这个JSON仓库的地址了。 https://api.myjson.com/bins/g5whc 安装Axios Vue.js官方推荐使用的远程数据获取方式就是Axios，所以我们安装官方推荐，来使用Axios。这里我们使用npm 来安装axios。直接爱终端中输入下面的命令： npm install axios --save注意：由于asyncData方法是在组件 初始化 前被调用的，所以在方法内是没有办法通过 this 来引用组件的实例对象。
asynccData的promise方法 我们在pages下面新建一个文件，叫做ansyData.vue 然后写入下面的代码： 姓名：{{info.name}} 年龄：{{info.age}} 兴趣：{{info.interest}}Home import axios from 'axios' export default { data() { return { name: 'muzidigbig', } }, /** * 后端请求 * 1 在服务器端调用asyncData时，您可以访问用户请求的req和res对象。 * 2 在当前页面刷新， 服务端执行此函数 * 3 从其他页面跳转过来，客户端执行此函数 */ //方式一(await) // async asyncData(context) { // console.log(await axios.get('https://api.myjson.com/bins/1dkbio')) // let {data} = await axios.get('https://api.myjson.com/bins/1dkbio') // return出去的是data中的状态 // return {info:data} // error(params)//当请求错误时直接跳转到错误页面(放在返回值之后) // }, //方式二 asyncData ({ params }) {//请求 return axios({ method: 'get', url: 'https://api.myjson.com/bins/1dkbio' }) .then(function (response) { console.log(response.data) // return出去的是data中的状态 return { info: response.data}; error(params) }) }, }请求方式一： asyncData ({ params }) {//请求 return axios({ method: 'get', url: '后台api接口' }) .then(function (response) { // return出去的是data中的状态 return { posts: response.data.slice(0, 5) } }) },请求方式二： async asyncData ({ params }) { let { data } = await axios({ method: 'get', url: '后台api接口' }) // return出去的是data中的状态 return { posts: data.slice(0, 5) } },
(1) 如果组件的数据不需要异步获取或处理，可以直接返回指定的字面对象作为组件的 数据。 data()：不需要考虑SEO、首屏渲染速度问题 data() { return { dataList: ["1111", "2222", "3333"], list: null, }; },(2)使用 req/res(request/response) 对象 初始化页面的时候用到的是服务器端请求数据，在浏览器上进行点击跳转页面是客户端请求数据。 asyncData()会被请求两次：第一次为服务端--有数据显示；第二次为客户端--更新数据 有益于SEO、首屏渲染 判断是在服务器端运行的请求还是客户端发送过来的请求： /** * process全局变量 * process.server==>Boolean是否在服务器端运行 */ /** * 后端请求 * 1 在服务器端调用asyncData时，您可以访问用户请求的req和res对象。 * 2 在当前页面刷新， 服务端执行此函数 * 3 从其他页面跳转过来，客户端执行此函数 */ asyncData ({ params }) { /** * process全局变量 * process.server==>Boolean是否在服务器端运行 */ return axios({ method: 'get', url: process.server ? 'https://api.myjson.com/bins/1dkbio':'/bins/1dkbio' }) .then(function (response) { console.log(response.data) // return出去的是data中的状态 return { info: response.data}; error(params) }) },(3)错误处理 Nuxt.js 在上下文对象context中提供了一个 error(params) 方法，你可以通过调用该方法来显示错误信息页面。params.statusCode 可用于指定服务端 返回的请求状态码。 以返回 Promise 的方式举个例子： asyncData({ isDev, route, store, env, params, query, req, res, redirect, error }) { /** * process全局变量 * process.server==>Boolean是否在服务器端运行 */ console.log(process.server); return axios({ url: process.server ? "http://152.136.185.210:7878/api/hy66/home/data?type=pop&page=1" : "/api/hy66/home/data?type=pop&page=1", }) .then((res) => { // console.log(res.data); // return出去的是data中的状态 return { list: res.data.data.list, }; }) .catch((e) => { error({ statusCode: 404, message: "Post not found" }); }); },(4)反向代理的配置 （重启服务器） 1、安装 npm install @nuxtjs/proxy -D 2、在 nuxt.config.js 配置文件中添加对应的模块，并设置代理 modules:[ '@nuxtjs/axios',//添加axios '@nuxtjs/proxy'//添加proxy模块 ], axios:{ proxy:true }, proxy:{ '/api':{ target:'http://xxx.com', changeOrigin:true, pathRewrite:{ '^/api':'/' } } } 3、重启 4、此时通过浏览器可以跨域,但后端请求时会因为路径问题报错 通过process.server/process.client来判断是前端还是后端请求 process.server?url1:url2如果上线了， 需要在node中配置好 http-proxy-middleware 就工作了。 |
【本文地址】
今日新闻 |
推荐新闻 |