最详细的axios+vuex请求封装以及使用实例

您所在的位置:网站首页 axios调用api 最详细的axios+vuex请求封装以及使用实例

最详细的axios+vuex请求封装以及使用实例

2024-07-10 18:30| 来源: 网络整理| 查看: 265

目录 一、Vux相关介绍1.Vuex基本概念 二、Axios相关介绍1.axios基本概念 三、Axios+Vuex获取后端数据1.实例演示使用Vuex+Axios获取后端数据2.Vuex中对应的login.js文件请求后端 四、异步操Vuex1.实例

一、Vux相关介绍 1.Vuex基本概念

Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生变化。在单页面应用中可保证各个组件之间的相互通信。 1.下载安装vuex插件

npm install vuex

2.在项目目录里面创建一个专门的store文件夹用来存放vuex对应的操作 说明:

创建一个store文件这样的好处是,当我们的项目比较大,请求后端接口比较多的时候,后端可能会采用微服务的方式进行,搭建,我们前端可以根据后端的服务划分,来创建不同的数据请求仓库,这样会使得我们的项目在后期维护起来特别方便。

创建store封装目录 3.store文件夹中创建indx.js文件,开始封装index.js文件 index文件可以引入每个功能模块对应的vuex文件,可以根据项目模块的划分创建对应的数据仓库,以及请求文件,我们利用import和export 来进行不同模块的引入,导出,这样会使我们的项目更符合模块化。index.js文件中主要是引入其他模块的数据请求文件,类似于一个所有数据请求的父站点,根据你页面发出的请求地址,在去找对应的子站点。

比如这个文件中引入了两个请求模块,一个是登录的login模块,一个是用来存放项目字典数据的dictionary模块 import Vue from 'vue' import Vuex from 'vuex' Vue.use(Vuex); import login from './login'//登录vuex模块文件 import dictionary from './dictionary'//字典vuex模块文件 const store = new Vuex.Store({ modules: { login, dictionary } }); export default store

4.main.js文件引入store并使用(默认会去引入index.js文件) 封装完成index之后在项目的全局文件main.js中引入store,并且,要在Vue实例中使用store

import store from './store' new Vue({ el: '#app', store )} 二、Axios相关介绍 1.axios基本概念

axios是在Vue项目中最常用进行前后端数据请求的一种方式,

1.下载安装axios

npm install axios

2.创建对应axios文件夹,用来对axios进行二次封装(创建apiConfig和index文件) axios封装目录

说明:

apiConfig.js中主要用来同意封装后端接口地址,方便修改,最好设置本地,测试,正式,三种环境,这样的话便于我们日后维护,开发。

index.js文件主要是对请求的封装,包括请求的封装和响应的封账,以及对后端抛出常见错误码的拦截

3.apiConfig.js文件

const apiConfig = { apiFun() { let baseUrl = {}; switch (1) { case 1: baseUrl = { //本地 api:'' }; break; case 2: baseUrl = { // 线上测试环境 api: '', }; break; case 3: baseUrl = { // 线上正式环境 api: '', }; break; default: break; } return baseUrl } }; export default apiConfig.apiFun()

4.index.js拦截二次封装

import Vue from 'vue'; import axios from "axios"; import store from "../store" import apiConfig from "./apiConfig"; import $api from '../axios/apiConfig'//接口 //接口 for (let k in apiConfig) { Vue.prototype[k] = apiConfig[k]; } const Axios = axios.create({ timeout: 20000, responseType: "json", headers: { 'Content-Type': 'application/json', } }); let loadAll; Axios.interceptors.request.use( config => { let userInfo=JSON.parse(window.localStorage.getItem('userInfo')||'{}'); 添加token if (userInfo&&userInfo.accessToken) { config.headers['Authorization'] = userInfo.accessToken; }else{ window.localStorage.clear() } if (config.mask !== false) { loadAll = Loading.service({ lock: true, text: '加载中', spinner: 'el-icon-loading', background: 'rgba(0, 0, 0, 0.7)' }); } return config; }, err => { return Promise.reject(err); }); Axios.interceptors.response.use( response => { setTimeout(()=> { loadAll.close(); }, 500); if (response.data.code === 200) { //操作成功返回数据 return response.data; }

5.main.js中引入axios并使用

import Axios from './axios' (会默认去找axios文件下的index.js文件) Vue.prototype.axios = Axios; (在Vue的原型中增加axios) 三、Axios+Vuex获取后端数据 1.实例演示使用Vuex+Axios获取后端数据

说明:

1.通过简单的模拟用户登录过程中的操作,向大家展示Vuex和axios的正确使用姿势

假如在a页面调用登录接口

login() this.logInfo = { userName:'za', password:'123' } //vuex利用dispacth调用actions中的请求,完成一次前端和服务端的数据通信 this.$store.dispatch("login/adminLogin", this.logInfo).then(res => { if (res) { this.$router.push({ path: "/" }); } }); 2.Vuex中对应的login.js文件请求后端 import $api from '../axios/apiConfig'//接口 import axios from '../axios'//请求 const module = { namespaced:true, state:{}, mutations:{}, actions:{ adminLogin(context, data) { 通过封装的promise来进行后端请求 return new Promise((resolve) => { axios.post($api.api + '/login', data).then(res => { if (res) { 拿到数据之后返回给前端 resolve(res.data) } }) }) } } } export default module //导出模块 四、异步操Vuex 1.实例 假如你在a页面中需要操作仓库,那么你只需要找到store中对应的文件,比如当你登录成功之后想将用户的信息存储在vuex中 登录成功之后你可以通过this.$store.commit来操作对应仓库中的mutations,mutations可以改变vuex中的state this.$store.commit('login/setUserName',this.userName) this.$store.commit('login/setToken',this.Token)

** 对应的login仓库模块中需要有setToken方法和setUserName方法(注意vuex只有mutations可以操作state) **

const module = { namespaced:true, state:{ userInfo:{ userName:'', Token:'' } }, mutations:{ setUserName(state,val){ state.userInfo.userName = val }, setToken(state,val){ state.userInfo.Token = val } }, }

这样信息就存在了vuex中,我们就可以在项目中的所有组件中使用了,如何使用,在使用的时候我们可以借助,Vue的一个计算属性,这样的话能优化我们的性能,只有当Vuex缓存变化的时候才会执行。 在页面中使用this.$store.state.login.userName,可以获取到state中的对应数据。 通过this.getuserName就可以获取到vuex中的数据

computed: { getuserName() { return ( this.$store.state.login.userName ); } }


【本文地址】


今日新闻


推荐新闻


CopyRight 2018-2019 办公设备维修网 版权所有 豫ICP备15022753号-3