Vue开发问题 —— axios二次封装，请求、响应拦截器。

什么是 axios？

Axios 是一个基于 promise 的 HTTP 库，可以用在浏览器和 node.js 中。

1，安装

使用 npm

npm install axios

2，创建一个request.js，将下面内容贴到request.js3

import axios from "axios";
import router from "@/router";
// 创建一个 axios 实例
const service = axios.create({
    baseURL: process.env.VUE_APP_BASE_API, // url = base url + request url
    withCredentials: false, // 跨域请求时是否需要使用凭证 default
    timeout: 50000 // timeout` 指定请求超时的毫秒数(0 表示无超时时间) 如果请求话费了超过 `timeout` 的时间，请求将被中断
});

// 添加请求拦截器
service.interceptors.request.use(
    config => {
        /**
         * 判断用户token信息是否存在,这里用到了localStorage
         */
        const token = localStorage.getItem('token');
        if (token) {
            // `headers` 是即将被发送的自定义请求头
            config.headers["x-auth-token"] = token; //配置请求头信息
        }
        // 在发送请求之前做些什么
        return config;
    },
    error => {
        // 对请求错误做些什么
        return Promise.reject(error);
    }
);

// 添加响应拦截器
service.interceptors.response.use(
    response => {
        if (
            response.config &&
            response.headers["content-type"] === "application/json" &&
            response.status === 200
        ) {
            return;
        }
        let data = response.data;
        if (!data) {
            window.location.reload();
        }
        if (data.status == "200") {
            return data.body;
        }
        if (data.status == "401" || data.status == 401) {
            //登录超时，清除用户信息，跳转到登录页
            localStorage.clear();
            router.push({
                name: "login"
            });
            return;
        }
    },
    error => {
        // 对响应错误做点什么
        return Promise.reject(error);
    }
);

export default service;

 3，创建一个api文件夹，下面以登录接口为例

//这里是在login,js文件中
import request from '@/request'
/**
 * 请求方法
 * @param {Object} option (用于axios config 中的参数如:data,params,...)
 * @param {string} id(用于url中需要的参数，url需要多个参数，方法继续加参数即可)
 */
export function login(option) {
    return request({
        url: '/login', //请求url
        method: 'post', //这里方法的类型可以写get,post,put,delete
        ...option  //向后台返回的数据
    })
}

4，页面中运用

<template>
  <div class="login-page">
    <div class="login-container">
      <div class="login-page-content">
        <div class="login-form">
          <el-form
            ref="ruleForm"
            :model="formLabelAlign"
            :rules="rules"
            label-position="left"
          >
            <div class="login-form-title">欢迎登培训管理平台</div>
            <el-form-item prop="username">
              <el-input v-model="formLabelAlign.username" placeholder="请输入账号" />
            </el-form-item>
            <el-form-item prop="password">
              <el-input
                v-model="formLabelAlign.password"
                type="password"
                placeholder="请输入密码"
              />
            </el-form-item>
            <el-form-item>
              <el-button
                :loading="loading"
                class="block-btn"
                type="primary"
                @click="handleSubmit('ruleForm')"
              >
                登录
              </el-button>
            </el-form-item>
          </el-form>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import { login } from "@/api/login";
export default {
  data() {
    return {
      formLabelAlign: {
        username: "admin",
        password: "123456",
      },
      loading: false,
    };
  },

  methods: {
    handleSubmit(formName) {
      // 登录的接口
      this.loading = true;
      login({ data: this.formLabelAlign })
        .then((res) => {
          localStorage.setItem("token", res.token);
          this.$message.success("登陆成功");
        })
        .finally(() => {
          this.$router.push({ path: "/" });
          this.loading = false;
        });
    },
  },
};
</script>
<style lang="less" scoped></style>