Vue2+axios+router+loading封装（新增图片上传）

Vue2+axios+router+loading封装（新增图片上传）

vue新手，开项目一个多月了，遇到好多坑，对于喜欢每个项目的请求必须要封装的我，这操作是必须滴；
一个要求一个要求加进入，未来还有更多要求还不知道怎么处理，axios就是一个血泪史啊

先说说具体的要求：

1. axios基础封装 ：axios的基础拦截封装；

2. 参数设置 ：header，接口路径、方法（get、post），参数等；

3. 跳转路由 ：发起请求后的各种状态下的路由跳转（因为是封装的，js没有this，又不好再次引入vue\router）；

4. 进度条 ：加载中、上传中等不同的文字和样式；

5. 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

2. 参数设置 ：接口路径、方法（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
    })
}

3. 调用请求

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;
    },