封装到一个http.js文件中,内容如下:
import Vue from 'vue'
import axios from 'axios'
axios.defaults.baseURL = 'http://localhost:7001' // 给axios设置默认的url
axios.defaults.timeout = 30000
axios.interceptors.request.use(
(config) => {
const url = config.url.split('/')
if (url[url.length] !== 'login') {
config.headers.common.Authorization = 'Bearer ' +
localStorage.getItem('Token')
}
return config
},
(error) => {
// 请求错误处理
return Promise.reject(error)
}
)
Vue.prototype.$http = axios // 将axios添加到Vue的原形,这样一切vue实例都可以使用该对象
在main.js中添加:
import './http'
使用案例
this.$http({
url: '/login', // 请求地址
method: 'post', // 设置请求方式
// headers: {
// 'Content-Type': 'application/json'
// 切记 token 不要直接发送,要在前面加上 Bearer 字符串和一个空格
// Authorization: `Bearer ${token}`
// },
data: params // 把注册参数放进请求中
})
.then(e => {
// 处理请求返回的结果
// console.log(e.data)
if (e.data.code === '1') {
const token = e.data.token
// 存入token
localStorage.setItem('Token', token)
Toast({
message: '登录成功',
position: 'middle',
duration: 3000
})
this.$router.push({
name: 'Index'
})
} else {
Toast({
message: '登录失败',
position: 'middle',
duration: 3000
})
}
})
.catch(e => {
// 处理请求发生的异常
console.log(e)
})
//或者直接
//this.$htttp.get(url)
//this.$htttp.post(url,params)