专栏首页前端vue2.封装axios、本地存储,安装vuex、element

2.封装axios、本地存储,安装vuex、element

Axios 是一个基于 promise 的 HTTP 库,可以用在浏览器和 node.js 中。 Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式 Element 一套为开发者、设计师和产品经理准备的基于 Vue 2.0 的桌面端组件库

html5 Web存储

当用户登录后,前端需要存一些必要信息,比如用户名,token,登录状态等等,这里用到vuex和本地存储(vuex存储后虽然能够做到数据响应但是却干不过刷新,所以需要本地存储) 操作本地存储步骤比较麻烦,这里简单封装下

src下新建tools用来放各种工具

// src/tools目录下新建storage.js
let storage = {
  get(key) {
    return window.sessionStorage.getItem(key);
  },
  set(key, val) {
    window.sessionStorage.setItem(
      key,
      typeof val !== "string" ? JSON.stringify(val) : val
    );
  },
  del(key) {
    window.sessionStorage.removeItem(key);
  },
  cle() {
    window.sessionStorage.clear();
  }
};
export default storage;
添加vuex,封装axios,引入element
安装依赖
npm install axios --save
npm install element-ui --save
npm install vuex --save
引入 main.js添加以下配置
// src/main.js
// element
import ElementUI from "element-ui";
import "element-ui/lib/theme-chalk/index.css";
//sotre
import store from "./store";
//storage
import storage from "./tools/storage";
Vue.prototype.Storage = storage;
Vue.use(ElementUI);
new Vue({
  el: "#app",
  router,
  store,
  components: { App },
  template: "<App/>"
});
vuex使用

src下新建store文件 store文件下新建index.js作为入口文件

// /src/store/index.js
import Vue from 'vue';
import Vuex from 'vuex';
import user from './modules/user';
Vue.use(Vuex);
export default new Vuex.Store({
  modules: {
    user
  }
});

store文件下新建modules区分各个模块 modules下新建user.js用户模块

// /src/store/modules/user.js
import Storage from "@/tools/storage";
const state = {
  //token
  token: Storage.get("token")
};
const actions = {
  setToken({ commit }, data) {
    commit("setToken", data);
  }
};
const mutations = {
  setToken(state, data) {
    Storage.set("token", data);
    state.token = Storage.get("token");
  }
};
export default {
  state,
  actions,
  mutations
};
封装Axios

tools文件下新建request.js

import axios from "axios";
import { Message } from "element-ui";
import store from "@/store";
//创建axios
const service = axios.create({
  //这里baseurl就是刚开始配置的开发环境和线上环境地址,webpack会自动读取无需手动再改
  baseURL: process.env.BASE_URL, //baseurl
  timeout: 20000 //请求超时
});

//request拦截
//请求拦截主要作用是验证请求是否合法,会带有用户token,这里模拟一个token,可以根据实际情况修改
service.interceptors.request.use(
  config => {
    let token = store.state.user.token;
    if (store.state.user.token) {
      config.headers["rty-token"] = token;
    }
    return config;
  },
  err => {
    console.log(err);
    Promise.reject(err);
  }
);

//respone拦截
//响应拦截主要是对返回做统一处理
service.interceptors.response.use(
  response => {
    let res = response.data;
    let { data, code } = res;
    // console.log(response)
    if (code !== 200) {
      Message({
        message: res.data.message,
        type: "error",
        duration: 5 * 1000
      });
      if (res.code === 5000) {
        console.log("token过期");
      }
      return false;
    } else {
      //这里吧错误响应不再返回到页面,直接统一处理掉,只有正确的返回才会被接收并做下一步处理
      return data;
    }
  },
  err => {
    //这里处理服务端错误
    console.log("err" + err); // for debug
    Message({
      message: err.message,
      type: "error",
      duration: 5 * 1000
    });
    return Promise.reject(err);
  }
);
export default service;

src下新建api文件夹 api文件下新建user.js写用户请求

import service from "@/tools/request";

export function login({ username, password }) {
  return service({
    url: "/user/login",
    method: "post",
    data: {
      username,
      password
    }
  });
}
测试请求

在helloworld.vue中测试发送请求

// html
<template>
  <div class="hello">
    <button @click="sendRequest">发送请求</button>
  </div>
</template>
// js
import { login } from "@/api/user";
export default {
  name: "HelloWorld",
  data() {
    return {
      loginForm: {
        username: "rty",
        password: 123
      }
    };
  },
  methods: {
    async sendRequest() {
      let res = await login(this.loginForm);
      console.log(res);
    }
  }
};

点击发送请求,在network中查看返回的数据

请求成功

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • vue-cli3项目创建-配置-发布

    (2) 修改user module -- src/store/module/user.js

    RtyXmd
  • 编写接口连接并查询数据库数据(二)

    安装测试工具postman 不想下载软件的话可以用谷歌插件postman 这个东西是测试用的,不需要的可以不下载

    RtyXmd
  • (0)webpack学习笔记—哈喽~沃德

    webpack是一个现代javascript应用程序的模块打包器(module bundler),他会递归的构建一个依赖关系图,其中包含应用程序需要的每个模块,...

    RtyXmd
  • redux工程化结构

    柴小智
  • 18.3.1日报

    node/lib/module.js里会遍历各种目录,然后加到Module.paths里。 然后electron.asar\renderer\init.js里也...

    龙泉寺扫地僧
  • 如何从Node.js开始-Visual Studio2017

    好吧,简单地说,Node.js是一个服务器框架,可以在Windows,Linux,Unix,Mac OS X等各种平台上运行。它是开源的。

    ccf19881030
  • php工程狮感知的前端工作流程

    最近做了一些总结,之前都是迷迷糊糊,搞不清楚前端之前的相关定位。好好梳理了一下。错误之处请各位指正。

    大愚
  • Win7下VS2008安装cocos2d-2.0-x-2.0.4模板时, 运行InstallWizardForVS2008.js文件执行失败的解决办法

      今天在Win7环境下的VS2008中安装cocos2d-x模板的过程中,当点击InstallWizardForVS2008.js时,弹出“ 没有文件扩...

    ccf19881030
  • 利用 three.js 开发微信小游戏的尝试

    这是一次利用 three.js 开发微信小游戏的尝试,并不能算作是教程,只能算是一篇笔记吧。

    bering
  • 微服务架构案例(02):业务架构设计,系统分层管理

    整合流程基础SpringSecurity,JWT等组件开发。所属代码包:mopsz-admin-client。

    知了一笑

扫码关注云+社区

领取腾讯云代金券