文章目录

• nuxt2
• • 基础
  • 添加拦截器
  • 使用
• nuxt3
• • 后续会更新

nuxt2

官方文档

基础

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

  yarn add @nuxtjs/axios
  

• nuxt.config.js配置

  module.exports = {module:['@nuxtjs/axios'],  // 可以让我们全局使用 $axiosaxios:{ // 可以在这里做一些配置代理什么的},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

后续会更新