axios封装与api接口管理，web前端设计与开发，web前端开发初学者

最新推荐文章于 2024-10-08 17:48:41 发布

程序员伏地魔

最新推荐文章于 2024-10-08 17:48:41 发布

阅读量567

点赞数 8

分类专栏： 2024年前端程序员文章标签：前端

本文链接：https://blog.csdn.net/m0_56604447/article/details/136817896

版权

2024年前端程序员专栏收录该内容

9 篇文章 0 订阅

订阅专栏

本文介绍了如何在Vue应用中使用axios进行登录验证，包括存储和检查token，以及响应拦截器的设置。着重讨论了如何处理未登录、登录过期和错误状态码的响应。同时提到了API接口的管理和前端面试准备的相关资源。

摘要由CSDN通过智能技术生成

console.log(error) // for debug

return Promise.reject(error)

}

)

这里说一下token，一般是在登录完成之后，将用户的token通过localStorage或者cookie存在本地，然后用户每次在进入页面的时候（即在main.js中），会首先从本地存储中读取token，如果token存在说明用户已经登陆过，则更新vuex中的token状态。然后，在每次请求接口的时候，都会在请求的header中携带token，后台人员就可以根据你携带的token来判断你的登录是否过期，如果没有携带，则说明没有登录过。这时候或许有些小伙伴会有疑问了，就是每个请求都携带token，那么要是一个页面不需要用户登录就可以访问的怎么办呢？其实，你前端的请求可以携带token，但是后台可以选择不接收啊！

响应的拦截

// 响应拦截器

service.interceptors.response.use(

response => {

// 如果返回的状态码为200，说明接口请求成功，可以正常拿到数据

// 否则的话抛出错误

if (response.status === 200) {

return Promise.resolve(response);

} else {

return Promise.reject(response);

}

// 服务器状态码不是2开头的的情况

// 这里可以跟你们的后台开发人员协商好统一的错误状态码

// 然后根据返回的状态码进行一些操作，例如登录过期提示，错误提示等等

// 下面列举几个常见的操作，其他需求可自行扩展

error => {

if (error.response.status) {

switch (error.response.status) {

// 401: 未登录

// 未登录则跳转登录页面，并携带当前页面的路径

// 在登录成功后返回当前页面，这一步需要在登录页操作。

case 401:

router.replace({

path: ‘/login’,

query: {

redirect: router.currentRoute.fullPath

}

});

break;

// 403 token过期

// 登录过期对用户进行提示

// 清除本地token和清空vuex中token对象

// 跳转登录页面

case 403:

Toast({

message: ‘登录过期，请重新登录’,

duration: 1000,

forbidClick: true

});

// 清除token

store.dispatch(‘FedLogOut’).then(() => {

// 跳转登录页面，并将要浏览的页面fullPath传过去，登录成功后跳转需要访问的页面

router.replace({

path: ‘/login’,

query: {

redirect:router.currentRoute.fullPath

}

}) })

break;

// 404请求不存在

case 404:

Toast({

message: ‘网络请求不存在’,

duration: 1500,

forbidClick: true

});

break;

// 其他错误，直接抛出错误提示

default:

Toast({

message: error.response.data.message,

duration: 1500,

forbidClick: true

});

}

return Promise.reject(error.response);

}else {

// 处理断网的情况

// eg:请求超时或断网时，更新state的network状态

// network状态在app.vue中控制着一个全局的断网提示组件的显示隐藏

// 关于断网组件中的刷新重新获取数据，会在断网组件中说明

store.commit(‘changeNetwork’, false);

}

});

//最后导出实例

export default service;

响应拦截器很好理解，就是服务器返回给我们的数据，我们在拿到之前可以对他进行一些处理。例如上面的思想：如果后台返回的状态码是200，则正常返回数据，否则的根据错误的状态码类型进行一些我们需要的错误，其实这里主要就是进行了错误的统一处理和没登录或登录过期后调整登录页的一个操作。

到此处, axios的封装基本就完成了,下面再简单说下api的统一管理

三、api接口统一管理

新建了一个api文件夹，里面有一个index.js，以及多个根据模块划分的接口js文件。index.js是一个api的出口，其他js则用来管理各个模块的接口。

例如下面的article.js:

/**

article模块接口列表

import request from ‘@/network/http’; // 导入http中创建的axios实例

import qs from ‘qs’; // 根据需求是否导入qs模块

const article = {

// 新闻列表

articleList () {

return request({

url: ‘/artical’,

method: ‘get’,

params,

hideloading: false //设置不隐藏加载loading

})

// 新闻详情,演示

articleDetail (id, params) {

return request({

url: ‘/detail’,

method: ‘get’,

params:{

goodsId

hideloading: true

})

// post提交

return request({

url:‘/adduser’,

method:‘post’,

data:qs.stringify(data), //注意post提交用data参数

hideloading: true

})

}

// 其他接口…………

}

export default article;

index.js代码：

/**

api接口的统一出口

// 文章模块接口

import article from ‘@/api/article’;

// 其他模块的接口……

// 导出接口

export default {

article,

// ……

}

在组件中的使用（按需导入）

import {article} from ‘@/api/index’

created(){

article.articleList().then(info=>{

if(info.code==200)

this.num=info.data

}

})

}

小编13年上海交大毕业，曾经在小公司待过，也去过华为、OPPO等大厂，18年进入阿里一直到现在。

深知大多数初中级前端工程师，想要提升技能，往往是自己摸索成长或者是报班学习，但自己不成体系的自学效果低效又漫长，而且极易碰到天花板技术停滞不前！
因此收集整理了一份《2024年Web前端开发全套学习资料》送给大家，初衷也很简单，就是希望能够帮助到想自学提升又不知道该从何学起的朋友，同时减轻大家的负担。