1 在src下新建一个util/api文件夹 并在文件夹下新建一个axios-config.js文件 文件内容如下：
import axios from 'axios';
import {baseUrl} from '@/config/baseUrl.js';
import { Message } from 'element-ui'
let NET_CONNECT = false
// axios.defaults.withCredentials = true; //是否在请求中使用cookie
const service = axios.create({
timeout: 6000,
baseURL: baseUrl
})
// 请求前拦截
service.interceptors.request.use(config => {
//处理IE浏览器get请求缓存问题
if(config.method === 'get' && config.params) {
config.params['time'] = new Date().getTime()
}
//如果登录需要将token加载header上这样设置
const token = localStorage.getItem('access-token')
if(token) {
config.headers['Authorization'] = 'Bearer '+token
config.headers['access-token'] = token?token:''
}
return config
},error => {
return Promise.reject(error)
})
// 请求响应拦截
service.interceptors.response.use(response => {
const responseCode = response.status
if(responseCode === 200 || responseCode === 201) {
if(response.data.code === 0) {
return Promise.resolve(response.data)
} else {
// TODO 可以统一样式来提示message
// Message.error({
// message: response.data.message
// })
return Promise.reject(response.data)
}
} else {
this.$message(response.data.message)
return Promise.reject(response);
}
},error => {
if(!error.response) {
if(!NET_CONNECT) {
NET_CONNECT = true
console.error('请求失败，请检查网络是否正常')
}
return
}
const responseCode = error.response.status
if(responseCode==401||responseCode==403){
localStorage.clear()
console.log('登录失效，请重新登录')
return Promise.reject(false)
}else if(responseCode==404){
console.log('请求不存在')
}else{
console.log(error.response.data.msg)
}
return Promise.reject(error)
})
export default service
2 在axios-config.js同级目录下新建一个api-list.js文件 内容如下:
let apiList = {
list: {
getList: 'orders',//获取订单列表接口
deliveryGoods: 'orders/delivery',//订单确认收货接口
payment: 'pay',//订单支付接口 扫码支付
pay: 'orders/pay',//订单支付接口 预存款、余额支付
getAppId:'get/secret',//获取appid
getUserInfo: 'scan/code',//获取用户信息接口
paytype: 'account/paytype',//获取用户的支付方式
getSign: 'orders/payment/',//获取预付款支付需要字段sign
getImportList:'import',//获取导入列表
importDelete:'import/delete',//删除导入查询结果
cancel:'pay/cancel',//订单列表取消订单
payStatus:'pay/state',//获取订单支付状态
}
}
export default apiList;
3 在页面中发起http请求时 这样使用
get请求
async getList(page) {
let params = {page,};
try {
let data = await this.$http.get(this.$api.list.getList, { params });
this.lists = data.data.lists;
this.count = data.data.count;
this.pageSize = data.data.page_num;
this.$nextTick(() => {
// 以服务的方式调用的 Loading 需要异步关闭
loadingInstance.close();
});
} catch (err) {
this.$nextTick(() => {
// 以服务的方式调用的 Loading 需要异步关闭
loadingInstance.close();
});
console.log(err);
this.$message(err);
}
},
post请求
async getSign(pay_type,order_id,loadingInstance) {
try {
let data = await this.$http.post(this.$api.list.getSign, { order_id:order_id });
console.log("获取支付sign", data.data);
this.modalContent = data.data;
this.modalContent["fullname"] = JSON.parse(localStorage.getItem("userInfo")).fullname;
if(data.code == 0){
if(pay_type == 0){
this.wechatPay(order_id,loadingInstance);
}else{
this.$nextTick(()=>{
loadingInstance.close();
});
this.showModal = true;
}
}else{
this.$nextTick(()=>{
loadingInstance.close();
});
this.$message.error(data.message);
}
} catch (err) {
console.log(err);
this.$nextTick(()=>{
loadingInstance.close();
})
this.$message.error(err);
}
},
这样就可以正常的请求数据啦~
