axios拦截器/数据交互实例

最新推荐文章于 2025-07-13 11:06:19 发布

转载最新推荐文章于 2025-07-13 11:06:19 发布 · 1.2k 阅读

文章标签：

#axios #vue #拦截器 #数据交互

vue 专栏收录该内容

29 篇文章

订阅专栏

本文介绍如何在Vue项目中使用axios封装技术，实现与RAP2模拟接口的高效数据交互。通过创建axios实例，设置请求和响应拦截器，处理请求参数及响应数据，实现加载动画控制和错误处理。

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

本文章是在rap2模拟接口下实现axios交互功能,axios拦截大部分代码逻辑来自https://blog.youkuaiyun.com/qq_38145702/article/details/81558816

1.src目录下新建axios文件夹,内有api.js和request.js

首先是request.js

//对axios的封装
/****** 创建axios实例 ******/
import axios from 'axios'
import qs from 'qs'
const service = axios.create({
    baseURL: process.env.BASE_URL,  // api的base_url
    timeout: 5000  // 请求超时时间
});


/****** request拦截器==>对请求参数做处理 ******/
service.interceptors.request.use(config => {
    console.log('数据加载中……')//出现加载中动画
 
    config.method === 'post'
        ? config.data = qs.stringify({...config.data})
        : config.params = {...config.params};
    config.headers['Content-Type'] = 'application/x-www-form-urlencoded';
 
    return config;
}, error => {  //请求错误处理
    console.log('error',error)//错误提示
    Promise.reject(error)
});

/****** respone拦截器==>对响应做处理 ******/
service.interceptors.response.use(
    response => {  //成功请求到数据
        console.log('加载中动画结束,hide')//数据请求成功,自然加载中动画隐藏
        //这里根据后端提供的数据进行对应的处理
        if (response) {
            return response.data;
        } else {
            console.log(response)
        }
    },
    error => {  //响应错误处理
        console.log('error',error);
        let text = error
            ? '404'
            : '网络异常，请重试';
        console.log(text)
 
        return Promise.reject(error)
    }
);

export default service;

然后是api.js

//api用于写接口
//api.js
import service from './request'
export const getPersonInfo = data => {
    return service({
        url: 'http://rap2api.taobao.org/app/mock/19521/api/u/signup',
        method: 'post',
        data
    })
};

2.最后是在app.vue中使用

<template>
  <div id="app">
    <div id="nav">
      <router-link to="/">Home</router-link> |
      <router-link to="/about">About</router-link>
    </div>
    <router-view/>
  </div>
</template>
<script>
import {getPersonInfo} from '@/axios/api.js'
export default {
  created: async function () {
    const params = {
      phoneNumber: 12345678901
    };
    let res = await getPersonInfo(params);
    console.log(res);
  }
}
</script>
<style lang="stylus">

</style>