1.
// 通用接口调用模块
import axios from 'axios'
import store from '@/store'
import router from '@/router'
// 接口调用基准路径
export const baseURL = ''
// 创建一个独立的实例对象
const instance = axios.create({
baseURL: baseURL
})
// 响应拦截器
instance.interceptors.response.use(res => {
// 把返回的数据去掉一层data属性
return res.data
}, err => {
// 处理token实现的问题
if (err.response && err.response.status === 401) {
// token失效了,跳转到登录页
return router.push('/login')
}
return Promise.reject(err)
})
// 请求拦截器
instance.interceptors.request.use(config => {
// 统一添加请求头
const token = store.state.user.profile.token
if (token) {
// 已经登录成功,统一添加token
config.headers.Authorization = `Bearer ${token}`
}
return config
}, err => {
return Promise.reject(err)
})
// 封装通用的接口调用方法
export default (options) => {
return instance({
method: options.method || 'GET',
url: options.url,
// ES6规则:对象的key可以是动态的变量
[options.method.toUpperCase() === 'GET' ? 'params' : 'data']: options.data
})
}
// import request from './request.js'
// request({
// method: 'post',
// url: '#',
// data: {
// account: 'admin',
// pwd: 123
// }
// })
2
1. request.js
// 导出一个axios的实例 而且这个实例要有请求拦截器 响应拦截器
import axios from 'axios'
// const service = axios.create() // 创建一个axios的实例
const service = axios.create({
// 统一封装 线上演示地址
// baseURL: 'http://ihrm-java.itheima.net',
// 环境变量的基地址配置 带有api
baseURL: process.env.VUE_APP_BASE_API, // url = base url + request url
// withCredentials: true, // send cookies when cross-domain requests
timeout: 5000 // request timeout
})
// service.interceptors.request.use() // 请求拦截器
// service.interceptors.response.use() // 响应拦截器
import store from '@/store'
import router from '@/router'
// 请求拦截器
service.interceptors.request.use(
config => {
const token = store.state.user.token
// 如果当前存有token,就加在请求头上
if (token) {
config.headers['Authorization'] = `Bearer ${token}`
}
return config
},
error => {
return Promise.reject(error)
}
)
// // 响应拦截器
service.interceptors.response.use(
response => {
// console.log('响应拦截器', response)
if (response.data.success) {
// 操作成功 直接返回data promise会在外面套层壳
return response.data
} else {
// 抛出错误
// 如果success为false 业务出错,直接触发reject
// 被catch分支捕获
return Promise.reject(new Error(response.data.message))
}
},
error => {
// do something with request error
// console.log(error) // for debug
// token 失效
if (error.response && error.response.data && error.response.data.code === 10002) {
store.dispatch('user/userLayout') //清空信息
// router.push('/login') // 返回login页面,补充回调地址
router.push('/login?return_url=' + encodeURIComponent(router.currentRoute.fullPath))
}
return Promise.reject(error)
}
)
export default service // 导出axios实例
2. api.js
import request from '@/utils/request'
// get请求
export function getRoles(params) {
return request({
url: '/sys/role',
method: 'GET',
params
})
}
// post请求
export function addRolesAPI(data) {
return request({
url: '/sys/role',
method: 'POST',
data
})
}
3. 使用接口页面
import { addDepartments } from '@/api/departments'
async doAdd() {
const res = await addDepartments({
// 参数
code: this.form.code,
introduce: this.form.introduce,
manager: this.form.manager,
name: this.form.name,
pid: this.newId
})
console.log('res', res)
// 通知父组件更新
this.$emit('success')
},