nuxtjs-axios
安全简单的、与 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后端。
更多建议: