简述
使用源生的axios要按照它的格式进行参数的设置,相应的请求和接收,有时候需要对其进行封装,以此来更加适应于项目中的各种请求类型,使请求格式更加统一(如统一的配置参数,请求格式以及响应接收数据方式),使用更加方便,下面就介绍两种封装方法。
一、简单封装:
新建http.js,将axios请求封装到里面
import axios from 'axios'
设置请求延时和请求根目录:
//延时设置
axios.defaults.timeout = 5000;
//根请求路径设置
axios.defaults.baseURL = 'http://.......'
设置请求拦截器和响应拦截器:
//设置请求拦截器
axios.interceptors.request.use((config)=>{
//请求前做一下事情,比如携带token,字符验证,空格清理等等
doSomething();
return config;
},(error)=>{
//以各种方式提示错误,并抛出
return Promise.reject(error);
})
//设置响应拦截器
axios.interceptors.response.use((response)=>{
if(response.data.success){
//根据后端返回状态来决定怎么处理
}
},(error)=>{
return new Promise.reject(error);
})
封装axios的get请求为httpGet:
//封装get请求
export function httpGet(url,param){
return new Promise((resolve,reject)=>{
axios.get(url,params).then((response)=>{
resolve(response);
},err=>{
reject(err)
//捕捉错误并抛出
}).catch((error=>{
reject(error)
}))
})
}
封装axios的post请求为httpGet:
//封装post请求
export function httpPost(url,param){
return new Promise((resolve,reject)=>{
axios.post(url,param).then(response=>{
resolve(response)
},err=>{
reject(error);
//捕捉错误并抛出
}).catch(error=>{
reject(error)
})
})
}
抛出定义方法,是外部能调取:
export default {
fetchPost,
fetchGet,
}
封装好后,就可以在组件中引入http.js,使用http.httpGet(url,param)和http.httpPost(url,param)进行请求了。
例如:
https.HttpPost(url, params)
.then(result => {
//操作返回结果result
}).catch(error => {
console.log(error);
});
二、封装request,大型项目:
涉及到中大型项目,原生axios对项目的适配不够好,将axios封装成request,保持项目中数据请求和响应的统一性。包含了对axios的封装,对各请求的封装(各请求分模块统一封装到专用的接口文件中)
1.封装axios
首先,创建request.js,引入axios,新建service为axios对象:
import axios from "axios";
const service = axios.create({
//延时
timeout:15000,
//设置允许跨域(axios默认不允许跨域)
withCredentials:true,
//路径访问根目录
baseURL:'http://localhost:8080'
});
同样,设置请求拦截器和相应拦截器:(拦截器中简单的写了关于登录状态和token的操作)
//请求拦截器
service.interceptors.request.use(
config=>{
if(store.getters.login_state == false)
{
store.dispatch('loginOut')
router.push({
path:'/login'
})
}
else{
if(store.getters.token){
config.headers["Authorization"] = store.getters.token;
}
return config;
}
},error =>{
Promise.reject(error);
}
)
//响应拦截器
service.interceptors.response.use(
response =>{
if(response.code !=200)
{
if(response.code == 401){
store.dispatch('loginOut')
router.push({
path:'/login'
})
}
}
else{
return Promise.resolve(response.data);
}
},error=>{
return Promise.reject(error);
}
)
最后将service对象抛出:
export default service;
2.封装访问接口
将各模块需要用到的接口分模块的统一封装到api文件夹下,目录如下图:
(这里面的http.js是我第一部分写的封装方法,忽略它)
比如login.js是专门用于登录、登出的接口封装,base.js是获取基本信息的接口封装,来看看login.js
首先是引入我们封装好的request:
import request from '../util/request'
然后定义登录登出方法:
export function login(data){
return request({
url:"/login",
method:"post",
data
});
}
export function logOut(){
return request({
url:"/loginOut",
method:"get"
})
}
抛出封装的方法:
export default {
login,
loginOut
}
到此,对axios和接口的封装就完成了。在组件中引入想要使用过的接口模块,如login,就可以直接调用进行使用了,例如,在组件中使用login,
login.login(userInformation)
封装主要作用除了方便调用,统一数据处理外,还有就是是在请求拦截器和响应拦截器上,对请求之前和响应之后做一些操作,例如登录状态,token设置,根据响应状态执行不同操作等。