[axios npm地址]https://www.npmjs.com/package/vue-axios
安装日常
npm install --save axios vue-axios
在main.js中
```import axios from 'axios'
```import VueAxios from 'vue-axios'
```Vue.use(VueAxios, axios)
-----------------------------------------------------------------
####一般情况下,我们未来开发方便会对axios进行再次封装,新建axios文件夹,在下面创建axiosConfig.js
import axios from 'axios';
import Message from ''
import QS from 'qs'; //axios安装时会自动安装,不需要重新安装
const instance = axios.create({
baseURL: process.env.API_ROOT,
timeout: 3000,
});
instance.defaults.withCredentials = true;
const pending = []; // 声明一个数组用于存储每个ajax请求的取消函数和ajax标识
const cancelToken = axios.CancelToken;
const removePending = (config) => {
for (const p in pending) {
if (pending[p].u === `${config.url}&${config.method}`) { // 当当前请求在数组中存在时执行函数体
pending[p].f(); // 执行取消操作
pending.splice(p, 1); // 把这条记录从数组中移除
}
}
};
// 添加请求拦截器
axios.interceptors.request.use((config) => {
removePending(config); // 在一个ajax发送前执行一下取消操作
config.cancelToken = new cancelToken((c) => {
// 用接口名拼接请求方式进行标记
pending.push({ u: `${config.url}&${config.method}`, f: c });
});
return config;
}, error => Promise.reject(error));
instance.interceptors.response.use(
(res) => {
let R = null;
//每个项目后端返回的数据结构不同,这里根据不同情况处理不同
if (res.status === 200) {
const {
data: {
data: resData, success = false, errorCode = '', errorMsg = '',
},
} = res;
//true时统一resolve,false时reject
if (success) {
R = resData;
return Promise.resolve(R);
}
R = [errorCode, errorMsg];
return Promise.reject(R);
}
return `error${res}`;
},
(error) => {
Message.error({
message: error.message || '接口出错',
});
if (error.response) {
return Promise.reject(error.response.data);
}
return Promise.reject([-1, '未知错误']);
},
);
export default {
get(url, params) {
return new Promise((resolve, reject) => {
instance.get(url, { params })
.then((res) => {
resolve(res);
})
.catch((err) => {
console.error(`GET请求url(${url})失败,错误如下:`);
console.error(err);
reject(err);
});
});
},
// 正常post请求
post(url, params = {}) {
return new Promise((resolve, reject) => {
// console.debug('post params=',params);
instance.post(url, QS.stringify({ ...params }))
.then((res) => {
resolve(res);
})
.catch((err) => {
reject(err);
});
});
},
// 发送对象请求
postJson(url, params) {
return new Promise((resolve, reject) => {
instance.post(url, params, { headers: { 'Content-Type': 'application/json' } })
.then((res) => {
resolve(res);
})
.catch((err) => {
reject(err);
});
});
},
postFile(url, formData) {
return new Promise((resolve, reject) => {
instance.post(url, formData, {
headers: {
'Content-Type': 'multipart/form-data',
},
})
.then((res) => {
resolve(res);
})
.catch((err) => {
console.error(`POST请求url(${url})失败,错误如下:`);
console.error(err);
reject(err);
});
});
},
};