nuxtjs-axios

2020-02-07 13:25 更新

安全简单的、与 Nuxt.js 集成的 Axios。

特点

无论是客户端还是 server 端，自动设置 baseURL
在$axios对象上暴露 setToken函数方法，我们能轻而易举的设置认证 tokens
当请求发送到 baseURL 时，自动启用 withCredentials特性
SSR模式下代理头信息（Useful for auth）
Fetch 风格的请求
和 Nuxt.js 的 Progressbar 完美结合
支持 Proxy Module
自动重试机制 axios-retry

安装

使用 npm：

npm install @nuxtjs/axios

使用 yarn：

yarn add @nuxtjs/axios

nuxt.config.js

module.exports = {
    modules: [
        '@nuxtjs/axios'
    ],
    axios: {
        // proxyHeaders: false
    }
}

使用

组件

asyncData

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

methods/created/mounted/etc

methods: {
    async fetchSomething() {
        const ip = await this.$axios.$get('http://icanhazip.com')
        this.ip = ip
    }
}

Store nuxtServerInit

async nuxtServerInit ({ commit }, { app }) {
  const ip = await app.$axios.$get('http://icanhazip.com')
  commit('SET_IP', ip)
}

Store actions

// In store
{
  actions: {
    async getIP ({ commit }) {
      const ip = await this.$axios.$get('http://icanhazip.com')
      commit('SET_IP', ip)
    }
  }
}

扩展Axios

如果你需要通过注册拦截器或者改变全局设置来定制化axios，你需要创建一个nuxt plugin。

nuxt.config.js

{
  modules: [
    '@nuxtjs/axios',
  ],

  plugins: [
    '~/plugins/axios'
  ]
}

plugins/axios.js

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 plugin provides helpers to register axios interceptors easier and faster.

onRequest(config)
onResponse(response)
onError(err)
onRequestError(err)
onResponseError(err)

These functions don’t have to return anything by default.

Example: (plugins/axios.js)

export default function ({ $axios, redirect }) {
  $axios.onError(error => {
    if(error.code === 500) {
      redirect('/sorry')
    }
  })
}

Fetch 风格请求

Axios plugin also supports fetch style requests with $ prefixed methods:

// Normal usage with axios
let data = (await $axios.get('...')).data

// Fetch Style
let data = await $axios.$get('...')

setHeader(name, value, scopes='common')

Axios 对象非常方面设置header部分

参数:

name: Name of the header
value: Value of the header
scopes: Send only on specific type of requests. DefaultsType: Array or StringDefaults to common meaning all types of requestsCan be get, post, delete, …

// Adds header: `Authorization: 123` to all requests
this.$axios.setHeader('Authorization', '123')

// Overrides `Authorization` header with new value
this.$axios.setHeader('Authorization', '456')

// Adds header: `Content-Type: application/x-www-form-urlencoded` to only post requests
this.$axios.setHeader('Content-Type', 'application/x-www-form-urlencoded', [
  'post'
])

// Removes default Content-Type header from `post` scope
this.$axios.setHeader('Content-Type', false, ['post'])

setToken(token, type, scopes='common')

Axios实例可以方便的设置全局头信息

Parameters:

token: 认证需要的token
type: 认证token前缀(Usually Bearer).
scopes: 用于特定请求设置. DefaultsType: Array or StringDefaults to common meaning all types of requestsCan be get, post, delete, …

// Adds header: `Authorization: 123` to all requests
this.$axios.setToken('123')

// Overrides `Authorization` header with new value
this.$axios.setToken('456')

// Adds header: `Authorization: Bearer 123` to all requests
this.$axios.setToken('123', 'Bearer')

// Adds header: `Authorization: Bearer 123` to only post and delete requests
this.$axios.setToken('123', 'Bearer', ['post', 'delete'])

// Removes default Authorization header from `common` scope (all requests)
this.$axios.setToken(false)

选项

在 nuxt.config.js 中，你可以使用模块选项或 axios section 传递选项。

prefix, host and port

用来配置 baseURL and browserBaseURL部分。

可以使用 API_PREFIX, API_HOST (or HOST) and API_PORT (or PORT) 环境变量.

prefix的默认值是/.

baseURL

默认值: http://[HOST]:[PORT][PREFIX]

Base URL 是用于在 server side 模式下的请求配置.

环境变量 API_URL 可以覆盖 override baseURL设置

browserBaseURL

Default: baseURL (or prefix when options.proxy is enabled)

Base URL 适用于客户端模式下的配置.

环境变量 API_URL_BROWSER 可以覆盖 override browserBaseURL.

https

默认: false

If set to true, http:// in both baseURL and browserBaseURL will be changed into https://.

progress

默认: true

和 Nuxt.js progress bar 一起用于显示loading状态 (仅在浏览器上，且loading bar可用)

你可以禁止适用这项配置

this.$axios.$get('URL', { progress: false })

proxy

Default: false

你可以很容易的将 Axios 与代理模块集成在一起，并推荐用于CORS和部署问题。

nuxt.config.js

{
  modules: [
    '@nuxtjs/axios'
  ],

  axios: {
    proxy: true // Can be also an object with default options
  },

  proxy: {
    '/api/': 'http://api.example.com',
    '/api2/': 'http://api.another-website.com'
  }
}

Note：不需要手动注册@nuxtjs/proxy模块，但它确实需要在您的依赖项中。

Note：/api/将被添加到api端点的所有请求中。如果需要删除，请使用pathrewite：

proxy: {
  '/api/': { target: 'http://api.example.com', pathRewrite: {'^/api/': ''} }
}

retry

Default: false

自动拦截失败的请求，并在使用 axios-retry 时，对它们进行重试。

默认情况下，如果retry value设置为true，则重试次数将为3次。您可以通过传递这样的对象来更改它：

axios: {
  retry: { retries: 3 }
}

credentials

Default: false

当请求到允许传递验证头后端的基础节点时，添加一个拦截器来自动设置AXIOS的凭据配置。

debug

Default: false

向日志请求和响应添加侦听器。

proxyHeaders

Default: true

在SSR上下文中，将客户端请求头设置为AXIOS默认请求头。这对于在服务器端请求基于Cookie的Autho的请求是有用的。也有助于在SSR和客户端代码中做出一致的请求。

NOTE：如果将请求定向到受CloudFlare的CDN保护的url，则应将此设置为false，以防止CloudFlare错误地检测到反向代理循环并返回403错误。

proxyHeadersIgnore

Default ['host', 'accept']

只有当proxyHeaders设置为true时才有效。删除不需要的请求头到SSR中的API后端。

以上内容是否对您有帮助：

← react-axios

axios-retry →

写笔记

我要补充