怎样做旅游视频网站,wordpress又拍云cdn伪静态,wordpress去掉category,蓝色系的网站一、原因 像是在一些业务逻辑上#xff0c;比如需要在请求之前展示loading效果#xff0c;或者在登录的时候判断身份信息#xff08;token#xff09;等信息有没有过期#xff0c;再者根据服务器响应回来的code码进行相应的提示信息。等等在请求之前#xff0c;之后做的一…一、原因 像是在一些业务逻辑上比如需要在请求之前展示loading效果或者在登录的时候判断身份信息token等信息有没有过期再者根据服务器响应回来的code码进行相应的提示信息。等等在请求之前之后做的一些逻辑都可以通过二次封装axios请求进行实现。
二、具体的封装 这里是对axios封装的一种形式有多种形式具体要根据具体业务需求去定。具体代码里面有具体注释。不再啰嗦直接上具体代码吧供参考
// axios的封装
import axios, { HttpStatusCode } from axios;
import { useRouter } from vue-router;// 生产环境
const baseURLProd https://mall.quanrui.cc/api/v1/backend/;
// 测试环境
const baseURLDev http://139.9.197.13:8088/api/v1/backend/;
const baseURL baseURLDev; //更改baseurl// 使用路由
const router useRouter();// 设置请求头
axios.defaults.headers.post[Content-Type]
application/x-www-form-urlencoded;charsetUTF-8;// 创建axios示实例
let instance axios.create({baseURL: baseURL, //设置baseurltimeout: 5000, //超时时间
});// 跳转到登录页面,如果没有登录,或者登录信息过期的话
// 携带当前页面路由以期在登录页面完成登录后返回当前页面
const toLogin () {router.replace({path: /login,query: {redirect: router.currentRoute.fullPath,},});
};// 提示信息,Toast这个是第三方组件,根据使用的UI组件库不同进行更换
const tip msg { Toast({ message: msg, duration: 1000, forbidClick: true });
}// 请求拦截器
// (主要是在请求的时候携带请求token,以协助后端进行判断身份信息是否过期等),或者还可以在此增加业务操作,比如请求之前展示loading效果,具体可以拿个第三方UI库的一个效果过来使用
axios.interceptors.request.use(config {// 每次发送请求之前判断是否存在token如果存在则统一在http请求的header都加上token不用每次请求都手动添加了// 即使本地存在token也有可能token是过期的所以在响应拦截器中要对返回状态进行判断const token store.state.token;token (config.headers.Authorization token);return config;},error {return Promise.error(error);}
);// 响应拦截器(主要对code进行判断,提示用户进行操作)
axios.interceptors.response.use(response {if (response.status 200) {return Promise.resolve(response);} else {return Promise.reject(response);}},// 服务器状态码不是200的情况error {if (error.response.status) {switch (error.response.status) {// 401: 未登录// 未登录则跳转登录页面并携带当前页面的路径// 在登录成功后返回当前页面这一步需要在登录页操作。case 401:tip(未登录请先登录);setTimeout(() {toLogin();},1000)break;// 403 token过期// 登录过期对用户进行提示// 清除本地token和清空vuex中token对象// 跳转登录页面case 403:tip(登录过期请重新登录);// 清除tokenlocalStorage.removeItem(token); //如果存在了浏览器的localStorage// store.commit(loginSuccess, null); //如果存在store里的登录状态获取其它相关信息// 跳转登录页面并将要浏览的页面fullPath传过去登录成功后跳转需要访问的页面setTimeout(() {toLogin();}, 1000);break;// 404请求不存在case 404:tip(网络请求不存在);break;// 其他错误直接抛出错误提示default:tip(error.response.data.message);break;}return Promise.reject(error.response);}}
);//get方法
export function get(url, params){ return new Promise((resolve, reject) { axios.get(url, { params: params }) .then(res { resolve(res.data); }) .catch(err { reject(err.data) }) });
}//post方法
export function post(url, params) { return new Promise((resolve, reject) { axios.post(url, JSON.stringify(params)) .then(res { resolve(res.data); }) .catch(err { reject(err.data) }) });
}// put方法
export function put(url, params){ return new Promise((resolve, reject) { axios.put(url, { params: params }) .then(res { resolve(res.data); }) .catch(err { reject(err.data) }) });
}// delete方法
export function del(url, params){ return new Promise((resolve, reject) { axios.delete(url, { params: params }) .then(res { resolve(res.data); }) .catch(err { reject(err.data) }) });
}// 导出实例
export default instance;三、对请求统一管理 创建一个文件夹用于存放接口的请求到时候用起来只需要导出请求的方法就行统一管理。不然全堆在页面上一大串代码有点难看
先从我们封装好的axios里面导出具体的请求方法
以下示例 四、页面上使用
先导出请求接口的具体方法
import { pwlogin } from ../api/login; 使用
getloginres() {pwlogin(data).then((res) {//数据处理}).catch((err) console.log(err));}
以上就是全部错误欢迎提出
