axios拦截器与api方法封装与使用

最新推荐文章于 2024-08-04 21:45:12 发布

一影清歌

最新推荐文章于 2024-08-04 21:45:12 发布

阅读量473

点赞数 1

分类专栏： vue前端总结文章标签： vue.js es6 javascript

本文链接：https://blog.csdn.net/weixin_42941045/article/details/106409677

版权

本文介绍了如何在项目中封装axios拦截器以实现请求设置的重用和响应的拦截验证。同时，详细阐述了如何封装createAPI方法，并将API接口按模块划分，存储在src/api目录下，以促进项目的模块化开发。最后，展示了在组件中如何利用async/await优雅地调用这些API。

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

axios拦截器封装与createAPI方法封装

拦截器封装在项目中起到的作用是将在发送请求时对于一些设置进行封装重用，对于请求到的信息进行拦截验证操作。
先是安装axios模块npm i axios --save-dev
目录结构如下：

我们将其写入src/utils/request.js文件中。
代码如下

import axios from "axios"
import store from "@/store"
import {Message,MessageBox,Notification} from "element-ui"
// axios.defaults.headers['Content-Type']="application/json;charset=utf-8"

//创建axios实例
let service=axios.create({
  url:'http://服务器地址',
  baseURL:"http://服务器地址",
  withCredentials:true,
  timeout:10000,
  headers:{
    'Content-Type':'application/x-www.form-urlencoded;application/json;charset=utf-8'
  }
})

//请求拦截器
service.interceptors.request.use(
  config=>{
    let token=store.state.token
    if(token){
      config.headers.authorization='Bearer'+token
    }
    return config
  },
  err=>{
    console.log(err)
    Promise.reject(err)
  }
)
//相应拦截器
service.interceptors.response.use(
  res=>{
    let code=res.data.code
    let msg=res.data.msg
    console.log(res)
    if(code==600){
      MessageBox.confirm('登录状态过期','系统提示',{
        confirmButtonText:"重新登录",
        cancelButtonText:"退出"
      }).then(()=>{
        store.dispatch('LogOut').then(()=>{
          location.reload()