Nuxt.js - nuxt/axios（会持续完善）

nuxt2

官方文档

基础

• 下载,新建好项目,或者已经有的项目，我们可以通过yarn（或者npm）去添加该包

  yarn add @nuxtjs/axios
  

• nuxt.config.js配置

  module.exports = {
    module:['@nuxtjs/axios'],  // 可以让我们全局使用 $axios
    axios:{ 
    	// 可以在这里做一些配置代理什么的
    },
    plugins: ['~/plugins/axios'],   //这个会对应咱们下面为axios写的插件
  }
  

添加拦截器

在这里我们需要用到 plugins 就是插件
/plugins/axios.js 我们需要创建一个这个文件，作为我们的插件去处理axios

export default function ({ $axios, redirect }) {
  $axios.onRequest(config => {
    console.log('Making request to ' + config.url)
  })

  $axios.onError(error => {
    const code = parseInt(error.response && error.response.status)
    if (code === 400) {
      redirect('/400')
    }
  })
}

在这里axios插件提供了一些插件

• onRequest(config)

• onResponse(response)

• onError(err)

• onRequestError(err)

• onResponseError(err)

• setBaseURL
  用来设置URL的地址

  if (process.client) {
    this.$axios.setBaseURL('http://api.example.com')
  }
  

• setHeader
  用来设置请求头Header

  this.$axios.setHeader('Authorization', '456')
  

• setToken
  用这个可以轻松设置全局身份验证表头

   this.$axios.setToken('123', 'Bearer')
  

使用

直接用即可，其他的事nuxtjs已经帮你做好了

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

nuxt3

后续会更新