封装axios大体思路

雪雨听风

已于 2023-08-24 21:14:12 修改

阅读量344

点赞数

分类专栏： axios 文章标签： javascript 前端开发语言

于 2022-11-11 17:58:15 首次发布

本文链接：https://blog.youkuaiyun.com/fengyabin123/article/details/127810467

版权

axios 专栏收录该内容

1 篇文章

订阅专栏

本文详细介绍了如何在前端项目中引入axios库，并设置请求和响应拦截器来处理请求头、token管理和错误状态码的处理。登录场景中，表单验证成功后，通过axios发送登录请求，成功则存储token和用户信息，失败则根据状态码进行相应操作，如未登录则重定向至登录页面。

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

引入axios

引入localstroge （utils中的工具类）

添加请求拦截器

	主要处理请求头（发送给后端），例如token，（在每次请求前都要携带token），还有其他自定义的请求头

添加响应拦截器

	处理响应数据

添加错误请求函数

	根据返回的状态码判断各种状态，比如403，状态失效，清空localstroge，其他状态码动态显示返回的msg信息，最终重定向login页面	...等等操作

添加成功请求函数

	也是根据状态码判断，比如code==40000 表示未登录，跳转到/login	...等等操作

最终定义函数，返回promise，export 这个函数名

函数参数：就是调用接口时传递的data+定义接口时的默认参数
函数内容：
定义公共参数
定义请求参数(axios的配置，method,baseURL,url,responseType,timeout等)
定义meta，将meta（请求接口时传data，meta），meta是对象，直接赋值给headers，此时相当于给headers初始化。

最后：

const promise = new Promise((resolve, reject) => {
    axios(httpDefaultOpts).then(response => {
      handleSuccess(response, resolve, opts)
    }).catch(error => {
      handleError(error, reject, opts)
    })
  })
  return promise

登录页面点击登录按钮后

1 首先校验表单规则，校验成功后，请求接口
2 接口传入表单数据，meta等字段
3 请求成功后，拿到成功的数据，将token expiretime等存入store中
4 store中的mutation将val值存入localstorage中，将用户信息也存入store中，且存入localstorage中