开发中的axios
[axios npm地址]https://www.npmjs.com/package/vue-axios
安装日常
【开发中的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);
});
});
},
};
推荐阅读
- 热闹中的孤独
- JS中的各种宽高度定义及其应用
- 深入理解Go之generate
- 我眼中的佛系经纪人
- 《魔法科高中的劣等生》第26卷（Invasion篇）发售
- 2020-04-07vue中Axios的封装和API接口的管理
- Android中的AES加密-下
- 标签、语法规范、内联框架、超链接、CSS的编写位置、CSS语法、开发工具、块和内联、常用选择器、后代元素选择器、伪类、伪元素。
- 放下心中的偶像包袱吧
- C语言字符函数中的isalnum()和iscntrl()你都知道吗