nuxt中间件ajax请求获取数据,NuxtJS 通过 2种方式引入axios进行异步数据请求

第一种 使用nuxt 提供的 Axios插件

1.安装

npm install @nuxtjs/axios -d

2.配置 nuxt.config.js

exports default { modules: [ '@nuxtjs/axios', ], axios: { // proxyHeaders: false } }

3.在提供$axios

Component

async asyncData({ $axios }) { const ip = await $axios.$get('http://icanhazip.com') return { ip } }

4.使用Nuxt plugin扩展Axios

nuxt会在vue.js程序启动前调用 plugins目录下的脚本,

并且以$axios

创建 plugins/axios.js 并定义axios的拦截器,定义请求的各个阶段需要进行的处理

export default function({ $axios, redirect }) { // request interceptor $axios.interceptors.request.use( config => {

// do something before request is sent return config

}, error => {

// do something with request error return Promise.reject(error)

} )

$axios.onRequest(config => {

console.log('Making request to ' + co