地址：https://www.homwang.com 欢迎大家性能测试
交流讨论——QQ群号:604203227
📦 Axios
安全，轻松的Axios与Nuxt.js集成
特性
✓ 自动为客户端和服务器端设置基本URL
✓ 公开功能，以便我们可以轻松地全局设置身份验证令牌setToken$axios
✓ 请求基本URL时自动启用withCredentials
✓ SSR中的代理请求头（对于auth有用）
✓ 获取样式请求
✓ 在提出请求时与Nuxt.js Progressbar集成
✓ 集成 Proxy Module
✓ 具有自动重试请求 axios-retry
使用
yarn 和 npm 安装:
yarn add @nuxtjs/axios
OR
npm install @nuxtjs/axios
nuxt.config.js
module.exports = {
modules: [
'@nuxtjs/axios',
],
axios: {
// proxyHeaders: false
}
}
Component
asyncData
async asyncData({ $axios }) {
const ip = await $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 }, { $axios }) {
const ip = await $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，则必须创建一个nuxt插件。
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插件提供帮助程序，可以更轻松，更快速地注册axios拦截器。
onRequest(config)
onResponse(response)
onError(err)
onRequestError(err)
onResponseError(err)
默认情况下，这些函数不必返回任何内容。
示例: （plugins/axios.js）
export default function ({ $axios, redirect }) {
$axios.onError(error => {
if(error.code === 500) {
redirect('/sorry')
}
})
}
获取样式请求
Axios插件还支持使用前缀 $ 的样式方法来获取请求：
// Normal usage with axios
let data = (await $axios.get('...')).data
// Fetch Style
let data = await $axios.$get('...')
设置头部信息
setHeader(name, value, scopes='common')
Axios实例有一个帮助方法，可以轻松设置任何标头。
参数：
- name: 标题的名称
- value: 标头的值
-
scopes: 默认仅针对特定类型的请求发送。
- Type: 数组或字符串
- Defaults: 默认所有类型的请求为
common - 可以是
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'])
设置Token
setToken(token, type, scopes='common')
Axios实例有一个帮助方法，可以轻松设置全局身份验证标头。
参数：
- token: 授权令牌
-
type: 授权令牌前缀（通常为
Bearer） -
scopes: 默认仅针对特定类型的请求发送。
- Type: 数组或字符串
- Defaults: 默认所有类型的请求为
common - 可以是
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)
选项
您可以使用 axios 模块选项或部分选项在 nuxt.config.js 配置
prefix、host和port
该选项使用在 baseURL 和 browserBaseURL
可以自定义 API_PREFIX, API_HOST (或 HOST) 和 API_PORT (或 PORT) 环境变量。
prefix 的默认值为 /
baseURL
- Default:
baseURL(或prefix在使用options.proxy启用)
在客户端使用和预先添加请求的基本URL。
环境变量 API_URL_BROWSER 可用于覆盖 browserBaseURL
https
- Default:
false
如果设置为 true，http:// 在 baseURL 和 browserBaseURL 将会变成 https://
progress
- Default:
true
在和Nuxt.js集成时并发出请求时显示加载条（只有在浏览器上加载条时可用）
还可以使用 progress 配置禁用每个请求的进度条。
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'
}
}
注意：不需要手动注册 @nuxtjs/proxy 模块，但它确实需要在您的依赖项中。
注意：将 /api 添加到API端点的所有请求中。如果需要删除它，请使用 /pathRewrite：
proxy: {
'/api/': { target: 'http://api.example.com', pathRewrite: {'^/api/': ''} }
}
retry
- Default:
false- 自动拦截失败的请求，并在每次使用 axios-retry 时重试它们。
默认情况下，如果将 retry 值设置为 true，则重试次数将为3次。您可以通过传递这样的对象来更改它：
axios: {
retry: { retries: 3 }
}
credentials
- Default:
false
添加拦截器时自动设置 withCredentials，请求axios时配置 baseUrl ，允许将身份验证头传递给后端
debug
- Default:
false
添加拦截器来记录请求和响应。
proxyHeaders
- Default:
true
在SSR上下文中，将客户端请求头设置为axios的默认请求头。这对于在服务器端进行需要基于cookie的auth的请求很有用。还有助于在SSR和客户端代码中做出一致的请求。
注意：如果在受CloudFlare CDN保护的URL上请求，则应将其设置为false，以防止CloudFlare错误地检测到反向代理循环并返回403错误。
proxyHeadersIgnore
- Default:
['host', 'accept']
只有在 proxyHeaders 设置为true 时才有效。将不需要的请求标头移除到SSR中的API后端。
附加问题时间：2019-10-9
问题一：很多才接触的小伙伴不知道怎样在js文件中使用$axios
答：普通js文件需要在plugins插件目录中添加一个.js文件，然后在nuxt.config.js插件配置中添加该插件
示例:
plugins目录添加的.js
export default (context, inject) => {
// context.$axios 获取axios
}
nuxt.config.js Nuxt配置文件
plugins: [
'~plugins/**',
'~plugins/**'
]
