在项目中需要在初始化页面前先得到数据服务器请求数据,也就是我们常说的异步请求数据。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
然后写入下面的代码:
<template>
<div>
<h1>姓名:{{info.name}}</h1>
<h2>年龄:{{info.age}}</h2>
<h2>兴趣:{{info.interest}}</h2>
<p><nuxt-link to='/'>Home</nuxt-link></p>
</div>
</template>
<script>
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)
})
},
}
</script>
请求方式一:
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 就工作了。