The installation
$ npm install axios --save
Copy the code
use
~/nuxt.config.js
Introduce plug-ins and start the middleware
plugins: ['~/plugins/api.js'].Copy the code
~/plugins/api.js
import Vue from 'vue'
import API from '~/api/index.js'
Vue.prototype.$API = API
Vue.use(API)
Copy the code
~/api/index.js
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)
}
}
Copy the code
~/api/http.js
Create a local language library
import axios from 'axios' / / introduce axios
import qs from 'qs' // Introduce the QS module, which is used to serialize post data, as described later
import {
baseUrl
} from './env.js'
const TOKEN = '7bf2b13020e1ed2278db4bba3f5e7a53102cbc37'
// vuex
// import * as Tool from 'UTIL/vuex'
/ / axios configuration
axios.defaults.timeout = 5000 // Set request timeout
axios.defaults.baseURL = baseUrl // The default request address
axios.defaults.headers.common['Authorization'] = `token ${TOKEN}` // Authorization
axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded' // Request header Settings
/ / request
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 (' error passing argument ', 'fail')
return Promise.reject(error)
})
/ / return
axios.interceptors.response.use((res) = > {
// console.log(res)
// Interceptor configuration
// if (res.data.success) {
// Tool.toast(res.data.msg)
// Tool.close()
// return Promise.reject(res)
// }
// Tool.close()
// return res // all data
return res.data / / data data
}, (error) => {
// The request failed
// tool.toast (' network exception ', '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
})
Copy the code
~/api/env.js
Add different languages for different pages
/** * Configure the switch between the compile environment and the online environment ** baseUrl: domain name * routerMode: routing mode * imgBaseUrl: domain name of the image ** /
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
}
Copy the code
~/store/index.js
import Locale from '~/locales'
export const state = (a)= > ({
locales: Locale(),
locale: Locale()[0]})export const mutations = {
SET_LANG(state, locale) {
if(state.locales.indexOf(locale) ! = =- 1) {
console.log(locale)
state.locale = locale
}
}
}
Copy the code
methods
POST
this.$API.POST(' ').then((res) = > {
console.log(res)
})
Copy the code
GET
this.$API.GET(' ').then((res) = > {
console.log(res)
})
Copy the code