首先 在src里面创建config目录
这是api.url.js里面的代码,根据自己项目需求定义
下面 重点来了
import axios from 'axios'
import qs from 'qs'
import apiUrl from '@/config/api.url.js'
// axios 默认配置
axios.defaults.timeout = 5000 // 超时默认设置
axios.defaults.baseURL = apiUrl.baseURL // 默认baseUR
// axios.defaults.responseType = 'json' // 默认数据相应类型
axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded'
axios.defaults.withCredentials = true // 表示跨域请求时是否需要使用凭证
export default (url, data = {}, type = 'GET') => {
url = apiUrl.baseURL + url
type = type.toUpperCase()
/*
get 方法封装
@param url
@param data
@returns {Promise}
*/
if (type === 'GET') {
return new Promise((resolve, reject) => {
axios.get(url, {params: data})
.then(res => {
res = res.data
if (res.code === 200) {
resolve(res.data)
} else {
reject(res.data)
}
}, err => {
console.log(err)
reject(err)
})
})
}
/*
post 方法封装
@param url
@param data
@returns {Promise}
*/
if (type === 'POST') {
return new Promise((resolve, reject) => {
axios.post(url, qs.stringify(data))
.then(res => {
res = res.data
if (res.code === 200) {
resolve(res.data)
} else {
reject(res.data)
}
}, err => {
reject(err)
})
})
}
}
使用如下:
注意我在main.js 有几行代码
import http from '@/config/index.js' // axios二次封装配置
import apiUrl from '@/config/api.url.js' // 各种url暴露
Vue.prototype.$http = http
getTableList (limit, page) {
this.stop && clearTimeout(this.stop)
this.$http('/get-user-list', {
'limit': limit,
'page': page
}, 'get')
.then((res) => {
this.loading = false
this.pagination.pageCount = res.count
this.pagination.limit = this.pagination.limit
this.info = res.list
})
.catch((error) => {
this.loading = false
this.errorLoading = true
this.$message.error('获取失败!')
console.warn(error)
})
}