安装axios
# yarn
yarn add axios
# npm
npm i axios --save
创建目录
一般在/src/assets/
目录下创建js
目录,新建request.js
文件
封装axios拦截器
request.js
import axios from 'axios'
// import { getToken } from '@/assets/js/auth'
// import { removeToken } from './auth'
// import { Message } from 'element-ui'
// import router from '../../router'
// import { Dialog, Toast } from 'vant'
// import store from '@/store'
axios.defaults.headers['Content-Type'] = 'application/json;charset=utf-8'
const service = axios.create({
// baseURL: "http://127.0.0.1:11231",
baseURL: "http://your.server.host:11231", // url = base url + request url
timeout: 15000 // request timeout
})
// 请求拦截器
service.interceptors.request.use(
config => {
// 是否需要设置 token
// if (getToken()) { // 这用的cookies里的?
// config.headers['Authorization'] = getToken() // 让每个请求携带自定义token
// }
return config
},
error => {
// do something with request error
console.log(error) // for debug
return Promise.reject(error)
}
)
// 响应拦截器
service.interceptors.response.use(
response => {
const res = response.data
// -1 请求失败 -2 Token失效 可以自己定义错误代码拦截
if (res.status === -1) {
//Toast.fail(res.msg);
// this.$message.error(res.msg)
// Message({
// message: res.msg || 'Error',
// type: "error"
// })
// return Promise.reject(new Error(res.msg || 'Error'))
} else if (res.status === -2) {
// Dialog.confirm({
// title: '登录验证失效, 请重新登录',
// message: '',
// confirmButtonText: '重新登陆',
// cancelButtonText: '取消'
// }).then(() => {
// store.dispatch('Logout').then(() => {
// router.push({
// name: 'login',
// })
// // location.reload()
// })
// })
// removeToken()
// Message({
// message: "登录验证失效, 请重新登录",
// type: "error"
// })
// router.push('/login')
return Promise.reject(new Error(res.msg || 'Error'))
} else {
return res
}
},
error => {
return Promise.reject(error)
}
)
const api = {
getXXX: (data) => service({
url: '/api/v2/XXXXXX',
method: 'get',
params: data
}),
setXXX: (data) => service({
url: '/api/v2/XXXXXX',
method: 'post',
data
}),
}
export default api
注释的部分为项目中实用的一些功能,有elementui的提示框,有vant的Toast等。还有用js-cookie的Token认证,选择打开注释就可以了
api使用
main.js
里全局引用
import api from './assets/js/request'
Vue.prototype.$api = api
xxx.vue
里调用API
GET
async OnXxxxxxx() {
let res = await this.$api.getXXX({
// 有参数
sn: this.sn,
num: this.num,
})
let res = await this.$api.getXXX() //无参数
// console.log(res)
if (res.status == 1) {
//...
} else {
Toast(res.msg)
}
},
POST
async Commit() {
let res = await this.$api.setXXX({
type: this.type, //Post的参数
priority: this.priority,
title: this.title,
message: this.message,
contact: this.contact,
})
// console.log(res)
if (res.status == 1) {
//...
}
},