封装axios请求方法、请求拦截器、响应拦截器

封装axios请求方法、请求拦截器、响应拦截器

在项目中的utils文件夹中创建api.js、request.js用于封装请求方法、统一管理后端接口URL及请求方法

1.在utils文件夹中创建request.js并安装axios插件

axios安装命令：npm install axios -S
安装完成后在utils文件夹下新建的request.js文件中引入axios及ElementUI框架。
话不多说直接上代码，代码中有注释
request.js文件代码

// 引入axios
import axios from 'axios'
import ElementUI from 'element-ui';

//1. 创建新的axios实例，
const instance = axios.create({
    // 设置接口域名
    baseURL: 'http://127.*.*.*:8888',
    //设置请求超时时间
    timeout: "7000"
})

// 请求拦截器（请求拦截器作用就是用于发送接口请求前需要做的操作）
instance.interceptors.request.use((config) => {
    //发请求前做的一些处理，数据转化，配置请求头，设置token,设置loading等，根据需求去添加
    const token = window.sessionStorage.getItem('token')
    if (token) { // 判断是否存在token，如果存在的话，则每个http header都加上token
        config.headers.authorization = `${token}` //请求头加上token
    }
    return config
})

// 响应拦截器（响应拦截器作用就是接收到响应数据后需要做的一些操作，比如判断接口状态）
instance.interceptors.response.use((res) => {
    // 接收到响应数据并成功后的一些共有的处理，关闭loading等
    // res为回调函数，也就是接口请求成功后返回的数据
    // res.data.meta.status为当前接口的状态
    let status = res.data.meta.status
    // switch函数判断
    switch (status) {
        case 401:
        	// 如果switch函数中的status是401就会执行以下操作，使用ElementUI的消息提示，将错误信息提示给用户
            ElementUI.Message.error(res.data.meta.msg);
            break;
        case 403:
            ElementUI.Message.error(res.data.meta.msg);
            break;
        case 404:
            ElementUI.Message.error(res.data.meta.msg);
            break;
        case 422:
            ElementUI.Message.error(res.data.meta.msg);
            break;
        case 500:
            ElementUI.Message.error(res.data.meta.msg);
            break;
        default:
            break;
    }
    // 响应拦截器执行完后需要将接口返回的数据也就是res回调函数，return给到之后的请求方法
    return res
})

// 将新创建的一个axios导出
export default instance

2.在utils文件夹中创建api.js，并在api.js文件夹里引入刚才创建好的request文件

api.js文件用于统一管理后端接口的URL和前端的请求方法，主要是为了后期方便维护。
话不多说直接上代码，代码中有注释

// 在api文件夹里引入刚才创建好的request文件
import request from "./request";

// 在这里统一管理请求方法
// request为request.js文件创建好的axios实例
// data为组件中调用请求方法传的请求参数（params）
// "/api/private/v1/users"为接口的url
// 这么写的目的为了项目后期的维护。例如："/api/private/v1/users"接口需要在多个组件中请求，项目后期后端将"/api/private/v1/users"改为"/api/private/v1/user"少了一个s，这时前端开发者只需到api.js中找到该接口的请求方法，给该接口减少一个s就可以了，其余调用该请求方法的组件就无需变动
// 用户数据列表方法,请求方式为get，export function为导出也就是导出该请求方法
export function getUsers(data) {
    return request.get("/api/private/v1/users", {
        params: data
    });
}
// 登录验证方法，请求方式为post
export function postLogin(data) {
    return request.post("/api/private/v1/login", data);
}

这时我们的请求方法、请求拦截器、响应拦截器到这里差不多就封装完了，只需到组件中去调用该组件需要调用的请求方法了

3.login组件中调用登录验证方法 在login组件中我们需要引入之前创建的api.js并拿到我们需要用到的请求方法

最后一步比较简单直接上代码

<template>
	<div>
  		<el-button type="primary" @click="login()">登录</el-button>
  	</div>
</template>
<script>
// 首先在该组件引入utils文件下的api.js,并拿到需要调用的请求方法，为什么能拿到api.js中的方法，因为该方法在封装的时候导出了
// 如果需要引入多个请求方法，写法：{postLogin , postLogin}
import { postLogin } from "@/utils/api.js";
export default {
  data() {
    return {
    
    };
  },
  methods: {
    // 登录方法
    login() {
      let params = {
        username: this.form.name,
        password: this.form.password
      };
      // 这里的postLogin就是我们从api.js中调用的请求方法，params是该接口请求时需要传递的参数，也就是api.js中请求方法中的data
      //res为请求成功的回调函数（也就是请求成功返回来的数据）
      postLogin(params).then(res => {
      // 判断接口是否请求成功，如果接口状态为200就是成功，200为什么不写入request.js中的响应拦截器里的switch中？因为每个接口请求成功后的需求是不一样的
        if (res.data.meta.status == 200) {
          //登录成功将token存储到sessionStorage中
          sessionStorage.setItem("token", res.data.data.token);
          this.$message({
            message: res.data.meta.msg,
            type: "success"
          });
        }
      });
    },
  }
};
</script>
<style lang="less" scoped>

</style>