axios在vue中的简单封装及应用

1、axios是什么？
　　ajax封装的是浏览器提供的xmlhttprequest，axios封装的是浏览器提供的fetch,fetch是为了应对其他需求所对于xmlhttprequest的再一次封装。一句话，axios走在了封装界的最前沿，而且大家对它的评价都相当不错，vue一开始是要搞一个自己的封装，但是到2.0是推荐的就是axios了。那它应该就是不错，毕竟我们需要学习的是vue全家桶。
2、axios的特性
　　这个粘贴一下官网自己的说法啊就行，没有一一验证，毕竟我的需求ajax也能满足，不过没办法，谁让它火呢。

从浏览器中创建 XMLHttpRequests
从 node.js 创建 http 请求
支持 Promise API
拦截请求和响应
转换请求数据和响应数据
取消请求
自动转换 JSON 数据
客户端支持防御 XSRF

3、axios在vue中的使用
　　1）、在vue项目中安装axios，使用命令 npm install --save axios vue-axios
　　2）、在vue项目的main.js中引入axios，贴一下代码，记住要在vue对象实例化之后使用。

import Vue from 'vue'
import axios from 'axios'
import VueAxios from 'vue-axios'

Vue.use(VueAxios, axios)

　　3）、在vue项目中使用axios，有三种使用方式，粘贴代码看下

Vue.axios.get(api).then((response) => {
  console.log(response.data)
})

this.axios.get(api).then((response) => {
  console.log(response.data)
})

this.$http.get(api).then((response) => {
  console.log(response.data)
})

4、axios在vue中封装一下

　　首先将axios请求封装，建立一个AxiosPack.js

import Vue from 'vue'
import axios from 'axios'
import VueAxios from 'vue-axios'
import {Message} from 'element-ui'
import qs from "qs";

 
Vue.use(VueAxios, axios)

//消息提示
const tip = (errorStr)=>{
    Message.error({message: errorStr});
}

/** 
 * 跳转登录页
 * 携带当前页面路由，以期在登录页面完成登录后返回当前页面
 */
const toLogin = () => {
    router.replace({
        path: '/',
        query: {
            redirect: router.currentRoute.fullPath
        }
    });
}

//请求失败后的错误统一处理 
const errorHandle = (status, other) => {
    switch (status) {
        case 403:
            tip('登录过期，请重新登录');
            // 清除token
            // localStorage.removeItem('token');
            // store.commit('loginSuccess', null);
            setTimeout(() => {
                toLogin();
            }, 1000);
            break;
        case 404:
            tip('网络请求不存在');
            break;
        default:
            tip(other);
    }
}

// 请求拦截器
axios.interceptors.request.use(
    config => {
        // 在发送请求之前做些什么(后期在这里加上token)
        // const token = store.state.token;
        // token && (config.headers.Authorization = token);  
        return config;
    },
    error => {
        // 对请求错误做些什么
        return Promise.reject(error);
    }
)

// 响应拦截器
axios.interceptors.response.use(
    // 请求成功
    (res) => {
        if(res.status === 200) {
            return Promise.resolve(res.data);
        } else {
            return Promise.reject(res);
        }
    },
    // 请求失败
    error => {
        if (error && error.response) {
            switch (error.response.status) {
                case 400: tip('请求错误(400)'); break;
                case 401: tip('未授权，请重新登录(401)'); break;
                case 403: 
                tip('登录过期，请重新登录');
                setTimeout(() => {
                    toLogin();
                }, 1000);
                break;
                case 404: tip('请求出错(404)'); break;
                case 408: tip('请求超时(408)'); break;
                case 500: tip('服务器错误(500)'); break;
                case 501: tip('服务未实现(501)'); break;
                case 502: tip('网络错误(502)'); break;
                case 503: tip('服务不可用(503)'); break;
                case 504: tip('网络超时(504)'); break;
                case 505: tip('HTTP版本不受支持(505)'); break;
                default: tip('连接出错'); break;
            }
        } else {
            tip('连接服务器失败!');
        }
      return Promise.resolve(error);
    }
)

export default {
    $get(url, data, completedFunc) {
      let http = axios.get(url, { params: data });
      if (completedFunc) {
        http.then(completedFunc);
      } else {
        return http;
      }
    },
    $postJson(url, data, completedFunc) {
      let _qsData = JSON.stringify(data);
      let http = axios.post(url, _qsData, {
        headers: {
          "Content-Type": "application/json; charset=utf-8"
        }
      });
      if (completedFunc) {
        http.then(completedFunc);
      } else {
        return http;
      }
    },
    $post(url, data, completedFunc) {
      let _qsData = qs.stringify(data, {
        arrayFormat: "indices"
      });
      let http = axios.post(url, _qsData);
      if (completedFunc) {
        http.then(completedFunc);
      } else {
        return http;
      }
    },
    $postFile(url, form) {
      let config = {
        headers: {
          "Content-Type": "multipart/form-data"
        }
      };
      let http = axios.post(url, form, config);
      return http;
    },
    $getFile(url, form) {
      let config = {
        headers: {
          "content-disposition": "attachment; filename=total.xls",
          "content-type": "application/x-download;charset=utf-8"
        }
      };
      let _qsData = qs.stringify(form, {
        arrayFormat: "indices"
      });
      let http = axios.post(url, _qsData, {
        responseType: "blob",
      });
      return http;
    }
  };

　　然后通过调用上面封装的axios请求，封装业务请求路径，建立Services.js

import AxiosPack from "@/scripts/AxiosPack.js";
const baseUrl = "http://123.123.123.123:8080/xxx_api";
const snailFisUrls = {
    Dictionarys: {
        GetDicList:"get /Dictionarys/GetDicList",
    },
};
const { $get, $postJson, $post, $getFile, $postFile } = AxiosPack;
let allAxios = {};

function convertUrls(urls, key) {
    allAxios[key] = {};
    const sUrl = urls[key];
    for (const uKey in urls) {
        if (urls.hasOwnProperty(uKey)) {
        allAxios[key][uKey] = function (args) {
            let __urlSplits = urls[uKey].split(" ");
            if (__urlSplits.length >= 2) {
            switch (__urlSplits[0]) {
                case "get":
                return $get(baseUrl + __urlSplits[1], args);
                case "getFile":
                return $getFile(baseUrl + __urlSplits[1], args);
                case "postFile":
                return $postFile(baseUrl + __urlSplits[1], args);
                case "postUrl":
                return $post(baseUrl + __urlSplits[1] + args);
                case "postJson":
                return $postJson(baseUrl + __urlSplits[1], args);
                default:
                return $post(baseUrl + urls[uKey], args);
            }
            } else {
            return $post(baseUrl + urls[uKey], args);
            }
      };
    }
  }
}
for (const key in snailFisUrls) {
  convertUrls(snailFisUrls[key], key);
}
export default allAxios;

　　然后封装全局属性，建立PrototypePack.js

import allAxios from "@/scripts/Services.js";

export default {
    initMixins(Vue) {
        Vue.prototype.$allAxios = allAxios;
    }
  };

　　最后将全局属性引用到main.js中调用

import PrototypePack from "@/scripts/PrototypePack.js"
PrototypePack.initMixins(Vue);
new Vue({
  ...
})

　　上面封装完毕，我们就可以在vue项目中的任何地方调用了

methods:{
        Search(){
            this.$allAxios.Dictionarys.GetDicList().then((res)=>{console.log(res)}).catch(()=>{});
        },
    },