基于axios的二次封装
1、 axios的封装前言
axios是一个基于 promise 的 HTTP 库，目前,在vue,react框架中也还是备受青睐,根据不同项目的业务，也有许多种不同的封装方法,但不同的应用场景,导致封装的代码风格不一，我这里想总结下封装的思路。
2、 目录结构
src目录下,http.js文件是对axios的封装,依赖的一些包和方法,下面也会有具体介绍
image
3、 封装的基本思路
import axios from 'axios'
import NProgress from 'nprogress';
import 'nprogress/nprogress.css';
import store from './store';
import { formData } from '@/function'
axios.defaults.timeout = 20000; //响应时间
axios.defaults.headers.post[ 'Content-Type' ] = 'application/x-www-form-urlencoded;charset=UTF-8'; //配置请求头
//POST传参序列化(添加请求拦截器)
axios.interceptors.request.use ( ( config ) => {
//在发送请求之前做某件事
NProgress.start ();
let token = store.state.userInfo.userToken
config.headers.Authorization = `${token ? token : ''}`
return config;
} , ( error ) => {
NProgress.done ();
return Promise.reject ( error );
} );
//返回状态判断(添加响应拦截器)
axios.interceptors.response.use ( ( res ) => {
//对响应数据做些事
NProgress.done ();
return Promise.resolve ( res.data );
} , ( error ) => {
NProgress.done ();
return Promise.reject ( error );
} );
我是把后台的token存在vuex里面,当然这会使得刷新的时候数据消失,所以结合本地存储做了对应的处理,大家可以根据自己的需求做相应的存储.
在全局的请求拦截器中做了loading,和request header的配置
对应的响应拦截中也可以对response进行处理,根据后台返回不同的状态码做不同的处理,页面中的axios就只用处理返回正确的请求.
根据业务需求,我这里对get和post做了不同的处理
post请求
export function fetchPost ( url , params , form ) {
let reqTime = new Date ().getTime ();
if ( params ) {
params.reqTime = reqTime;
} else {
params = { reqTime }
}
if ( form ) {
params = formData ( params );
}
return new Promise ( ( resolve , reject ) => {
axios.post ( url , params )
.then ( response => {
resolve ( response );
} , err => {
reject ( err );
mes ();
} )
.catch ( ( error ) => {
reject ( error )
mes ();
} )
} )
}
由于post请求,后台有时候会要求传formData格式的参数,本文中默认是json格式,所以在此也做了处理,上述也可以看到,如果是fromData格式,可以传第三个参数为true,文中用到的formData方法和mes方法
export function formData(item) {
//转换成表单
let form = new FormData();
for (let key in item) {
form.append(key, item[key]);
}
return form;
}
function mes () {
ELEMENT.Message ( {
message : store.state.language.serveError , //这是我项目中的消息提示,可以自由更改
type : "error" ,
duration : 3000 ,
customClass : "messageBox"
} );
}
get请求
////返回一个Promise(发送get请求)
export function fetchGet ( url , param , form ) {
let reqTime = new Date ().getTime ();
if ( param ) {
param.reqTime = reqTime;
} else {
param = { reqTime }
}
if ( form ) {
param = formData ( param );
}
return new Promise ( ( resolve , reject ) => {
axios.get ( url , { params : param } )
.then ( response => {
resolve ( response )
} , err => {
reject ( err )
mes ();
} )
.catch ( ( error ) => {
reject ( error )
mes ();
} )
} )
}
最后暴露出去这两个方法,在main.js中引入
export default {
fetchPost ,
fetchGet ,
}
//main.js
import { fetchPost, fetchGet } from './http';
Vue.prototype.$Post = fetchPost;
Vue.prototype.$Get = fetchGet;
在myminxin.js中使用这两个方法
let m = {
data () {
return {
h : "http://localhost:5233"//全局请求地址
};
} ,
} ,
post ( u , p , f ) {
let that = this;
return new Promise ( ( resolve , reject ) => {
this.$Post ( this.h + u , p , f ).then ( res => {
that.backRequest ( u , res , ts );
resolve ( res )
} ).catch ( ( e ) => {
reject ( e )
} );
} );
} ,
get ( u , p , f ) {
let that = this;
return new Promise ( ( resolve , reject ) => {
this.$Get ( this.h + u , p , f ).then ( res => {
resolve ( res )
} ).catch ( ( e ) => {
reject ( e )
} );
} );
} ,
myminxin也需要在项目中引入,可以全局在main.js中引入,也可以按需导入,大家也可以在对应的错误回调里做一些提示信息之类的,根据不同的需求自由发挥,借助组件库的消息提示,进行封装,
到此,axios的封装已经全部完毕,在项目中我们就可以很愉快的使用this调用get和post请求了,感谢大家观看,mua~
附言:
基于vue+element 的后台管理框架
GitHub: https://github.com/wxyfc/management-system
网址: https://wxyfc.github.io/management-system/#/login，账号:admin 密码:admin 直接点击登录即可
如果对您有帮助请点个小星星哦,谢谢,mua~
