地址：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/**'
]
