html5 网站开发软件,晨星wordpress,自助网站建设工具,网站首页界面设计#x1f4dd;个人主页#xff1a;五敷有你 #x1f525;系列专栏#xff1a;Vue
⛺️稳中求进#xff0c;晒太阳 Request模块 - axios 封装
使用axios来请求后端接口#xff0c;一般会对axios进行一些配置#xff08;比如配置基础地址#xff0c;请求响应拦截器… 个人主页五敷有你 系列专栏Vue
⛺️稳中求进晒太阳 Request模块 - axios 封装
使用axios来请求后端接口一般会对axios进行一些配置比如配置基础地址请求响应拦截器
所以项目开发中都会对axios进行基本的二次封装封装到一个request模块中便于维护使用
安装axios新建request模块util/request.js创建实例配置导出实例
import axios from axios;
import {Toast} from vant
//创建axios实例将来对创建出来的实例进行自定义的配置
//好处不会污染原始的axios
const instance axios.create({//基础地址baseURL: http://cba.itlike.com/public/index.php?s/api/,timeout: 1000,});//自定义配置 --配置请求响应拦截器// 添加请求拦截器
instance.interceptors.request.use(function (config) {// 在发送请求之前做些什么return config;
}, function (error) {// 对请求错误做些什么return Promise.reject(error);
});// 添加响应拦截器
instance.interceptors.response.use(function (response) {// 2xx 范围内的状态码都会触发该函数。// 对响应数据做点什么(默认axios会多一层data包装需要拦截器处理一下)const resresponse.data;if(res.status!200){//给提示 Toast(res.message)//抛出错误的promisethrow Promise.reject(res.message)}return res}, function (error) {// 超出 2xx 范围的状态码都会触发该函数。// 对响应错误做点什么return Promise.reject(error);
});//导出配置好的实例
export default instance
测试使用
import request from /util/request和普通的axios使用一样 就是自定义的axios
requset.get(路径)
其他 const { data: { base64, key } } await getPicCode()可以拆开
Vuex的持久化存储 封装好storage 存储模块利用本地存储。进行VueX持久化存储
问题一vuex刷新会丢失
将token存入本地。
localStorage.setItem(userInfo,JSON.stringify(response.data.data))
问题二每次存取的时间太长太麻烦
封装一个storage模块
// 约定一个通用的键名
const INFO_KEY hm_shopping_info
const HISTORY_KEY hm_history_list// 获取个人信息
export const getInfo () {const defaultObj { token: , userId: }const result localStorage.getItem(INFO_KEY)return result ? JSON.parse(result) : defaultObj
}// 设置个人信息
export const setInfo (obj) {localStorage.setItem(INFO_KEY, JSON.stringify(obj))
}// 移除个人信息
export const removeInfo () {localStorage.removeItem(INFO_KEY)
}// 获取搜索历史
export const getHistoryList () {const result localStorage.getItem(HISTORY_KEY)return result ? JSON.parse(result) : []
}// 设置搜索历史
export const setHistoryList (arr) {localStorage.setItem(HISTORY_KEY, JSON.stringify(arr))
}//使用import {getInfo,setInfo} from /storagesetInfo(Info)
