axios封装以及拦截器

最新推荐文章于 2024-07-25 22:35:58 发布

qq_41905481

最新推荐文章于 2024-07-25 22:35:58 发布

阅读量88

点赞数

分类专栏：前端封装文章标签： vue.js ajax javascript node.js

本文链接：https://blog.csdn.net/qq_41905481/article/details/120565434

版权

前端封装专栏收录该内容

1 篇文章 0 订阅

订阅专栏

本文介绍如何在Vue.js项目中全局封装axios，以提高API接口管理的便利性。通过创建http.js进行axios的基础配置，并利用request.js设置请求拦截器和响应拦截器，实现统一的错误处理和增强的请求流程控制。

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

原作者链接：www.jianshu.com/p/1a4b4c67e…

vue脚手架中，全局封装axios，让使用过程中更方便，更加容易管理各种api接口

一、axios封装——http.js

import { axios } from './request'
// get 请求
const get = function (url, params) {
  return new Promise((resolve, reject) => {
    axios.get(url, {
      params: params
    }).then(res => {
      resolve(res.data)
    }).catch(err => {
      reject(err.data)
    })
  })
}
// POST 请求
const post = function (url, data) {
  return new Promise((resolve, reject) => {
    axios.post(url, data).then(res => {
      resolve(res.data)
    }).catch(err => {
      reject(err.data)
    })
  })
}
// PUT 请求
const put = function (url, data) {
  return new Promise((resolve, reject) => {
    axios.put(url, data).then(res => {
      resolve(res.data)
    }).catch(err => {
      reject(err.data)
    })
  })
}
// DELETE 请求
const del = function (url, data) {
  return new Promise((resolve, reject) => {
    axios.delete(url, data).then(res => {
      resolve(res.data)
    }).catch(err => {
      reject(err.data)
    })
  })
}

export default { get, post, put, del }
复制代码

二、请求拦截器与响应拦截器——request.js

// 引入 axios
import axios from 'axios'
// axios 配置的请求根路径
axios.defaults.baseURL = process.env.NODE_ENV === 'development' ? 'xx' : 'xx'
// 请求超时
axios.defaults.timeout = 60000

// axios 请求拦截器
axios.interceptors.request.use(config => {
  // 为请求头添加 token
  config.headers.Authorization = localStorage.getItem('token')
  return config
}, error => {
  return Promise.reject(error)
})
// axios 响应拦截器
axios.interceptors.response.use(response => {
  switch (response.data.code) {
    // ...
  }
  return response
}, err => {
  return Promise.reject(err)
})
export { axios }