版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/lmy0111ly/article/details/82908287
Vue2+axios+router+loading封装（新增图片上传）
vue新手，开项目一个多月了，遇到好多坑，对于喜欢每个项目的请求必须要封装的我，这操作是必须滴；
一个要求一个要求加进入，未来还有更多要求还不知道怎么处理，axios就是一个血泪史啊
先说说具体的要求：
-
axios基础封装 ：axios的基础拦截封装；
-
参数设置 ：header，接口路径、方法（get、post），参数等；
-
跳转路由 ：发起请求后的各种状态下的路由跳转（因为是封装的，js没有this，又不好再次引入vue\router）；
-
进度条 ：加载中、上传中等不同的文字和样式；
-
axios基础封装 、 跳转路由 、 进度条：request.js基础代码
import axios from 'axios' //axios引入
import store from './store' //缓存数据的名称管理，就是localStorage的key
//引入封装的吐司，进度条等
import {
toast,
LoadingBox
} from './utils'
axios.defaults.withCredentials = true; //让ajax携带cookie
// const isPro = Object.is(process.env.NODE_ENV, 'production')
var lb = null; //进度条默认不显示
var vuer = null; //vue 对象，传递过来的
// 创建axios实例
const service = axios.create({
//以下为代理跨域的一些baseURL，因为我们有不同的域名，暂时不用
// baseURL: process.env.BASE_API, // api的base_url
// baseURL: isPro ? 'http://xxx:8041/rest/' : '/api/',
// baseURL: "http://xxx:8041/rest/",
timeout: 15000 // 请求超时时间
});
// request请求拦截器
service.interceptors.request.use(config => {
//传过来的vue对象（用来进行跳转）
vuer = config.that;
// 让每个请求携带自定义token 请根据实际情况自行修改
// if (localStorage.getItem(store.token)) {
// config.headers['X-Token'] = localStorage.getItem(store.token)
// }
//设置header
config.headers['Client-Type'] = 'WAP'; //客户端区别
config.headers['Content-Type'] = 'application/x-www-form-urlencoded';
// config.headers['Content-Type'] = 'application/json; charset=UTF-8';
//请求的时候加入进度条（在这里可以传入进入条的图标、msg（封装时已默认加载中），还可以传入特定的值累约束，比如：msg ==0 时，不展示）
if (config.msg != 0) {
lb = new LoadingBox(config.msg || '');
//展示进度条
lb.show();
}
//url.js传过来的所有参数可以统一打印
console.log("请求参数：url:" + config.url + ",data:" + config.data + ",params:" + config.params + ",method:" + config.method)
return config
}, error => {
//网络不通，跳转打404页面
console.log('request跳转404页面：' + error) // 跳转404页面
vuer.$router.push({
path: '*'
})
Promise.reject(error);
});
// respone返回拦截器
service.interceptors.response.use(
response => {
//请求成功后隐藏进度条
if (lb != null) {
lb.hide();
}
const res = response.data
if (res.result == "true") {
console.log("succ:" + JSON.stringify(response.data));
// console.log(response.data);
//成功后的成功返回
return res;
} else {
console.log("err:" + JSON.stringify(response.data));
//跳转登录
if (res.result == "false" && res.code == "601") { //未登录
localStorage.clear();
toast(res.message);
setTimeout(() => {
vuer.$router.push({
name: login
})
}, 500);
return;
}
// 成功后的失败返回
return Promise.reject(error);
}
},
error => {
//这里只是全局处理不用返回
if (lb != null) {
lb.hide();
}
// timeout of 15000ms exceeded
console.log('error跳转404页面：' + error) // 跳转404页面
if ((error == 'Error: Network Error') || (error == 'Error: timeout of 15000ms exceeded')) { //后台服务器未开Error: Network Error
toast('连接不到服务器')
vuer.$router.push({
path: '*'
})
//失败返回
return error
}
}
)
export default service
- 参数设置 ：接口路径、方法（get、post），参数等；这是url.js页面：get post
import request from "./request";
const qs = require('qs');
let baseUrl = 'http://xxx:8041';
let baseCreditUrl = 'http://xxx:8080';
// 登录(第一个数传来的参数，第二个是vue对象，第三个是进度条的msg，若有其他数据可以一起传过去)
//POST
export function login(data, that,msg) {
return request({
url: baseUrl + "login",
method: "post",
data: qs.stringify(data),
that: that,
msg:msg
})
}
//GET
export function login(params, that,msg) {
return request({
url: baseUrl + "login",
method: "get",
params,
that: that,
msg:msg
})
}
- 调用请求
import {
login
} from "js/url.js";
import { validatenull, toast, isMobile, promptBox } from "js/utils";
import store from "js/store";
let that = this;
let params = {name:'哈哈哈',phone:'18255556666'};
login(params, that).then(
response => {
//成功后的成功处理
if (!validatenull(response.data)) {
toast("登录成功");
}
},
error => {
//成功后的失败处理（如：账户名错误）
toast(error.message);
}
);
至此axios封装完成，当然还有其他要求，如跳出一个页面就中断请求、进度条消失等还未找到好的方法；再比如多个请求一起进行;再再比如有多个域名的代理跨域（一个域名的也没搞定）；这些还没考虑，欢迎补充
新增图片上传
我的是截图的上传，使用的vue-cropper.js ,返回的是blob数据，然后上传（代码从下往上看）
当然request.js封装的header改改
if (config.hds == 1) { //上传图片
config.headers['Content-Type'] = 'multipart/form-data';
} else {
config.headers['Content-Type'] = 'application/x-www-form-urlencoded';
}
//上传图片
upload: function(file) {
let that = this;
let params = new FormData(); // 创建form对象
params.append("file", file, file.name); // 通过append向form对象添加数据
// param.append("", ""); // 添加form表单中其他数据
console.log(params.get("file")); // FormData私有类对象，访问不到，可以通过get判断值是否传进去
// 第三个参数代表是文件
unploadImg(params, that, "上传中...", 1).then(
response => {
// let img = this.getObjectURL(file);
that.info['icon'] = response.data.iconUrl;
localStorage.setItem(store.userinfo,JSON.stringify(that.info))
toast("上传成功");
},
error => {
toast(error.message);
}
);
},
// 截取图片
save: function() {
// 获取截图的blob数据
this.$refs.cropper.getCropBlob(data => {
data.name = "head.jpg"
this.upload(data);
});
},
//选择展示图片
chooseChange: function(e) {
let file = e.target.files[0];
let tempPath = this.getObjectURL(file);
this.option.img = tempPath;
//this.upload(file);//这里是选择上传
},
//建立一個可存取到該file的url
getObjectURL: function(file) {
var url = null;
if (window.createObjectURL != undefined) {
// basic
url = window.createObjectURL(file);
} else if (window.URL != undefined) {
// mozilla(firefox)
url = window.URL.createObjectURL(file);
} else if (window.webkitURL != undefined) {
// webkit or chrome
url = window.webkitURL.createObjectURL(file);
}
return url;
},