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(()=>{});
},
},
浙公网安备 33010602011771号