axios的二次封装
1.src根目录下创建request文件夹
2.request文件夹下新建Service.js
import axios from 'axios'
import { Message, Loading } from 'element-ui'
const ConfigBaseURL = 'http://localhost:3000/' // 默认路径,这里也可以使用env来判断环境
let loadingInstance = null // 这里是loading
// 使用create方法创建axios实例
const Service = axios.create({
timeout: 8000, // 请求超时时间
baseURL: ConfigBaseURL,
method: 'post',
headers: {
'Content-Type': 'application/json;charset=UTF-8'
}
})
// 添加请求拦截器
Service.interceptors.request.use((config) => {
//注入token等,token失效的主动介入
loadingInstance = Loading.service({
lock: true,
text: 'loading...'
})
return config
})
// 添加响应拦截器
Service.interceptors.response.use(
(response) => {
loadingInstance.close()
// console.log(response)
// 处理返回数据
// Token失效被动介入
return response.data
},
(error) => {
console.log('TCL: error', error)
const msg = error.Message !== undefined ? error.Message : ''
Message({
message: '网络错误' + msg,
type: 'error',
duration: 3 * 1000
})
loadingInstance.close()
return Promise.reject(error)
}
)
export default Service
3.request文件夹下新建Request.js
import Service from './Service'
// 获取所有用户数据
export function getUsers (url) {
return Service({
method: 'get',
url: url
})
}
// 根据id获取用户详情
export function getUserInfoById (url, data) {
return Service({
method: 'get',
url: url + '/' + data
})
}
4、组件使用方式
async getUsers () {
const data = await getUsers('/users')
// console.log(data)
this.userList = data // userList 为 data中用户数据
}