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 条评论
登录 后参与评论

相关文章

来自专栏向治洪

小程序实现原理解析

概述 作为一名前端开发,如果你还停留在应用开发层面,那你就OUT了,快来跟我一起探讨下小程序框架本身底层实现的一些技术细节吧,让我们从小程序的运行机制来深度了解...

2.6K9
来自专栏计算机编程

【vue随手笔记】Vue与ios UIwebview 和 Android webview 交互

6963
来自专栏腾讯NEXT学位

JavaScript全栈开发-工具篇(下)

? 文章目录 ? 四、测试工具 1. 单元测试 单元测试(unit testing),是指对软件中的最小可测试单元进行检查和验证。常见的单元测试工具有: * ...

1252
来自专栏沈唁志

如何加速WordPress网站

本指南提供了一个测试环境,用于说明优化WordPress的过程。环境有两个组成部分:

3523
来自专栏云飞学编程

Python爬虫技巧!网站有反爬?我们有selenium!

框架底层使用JavaScript模拟真实用户对浏览器进行操作。测试脚本执行时,浏览器自动按照脚本代码做出点击,输入,打开,验证等操作,就像真实用户所做的一样,从...

5611
来自专栏V站

WordPress丨如何利用.htaccess文件进行缓存?

将以上代码一字不漏的扔进website中的 .htaccess文件,规律是以秒计算,自行修改!

3124
来自专栏ionic3+

ionic cordova resources问题说明

ionic cordova resources是用于一键打包生成各分辨率icon和splash的命令,在使用过程中可能会遇到以下问题:

1292
来自专栏wOw的Android小站

[iOS] Win8下在Vmware11中安装使用苹果系统OS X 10.10

  近来因为需要做 iOS 的项目,所以需要多花一些时间看看敲敲代码。因为自己手头上并没有 Mac(过年为了闲的时候能玩玩游戏买了联想,唉),想想不能只靠每天在...

1940
来自专栏DeveWork

WordPress免插件仅代码实现文章归档(模板页面)I

许多博友喜欢为自己的博客建立一个文章归档页面。WordPress 可以用插件来实现,但我们一贯遵守可以不用插件则不用的准则,现在Jeff 就为大家带来免插件仅代...

2208
来自专栏Puppeteer学习

一步一步学习Vue(十)

2354

扫码关注云+社区

领取腾讯云代金券