Vue SSR Nuxt axios封裝

安裝

$ npm install axios --save
複製代碼

使用

~/nuxt.config.js

引入插件，啓動中間件

plugins: ['~/plugins/api.js'],
複製代碼

~/plugins/api.js

import Vue from 'vue'
import API from '~/api/index.js'

Vue.prototype.$API = API
Vue.use(API)
複製代碼

~/api/index.js

/** * api接口統一管理 * import API from 'API' * Vue.prototype.$API = API * Vue.use(API) * * this.$API.Login() */
import {get, post} from './http'

export default {
  POST (link) {
    return post(link)
  },
  GET (link) {
    return get(link)
  }
}

複製代碼

~/api/http.js

建立本地語言庫

import axios from 'axios' // 引入axios
import qs from 'qs' // 引入qs模塊，用來序列化post類型的數據，後面會提到
import {
  baseUrl
} from './env.js'

const TOKEN = '7bf2b13020e1ed2278db4bba3f5e7a53102cbc37'

// vuex
// import * as Tool from 'UTIL/vuex'

// axios 配置
axios.defaults.timeout = 5000 // 設置請求超時
axios.defaults.baseURL = baseUrl // 默認請求地址
axios.defaults.headers.common['Authorization'] = `token ${TOKEN}` // Authorization
axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded' // 請求頭的設置

// 請求
axios.interceptors.request.use((config) => {
  if (config.method === 'post') {
    config.data = qs.stringify(config.data)
  }
  let URL = config.url.split(config.baseURL)
  // Tool.open(URL[1], config.showLoading)
  return config
}, (error) => {
  // Tool.toast('錯誤的傳參', 'fail')
  return Promise.reject(error)
})

// 返回
axios.interceptors.response.use((res) => {
  // console.log(res)
  // 攔截器配置
  // if (res.data.success) {
  // Tool.toast(res.data.msg)
  // Tool.close()
  // return Promise.reject(res)
  // }
  // Tool.close()
  // return res // 所有數據
  return res.data // data數據
}, (error) => {
  // 請求失敗
  // Tool.toast('網絡異常', 'fail')
  // Tool.close()
  return Promise.reject(error)
})

export const get = (url, showLoading) => axios.get(url, {
  showLoading: showLoading
})

export const post = (url, params, showLoading) => axios.post(url, params, {
  showLoading: showLoading
})
複製代碼

~/api/env.js

更加不一樣頁面添加不用的語言

/** * 配置編譯環境和線上環境之間的切換 * * baseUrl: 域名地址 * routerMode: 路由模式 * imgBaseUrl: 圖片所在域名地址 * */

let baseUrl
let routerMode
const imgBaseUrl = 'https://fuss10.elemecdn.com'

if (process.env.NODE_ENV === 'development') {
  baseUrl = 'https://api.github.com/'
  routerMode = 'hash'
} else {
  baseUrl = 'https://api.github.com/'
  routerMode = 'hash'
}

export {
  baseUrl,
  routerMode,
  imgBaseUrl
}

複製代碼

~/store/index.js

import Locale from '~/locales'

export const state = () => ({
  locales: Locale(),
  locale: Locale()[0]
})

export const mutations = {
  SET_LANG(state, locale) {
    if (state.locales.indexOf(locale) !== -1) {
	  	console.log(locale)
      state.locale = locale
    }
  }
}
複製代碼

方法

POST

this.$API.POST('').then((res) => {
  console.log(res)
})
複製代碼

GET

this.$API.GET('').then((res) => {
  console.log(res)
})
複製代碼