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后端。

以上内容是否对您有帮助:
在线笔记
App下载
App下载

扫描二维码

下载编程狮App

公众号
微信公众号

编程狮公众号