二次封装
axios
和api
,新建名为request
文件夹,在文件夹中新建两个名为http
和api
的js
文件,文件夹名称和文件名自定义,不属于硬性要求,只是文件夹的位置一定要在src
根目录下,并且src
是其直接父级。在使用过程中不一定都要通过api
文件来请求数据,api
文件只是统一接口,不是请求的出口,而axios
才是请求的最终出口。可以直接引用二次封装的axios
,也可以直接使用原始的axios
。这里的封装是为了解决统一性,也使得整个项目更简洁,杜绝到处出现后端接口地址的现象。
注释
本次封装的
axios
用在vue2
中,所以特别需要注意axios
、qs
和element-ui
的版本。
安装axios
npm install axios@0.21.1 --save
cnpm install axios@0.21.1 --S
yarn add axios@0.21.1
安装qs
npm install qs@6.5.3 --save
cnpm install qs@6.5.3 --S
yarn add qs@6.5.3
安装element-ui
npm install element-ui@2.15.12 --save
cnpm install element-ui@2.15.12 --S
yarn add element-ui@2.15.12
代码
// ^0.21.1
import axios from 'axios';
// ^6.5.3
import qs from 'qs';
// ^2.15.12
import { Message } from 'element-ui';
// 创建axios实例
const request = axios.create({
// 后端服务器地址
baseURL: 'url',
// 请求超时时间
timeout: 2000
});
// 响应错误码封装
function errorMsg(status, msg) {
status = parseInt(status);
let result = '';
switch (status) {
case 400:
result = msg ? msg : '请求错误';
break
case 404:
result = msg ? msg : `请求地址出错`;
break
case 500:
result = msg ? msg : '服务器内部错误';
break
case 503:
result = msg ? msg : '服务不可用';
break
default:
result = msg;
}
return result;
}
// request拦截器
request.interceptors.request.use(config => {
// 配置所需请求投
config.headers['Authorization'] = "token";
config.headers['Access-Control-Allow-Origin'] = '*';
if (config.method === 'post') {
// post 请求
config.headers["content-type"] = "application/x-www-form-urlencoded";
// 序列化,比如表单数据
config.params = qs.stringify({ ...config.params });
} else {
// 默认类型(get)
config.headers["content-type"] = "application/json";
config.params = { ...config.params };
}
return config;
},
error => {
return Promise.reject(error);
}
);
// response拦截器(响应需求可以和后端沟通配合修改)
request.interceptors.response.use(
response => {
// 此处可以设置公共提示
// 但目前项目的数据返回结构与方式不统一
// 所以无法做全局提示
return response;
},
error => {
// 响应失败,提示失败内容
if (error && error.response) Message({
message: errorMsg(error.response.status, error.response.message),
type: 'error',
duration: 3 * 1000
});
return Promise.reject(error);
}
);
export default request;
import { default as request } from './http.js';
// 登录
const postLogin = (data) => request.post('/api/login', data);
// 获取验证码
const getVerificationCode = (params) => request.get('/api/code', params);
// 导出方式二
export {
postLogin,
getVerificationCode
};
// 导出方式一
export default {
postLogin,
getVerificationCode
};
// 引入http
import { default as axios } from '@/request/http.js';
// 引入api
import api from '@/request/api.js';
// 挂载api到vue原型
Vue.prototype.$api = api;
// 挂载http到vue原型
Vue.prototype.$axios= request;
请求的时候传递
responseType: 'blob'
属性及值是为了把图片流转为正常的图片格式。
全局挂载,通过axios文件使用
this.$axios
.get("api/code", { params: {}, responseType: "blob" })
.then(({ data }) => {
this.VCode = window.URL.createObjectURL(data);
})
.catch(function (error) {
console.log("获取验证码失败: ", error);
});
☺☺☺
直接使用
axios
需要在全局引入并挂载到vue
原型上
import { default as request } from '@/request/http';
Vue.prototype.$axios = request;
需要在.vue
中写路径
.vue
文件里面不需要引入api
文件
http
文件的导出方式为export default request;
单页面引入,通过api文件使用
import { getVerificationCode } from '@/request/api.js;
getVerificationCode({ params: {}, responseType: "blob" })
.then(({ data }) => {
this.VCode = window.URL.createObjectURL(data);
})
.catch((error) => {
console.log("获取验证码失败: ", error);
});
☺☺☺
需要在
api
文件中定义好路径
需要在.vue
文件中引入api
文件
import { getVerificationCode } from '@/request/api.js;'
api
文件的导出方式为export { getVerificationCode };
全局挂载,通过api文件使用
this.$api
.getVerificationCode({ params: {}, responseType: "blob" })
.then(({ data }) => {
this.VCode = window.URL.createObjectURL(data);
})
.catch((error) => {
console.log("获取验证码失败: ", error);
});
☺☺☺
需要在
api
文件中定义好路径
不需要引入api
文件
api
文件的导出方式为export default { getVerificationCode };
需要在全局引入挂载
import api from '@/request/api';
Vue.prototype.$api = api;
this.$api
.postSurveillance({})
.then(({ data }) => {
console.log(data);
})
.catch((error) => {
console.log("登陆失败: ", error);
});
☺☺☺
post
请求与get
请求类似,传参的方式有所差异而已。