Vue封装接口思路（包括请求（响应拦截器））

忧郁火龙果

于 2023-01-10 13:58:52 发布

阅读量3k

点赞数 1

分类专栏： Vue笔记文章标签： vue.js javascript 前端

本文链接：https://blog.youkuaiyun.com/LQlove1/article/details/128618072

版权

Vue笔记专栏收录该内容

16 篇文章

订阅专栏

本文介绍了在Vue项目中如何封装axios接口，包括创建通用ajax工具函数层、模块化的ajax函数层以及在组件中使用。同时，详细阐述了设置请求拦截器携带token以及响应拦截器处理返回数据的思路和代码实现。

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

一、Vue封装接口思路


 1. 通用的ajax工具函数层（所有的ajax都用这个函数）
		服务器地址
		请求超时 
		请求拦截
		响应拦截
 2. ajax函数层
		分模块封装
 3. 组件层
		引用
		使用

二、封装接口实现

2-1、通用的ajax工具函数层

utills文件夹下面的request.js

// 1.ajax工具函数层
import Axios from "axios";

// 2.服务器地址
const request = Axios.create({
    baseURL:'http://localhost:3000/api'
})
// 3.超时时间、
request.defaults.timeout = 30000

// 4.请求拦截器
request.interceptors.request.use((config)=>{
    return config
},(err)=>{
    return Promise.reject(err)
})

// 5.相应拦截器
Axios.interceptors.response.use((response)=>{
    return response
},(err)=>{
    return Promise.reject(err)
})

export default  request

2-2、ajax函数层

api文件夹下面的acount.js账号api层

// 引入封装好的request
import request  from "@/utils/request";

// 注册请求
export const register = (data)=>{
    return request({
        url:'/users/register',
        method:'POST',
        data:data
    })
}
// 登录请求
export const login = (data)=>{
    return request({
        url:'/users/login',
        method:'POST',
        data:data
    })
}

2-3、组件层

login.vue组件中使用它

async login(){
      const params = {'username':this.loginRuleForm.username,'password':this.loginRuleForm.password}
      const res = await login(params)
      console.log(res.data);
      if(res.data.code == 200){
        this.$message.success(res.data.msg)
        this.$router.push('/managehome')
      }else{
        this.$message.error(res.data.msg)
      }
    }

三、请求拦截器

**任务：**拦截前端发送请求，携带token

3-1、携带token思路

1.从本地存储拿到token给config.headers.Authorization一个token值
2.判断本地是否有token，如果有才携带

请求拦截器代码：

// 4.请求拦截器
request.interceptors.request.use((config)=>{
    const token = localStorage.getItem('token')
    // 如果token存在就携带token到服务器
    if(token){
        config.headers.Authorization = token
    }
    return config
},(err)=>{
    return Promise.reject(err)
})

四、响应拦截器

**任务：**拦截后端返回的数据进行操作，弹出成功或者失败的提示信息

4-1、拦截操作数据思路

1.response就是返回来的数据
2.response.data拿到返回来的数据信息
3.进行判断
4.按需引入elementUI的Message

响应拦截器代码：

// 5.响应拦截器
request.interceptors.response.use(response=>{
    console.log('响应拦截器',response);
    if(response.data.code == 200){
        Message.success(response.data.msg)
      }else{
        Message.error(response.data.msg)
      }
    return response
},(err)=>{
    return Promise.reject(err)
})