Vue iView二次封装axios（以实现登录功能为例）

最新推荐文章于 2023-10-07 15:43:44 发布

Taeyeon-IU

最新推荐文章于 2023-10-07 15:43:44 发布

阅读量1.1k

点赞数

分类专栏：前端文章标签： vue.js 前端 vue login

本文链接：https://blog.youkuaiyun.com/qq_36649922/article/details/117423663

版权

本文介绍如何在Vue项目中使用iView和axios进行API封装，特别是为登录功能设置请求头、验证码、操作码处理和登录实现。通过修改setting.js的apiBaseURL，创建base.js和login.js，配置request/index.js处理请求头和响应码，调整login.vue页面，设置account.js登录接口，以及在store中存储登录信息，完成整个流程。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一般为了便于管理axios（Ajax）请求，我们都会对axios进行封装，这样即减少了代码的数量，又便于管理，不用出错了就修改很多代码。

下面就让我们用iView实现登录功能来展示一下过程及使用方法，主要实现的有：

（1）封装axios（Ajax）请求，设置请求头的Signature-Token和Signature-Time等；

（2）实现验证码功能；

（3）实现操作码处理（包括登录失败，验证码更新）；

（4）实现登录功能；

1. 修改src文件夹下的setting.js文件里面的apiBaseURL属性，把他修改为自己接口请求的地址相同部分，例如"http://192.168.14.106:8080/demo/"，这样我们写axios接口时就只要写后面不同的部分即可；

2. 在src/api文件夹下创建base.js文件；

import axios from '../plugins/request'

/*
 * 统一的post请求封装
 */
export function fetch(url, params) {
    let request = new Promise((resolve, reject) => {
        // 设置请求头的Content-Type
        axios.defaults.headers.post['Content-Type'] = 'application/json;charset=utf-8';
        axios.post(url, JSON.stringify(params)).then(response => {
            // response只返回data中的数据
            // 在axios from '../plugins/request'文件下86行，return dataAxios.data;
            // 单单返回data值
            if(response.code == 0) {// code是返回码，0代表成功
                resolve(response);
            } esle {
                this.$Message.error(response.msg);// msg是返回信息，提示框弹出
                fetch(url, params);// 循环执行，直至成功为止
                return;
            }
        }).catch(err => {
            reject(err.data);
        })
    });
    return request;
}

/*
 * 统一封装get请求
 */
export function get(url, params) {
    return new Promise((resolve, reject) => {
        axios.get(url, {
            params: params
        }).then(res => {
            resolve(res);
        }).catch(err => {
            reject(err);
        })
    });
}

3. 在src/api文件夹下创建login.js；

import {fetch, get} from './base.js';

/* 获取验证码 */
export const getCaptcha = params => {
    return fetch('captcha', params);
};

/* 刷新JWT-token值 */
export const refreshToken = params => {
    return fetch('refreshToken', params);
};

4. 在src/plugins/request文件夹下的index.js文件，在这个文件里面，我们即能够给axios（Ajax）设置请求头的Signature-Token和Signature-Timestamp（有些请求不需要也没关系，不会有什么影响的），又能够对axios（Ajax）请求的返回码进行处理，针对不同返回码进行不同的响应；

import store from '@/store';
import axios from 'axios';
import util from '@/lib/util';
import Setting from '@/setting';

import { Message, Notice } from 'view-design';

import router from '../../router';// 页面跳转
import {refreshToken} from '@/api/login.js';// 导入更新JWT-token接口文件

/* 创建一个错误 */
function errorCreate(msg) {
    const err = new Error(msg);
    errorLog(err);
    throw err;
}

/* 记录和显示错误 */
function errorLog(err) {
    // 添加到日志
    store.dispatch('admin/log/push', {
        message: '数据请求异常',
        type: 'error';
        meta: {
            error: err
        }
    });
    // 打印到控制台
    if(process.env.N