一、介绍
对axios进行封装以及将API接口按业务模块统一管理,有助于我们简化代码,方便后期维护;也可以方便的统一对请求API进行修改
二、Vue实战
1、Axios全局配置文件
import axios from 'axios'
import { Message } from 'element-ui'
// 创建axios实例
const service = axios.create({
baseURL: 'http://localhost:8090', // api 的 base_url
timeout: 20000 // 请求超时时间
})
// request拦截器
service.interceptors.request.use(
config => {
//每次请求之前判断vuex中是否存在token
//如果存在,则统一在http请求的header上都加上token,以便后台根据token判断当前登陆情况
//即使本地存在token,也有可能过期,所以需要对返回状态进行判断
const token = localStorage.getItem("token");
if (token && (config.headers.Authorization = token)) {
config.headers['Authorization'] = token;
}
return config
},
error => {
// Do something with request error
Promise.reject(error)
}
)
// response 拦截器
service.interceptors.response.use(
response => {
const res = response.data
if (res.code < 0) {
Message({
message: res.message,
type: 'error',
duration: 5 * 1000
})
return Promise.reject('error')
} else {
// 注意:这里务必要返回配置对象,否则请求就停在这里出不去了
return response.data
}
},
error => {
Message({
message: error.message,
type: 'error',
duration: 5 * 1000
})
// 如果请求出错了(还没有发出去)会进入这里
return Promise.reject(error)
}
)
// 响应拦截器
export default service
2、设置统一API管理
这里注意的是@代表的是src目录,同时配置接口后要记得返回
import request from '@/utils/request'
export default{
//查询订单列表
list() {
return request({
url: '/api/order-info/list',
method: 'get'
})
},
queryOrderStatus(orderNo) {
return request({
url: '/api/order-info/query-order-status/' + orderNo,
method: 'get'
})
}
}
3、业务逻辑
最后在业务逻辑处理页面进行调用
<script>
import orderInfoApi from "../api/orderInfo"
export default {
methods: {
//显示订单列表
showOrderList(){
orderInfoApi.list().then((response) => {
this.list = response.data.list;
});
}
}
}
</script>