文档
1. 拦截器
1.1 请求拦截器
axios.interceptors.request.use(function (config) {
// 在发送请求之前做些什么
return config;
}, function (error) {
// 对请求错误做些什么
return Promise.reject(error);
});
// 判读用户token是否存在
export const uaFlag = function () {
return true
// let idToken = localStore.getLocalStore('token')
// if (idToken) {
// return true
// } else {
// console.warn('require user_auth')
// window.location.href = LOGIN_URL(true)
// return false
// }
}
// 统一设置token信息
// const idToken = localStore.getLocalStore('token')
// if(idToken){
// axios.defaults.headers.common['AUTHORIZATION'] = idToken
// }
// request
// POST传参序列化(添加请求拦截器)
axios.interceptors.request.use((config) => {
if (config.method === 'post') {
// 序列化
// config.data = qs.stringify(config.data);
}
if (uaFlag) {
// 上面统一设置了token，也可以在这里设置
// let idToken = localStore.getLocalStore('token')
// config.headers['AUTHORIZATION'] = idToken
}
return config
}, (error) => {
return Promise.reject(error)
})
1.2 响应拦截器
axios.interceptors.response.use((response) => {
// 请求已发出，服务器响应的状态码在 2xx 范围内的都会在这里
console.log(response.status);
console.log(response.statusText);
console.log(response.headers);
console.log(response.config);
return response
}, (error) => {
if (error.response) {
// 请求已发出，但服务器响应的状态码不在 2xx 范围内
console.log(error.response.data); // 一般错误信息会放在data.message下
console.log(error.response.status);
console.log(error.response.headers);
} else {
// Something happened in setting up the request that triggered an Error
// 超时等会在这里触发，获取错误信息，直接使用error.message即可
console.log('Error', error.message);
}
console.log(error.config)
return Promise.reject(error);
}
// response
// 返回状态判断(添加响应拦截器)
axios.interceptors.response.use((response) => {
// 一般restful规范的接口在这里接收到的都是正确数据，直接返回数据即可
return response.data
// 不是restfull规范的接口，错误信息也是通过200状态码返回的，里面的格式一般会是
// success
// {
// code: 0,
// data: [],
// message: 'ok'
// }
// // error
// {
// code: -1,
// message: '错误信息'
// }
// console.log(response.data);
// if (response.data.code !== 0) {
// return Promise.reject(response.data.message)
// } else {
// return response.data.data
// }
}, (error) => {
if (error.response) {
if (error.response.status === 401) { // 未登陆
vm.$router.push({
name: 'login'
})
}
// 一般的错误信息都会放在data.message中，对于restful规范的接口，错误信息可能不在这里，需要根据实际情况捕获。如：有的在response.text中
return Promise.reject(error.response.data.message)
} else {
// Something happened in setting up the request that triggered an Error
// 超时等会在这里触发，获取错误信息，直接使用error.message即可
return Promise.reject(error.message)
}
})
export const _get = (url, params = null) => {
const promise = axios.get(url, { params: params })
return new Promise((resolve, reject) => {
promise.then((result) => {
resolve(result)
}).catch((error) => {
// 一般会有弹框显示错误信息
// 如果没有特殊要求，在这里打印错误即可，在调用处不用捕获错误信息，因为在调用处捕获到错误一般也只是打印一下错误信息。
reject(error) // 拦截器已过滤，这里是错误信息内容
})
})
}
2. 一个完整的api-util.js文件
import axios from 'axios'
// import qs from 'qs'
import Vue from 'vue'
import router from '@/router'
// import localStore from './localStore'
let vm = new Vue({ router })
const ENV = process.env.NODE_ENV
const baseUrl = ENV === 'development'
? 'http://www.imooc.com/api'
: ENV === 'production'
? 'http://www.imooc.com/api'
: 'http://www.imooc.com/api'
axios.defaults.baseURL = baseUrl
axios.defaults.timeout = 10000
axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded;charset=UTF-8'
// 防止ie缓存
if (navigator.userAgent.indexOf('MSIE 9') > -1) {
axios.defaults.headers.common['If-Modified-Since'] = '0'
}
export const uaFlag = function () {
return true
// let idToken = localStore.getLocalStore('token')
// if (idToken) {
// return true
// } else {
// console.warn('require user_auth')
// window.location.href = LOGIN_URL(true)
// return false
// }
}
// 统一设置token信息
// const idToken = localStore.getLocalStore('token')
// if(idToken){
// axios.defaults.headers.common['AUTHORIZATION'] = idToken
// }
// request
// POST传参序列化(添加请求拦截器)
axios.interceptors.request.use((config) => {
if (config.method === 'post') {
// 序列化
// config.data = qs.stringify(config.data);
}
if (uaFlag) {
// 上面统一设置了token，也可以在这里设置
// let idToken = localStore.getLocalStore('token')
// config.headers['AUTHORIZATION'] = idToken
}
return config
}, (error) => {
return Promise.reject(error)
})
// response
// 返回状态判断(添加响应拦截器)
axios.interceptors.response.use((res) => {
return res.data
}, (error) => {
if (error.response) {
if (error.response.status === 401) { // 未登陆
vm.$router.push({
name: 'login'
})
}
return Promise.reject(error.response.data.message)
} else {
return Promise.reject(error.message)
}
})
export const joinURL = function (...urls) {
return '/' + urls.join('/')
}
export const _get = (url, params = null) => {
const promise = axios.get(url, { params: params })
return new Promise((resolve, reject) => {
promise.then((result) => {
resolve(result)
}).catch((error) => {
// 一般会有弹框显示错误信息
reject(error) // 拦截器已过滤，这里是错误信息
})
})
}
export const _post = (url, data) => {
const promise = axios.post(url, data)
return new Promise((resolve, reject) => {
promise.then((result) => {
resolve(result)
}).catch((error) => {
// 一般会有弹框显示错误信息
reject(error) // 拦截器已过滤，这里是错误信息
})
})
}
export const _patch = (url, data) => {
const promise = axios.patch(url, data)
return new Promise((resolve, reject) => {
promise.then((result) => {
resolve(result)
}).catch((error) => {
// 一般会有弹框显示错误信息
reject(error) // 拦截器已过滤，这里是错误信息
})
})
}
export const _delete = (url) => {
const promise = axios.delete(url)
return new Promise((resolve, reject) => {
promise.then((result) => {
resolve(result)
}).catch((error) => {
// 一般会有弹框显示错误信息
reject(error) // 拦截器已过滤，这里是错误信息
})
})
}
3. api.js文件
import {
_get,
_post,
joinURL
} from './util'
export default {
login (data) {
let url = '/login'
return _post(url, data)
},
listUser () {
let url = joinURL('users')
return _get(url)
},
listHomeSlider () {
let url = joinURL('home', 'sliders')
return _get(url)
}
}
4. 组件中使用
import api '@/api/api'
...
methods: {
getSlider () {
this.sliderLoading = true
api.listHomeSlider().then(res => {
this.sliderLoading = false
if (res.code === 0) {
this.sliders = res.slider
} else {
this.sliders = []
console.log('获取数据失败', res.message)
}
}).catch(() => {
this.sliderLoading = false
this.sliders = []
})
}
}
