Vue3.0项目框架搭建之四：axios网络请求、拦截器封装

上一章我们引入了elementui库以后，整个项目已经可以开始前端页面的开发了。但是，基于现在前后分离架构的原因，我们需要调用后台接口来获取页面展示的数据。

关于网络请求使用的方法有很多，比较推荐的就是 axios。官方介绍说支持node，可能在以后使用nodejs做服务开发的时候，也能用到。

安装

npm install axios

在api文件夹下面创建index.js文件：

// 引入axios
import axios from 'axios';
// 全局配置
axios.defaults.baseURL = 'http://124.70.xx.xxx:48019';
//默认超时时间 15秒
axios.defaults.timeout = 15000;

export default axios;

发起请求

为系统先开发一个登录页面，创建 login/index.vue：

<template>
  <div class="contain">
    <el-input v-model="name" placeholder="请输入用户名" />
    <el-input v-model="pwd" placeholder="请输入密码" />
    <el-button type="primary" @click="login()">登录</el-button>
  </div>
</template>
<script>
import { loginByUsername } from "/src/api/login";
export default {
  data() {
    return {
      name: "",
      pwd: "",
    };
  },
  methods: {
    login() {
      loginByUsername(this.name, this.pwd).then((res) => {});
    },
  },
};
</script>

<style scoped>
.contain {
  width: 400px;
  padding: 10px;
}
.el-input {
  margin-top: 20px;
}

.el-button {
  margin-top: 20px;
}
</style>

页面中按钮的点击事件绑定到 login() 方法，方法中调用了 loginByUsername，是通过 /api/login 引入的，/api/login.js 代码如下：

import request from './index.js'

export const loginByUsername = (username, password) => request({
	url: '/api/blade-auth/oauth/token',
	method: 'post',
	params: {
	  username,
	  password,
	  grant_type: "password",
	  scope: "all"
	}
  });

这里引入了上一步创建的 /api/index.js 文件，使用了post请求方法传入登录参数。这么做的目的，保证后面系统所有的接口都直接使用配置好的axios，不用再重复配置。

页面测试调用接口，出现跨域错误

代理配置

出现跨域问题在之前的版本，我们都知道在 vue.config.js 文件配置代理即可：

import { defineConfig } from "vite";

// https://vitejs.dev/config/
export default defineConfig({
  server: {
    proxy: {
      '/api': {
        target:'http://124.70.xx.xxx:48019', // 所要代理的目标地址
        rewrite: path => path.replace(/^\/api/, ''), // 重写传过来的path路径，比如 `/api/index/1?id=10&name=zs`（注意:path路径最前面有斜杠（/），因此，正则匹配的时候不要忘了是斜杠（/）开头的；选项的 key 也是斜杠（/）开头的）
        changeOrigin: true,  // true/false, Default: false - changes the origin of the host header to the target URL
      }
    }
  }
});

简单释义，是吧含有 /api 的接口请求代理到 http://124.70.xx.xxx:48019，同时 /api/index.js 中的baseurl需要去掉：

// 引入axios
import axios from 'axios';
// 全局配置，注释掉，以使用代理的地址
// axios.defaults.baseURL = 'http://124.70.xx.xxx:48019';
//默认超时时间 15秒
axios.defaults.timeout = 15000;

export default axios;

这样我们在登录一下：

可以看到接口顺利请求完成，并返回登录的用户信息以及token。

拦截器

上面我们通过登录，获取到了用户token，在系统中要求每个功能接口调用都要在请求头中加入token，要实现这个需求，就需要用到拦截器。

顾名思义，拦截器就是在接口调用之前和拿到响应之后对请求做一定的处理。

我们要在请求头中增加token，就用到请求拦截器，请求拦截器是通过axios.interceptors.request.use方法实现的，下面我们首先对登录页面login方法做个改造，把token存入localstory当中。

    login() {
      loginByUsername(this.name, md5(this.pwd)).then((res) => {
        console.log(res)
        localStorage.setItem("accesstoken",res.data.access_token)
      });
    }

然后修改 /api/index.js

// 引入axios
import axios from 'axios';
// 全局配置，注释掉，以使用代理的地址
// axios.defaults.baseURL = 'http://124.70.xx.xxx:48019';
//默认超时时间 15秒
axios.defaults.timeout = 15000;

// 添加请求拦截器
axios.interceptors.request.use(
  (config) =>{
    let accesstoken = localStorage.getItem('accesstoken')
    if(accesstoken){
        config.headers['accesstoken'] = accesstoken
    }
    return config;
  },
  (error) =>{
    return Promise.reject(error);
  }
);
export default axios;

在登录后调用其它接口，就可以在请求头中看到accesstoken了：

类似的响应拦截器，可以对鉴权或者接口错误做统一提示：

// 添加响应拦截器
axios.interceptors.response.use(
  (response) => {
    //获取状态码
    const status = response.data.code || response.status;
    //如果是401则跳转到登录页面
    if (status === 401) router.push({ path: "/login" });

    return response;
  },
  (error) => {
    // 对响应错误做点什么
    return Promise.reject(error);
  }
);

至此axios关键的配置已经基本设置完成，其它相关功能大家可以参看官网api，这里不再演示。

上面我们通过localstory存储了用户token，但是我们知道vue有个专门的数据仓库 vuex，下篇文章我们要通过vue3.0集成vuex，用作统一的存储仓库。

敬请期待。