Vue学习axios封装post、get(三)
- 安装并引入elementui
cnpm install element-ui --save
- 在main.js中引入全局样式
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
Vue.use(ElementUI)
- service.js
import axios from 'axios'
import Cookies from 'js-cookie'
import router from './router'
axios.defaults.timeout = 9999999
axios.defaults.baseURL = 'http://localhost:8000/'
axios.interceptors.request.use(
config => {
let token = Cookies.get('token')
if (config.method === 'post') {
config.data = config.data
if (token) {
config.data.token = token
}
config.headers = {
'Content-Type': 'application/x-www-form-urlencoded'
}
} else if (config.method === 'get') {
config.params.token = token
config.headers = {
'Content-Type': 'application/x-www-form-urlencoded'
}
}
return config
}, error => {
console.log(error)
}
)
axios.interceptors.response.use(
response => {
if (response.data.errCode === 2) {
router.push({
path: '/user/login',
querry: { redirect: router.currentRoute.fullPath }
})
}
return response
},
error => {
return Promise.reject(error)
}
)
export function get (url, params = {}) {
return new Promise((resolve, reject) => {
axios({
url: url,
method: 'GET',
params: params,
transformRequest: [function (data) {
let ret = ''
for (let it in data) {
ret += encodeURIComponent(it) + '=' + encodeURIComponent(data[it]) + '&'
}
return ret
}]
})
.then(res => {
if (res.data.code === 1001) {
this.$Message.warning('登录超时,' + res.data.message)
this.$router.push({ path: '/' })
return
}
resolve(res.data)
})
.catch(err => {
reject(err)
})
})
}
export function post (url, data = {}) {
return new Promise((resolve, reject) => {
axios({
url: url,
method: 'POST',
data: data,
transformRequest: [function (data) {
console.log(data)
let ret = ''
for (let it in data) {
ret += encodeURIComponent(it) + '=' + encodeURIComponent(data[it]) + '&'
}
return ret
}]
})
.then(res => {
if (res.data.code === 1001) {
this.$Message.warning('用户超时' + res.data.message)
this.$router.push({ path: '/' })
return
}
resolve(res.data)
})
.catch(err => {
reject(err)
})
})
}
export function get_from (URL, PARAMS) {
var p = new Promise((resolve, reject) => {
var temp = document.createElement('form')
temp.action = URL
temp.method = 'get'
temp.style.display = 'none'
for (var x in PARAMS) {
var opt = document.createElement('textarea')
opt.name = x
opt.value = PARAMS[x]
temp.appendChild(opt)
}
document.body.appendChild(temp)
temp.submit()
this.$Loading.finish()
resolve(temp)
})
return p
}
export function up_excel (URL, PARAMS) {
return new Promise((resolve, reject) => {
let token = this.$Cookies.get('token')
let config = {
headers: {
'Content-Type': 'multipart/form-data'
}
}
PARAMS.append('token', token)
axios.post(URL, PARAMS, config)
.then(res => {
resolve(res.data)
})
.catch(err => {
reject(err)
})
})
}
- main.js中暴露接口
import { post, get, get_from, up_excel } from './serveice'
Vue.prototype.$get = get
Vue.prototype.$get_from = get_from
Vue.prototype.$up_excel = up_excel
Vue.prototype.$post = post