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

RtyXmd

发布于 2018-08-30 14:42:57

1.3K0

发布于 2018-08-30 14:42:57

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中查看返回的数据