Vue中axios的二次封装
axios请求数据中,基础的配置和二次封装
·
一、首先在src目录下新建一个apis文件夹(文件夹名字按个人喜好)并在其目录下创建一个index.js文件用于axios第一次封装。
在src目录下index.js中代码如下图,它里面有请求拦截器和响应拦截器,对请求过程和响应响应过程做出基本的提交和反馈,方便我们直观的观察到请求过程中所遇到的问题:
// // !!! 第一次配置axios
// import axios from "axios";
import axios from "axios";
import router from "../router/index";
export default function (config) {
// 创建一个axios实例
const instance = axios.create({
//请求的根路径写在此处
baseURL: '/api',
});
// 路由守卫
// instance.beforeEach((to,from,next)=>{
// if(to.path==='/login') return next();
// const token=window.sessionStorage.getItem('token');
// if(!token) return next('/login')
// next ()
// })
// 添加请求拦截器
instance.interceptors.request.use(config=>{
config.headers.Authorization = sessionStorage.getItem('token')
return config},error=>{return Promise(()=>{})})
// 添加响应拦截器
instance.interceptors.response.use(response => {
// 对响应数据做一些事情
return response.data;
}, error => {
// 请求错误时做些事
let status = "";
if (error.request) {
status = error.request;
} else if (error.response) {
status = error.response;
}
if (status) {
switch (status.status) {
case 400:
error.message = "请求错误(400)";
break;
case 401:
error.message = "未授权,请重新登录(401)";
router.push("/401");
break;
case 403:
error.message = "拒绝访问(403)";
break;
case 404:
error.message = "请求出错(404)";
router.push("/404");
break;
case 408:
error.message = "请求超时(408)";
break;
case 500:
error.message = "服务器错误(500)";
router.push("/a500");
break;
case 501:
error.message = "服务未实现(501)";
break;
case 502:
error.message = "网络错误(502)";
break;
case 503:
error.message = "服务不可用(503)";
break;
case 504:
error.message = "网络超时(504)";
break;
case 505:
error.message = "HTTP版本不受支持(505)";
break;
default:
error.message = `连接出错(${error.response.status})!`;
}
} else {
error.message = "连接服务器失败!,这里";
}
return Promise.reject(error);
}
);
return instance(config)
}
二、第2步,在apis文件夹下创建http.js文件,用于axios的二次封装,通过export将方法暴露出去,方便在所需页面调用。
// axios二次封装 import http from './index.js' //下面就是请求数据时的写法! //比如获取用户列表信息如下: // 获取所有用户信息 export const get_users = (params) => { return http({ //请求方法 method: "GET", //请求路径 url: "users", //请求参数 (注意这里写的是params是因为是get请求,如果是其他请求例如post、put请求要写为data) params: params }) }
三、第3步,在页面中引用Http.js文件,调用自己所配置好的请求方法,配合asnyc和awit异步请求方法,最终我们就可以直接的获取到请求的数据信息!
import { get_users} from '../apis/http.js' //首先,引入http.js中暴露的获取用户的方法
export default {
props: {
},
data() {
return {
};
},
created() {
//第三步 因为是自定义的getUserList方法 所以需要在钩子函数中调用才行!
this.getUserList()
},
methods: {
//第二步 在自定义方法中调用get_users方法,通过async和awit搭配直接获取到数据
async getUserList () {
//通过路由传参的形式,请求数据!!! {data:res}直接结构赋值出来data给res
let {data:res} = await get_users(params)
//console.log(res)这样就获取到了请求的所有数据!
//后续就可以通过赋值的方式,在页面上渲染数据。
}
},
components: {
},
};
更多推荐
所有评论(0)