关于项目中axios的简单封装

最新推荐文章于 2024-08-08 11:02:08 发布

陈斌-cb

最新推荐文章于 2024-08-08 11:02:08 发布

阅读量882

点赞数 1

文章标签： vue.js

本文链接：https://blog.youkuaiyun.com/cbbgs_cb/article/details/123753700

版权

本文介绍如何使用Axios模块封装请求接口，包括设置全局默认配置、创建请求与响应拦截器等，确保前后端交互的安全性和效率。

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

axios 是请求后台资源的模块。通过npm install axios -S来安装，在大多数情况下我们需要封装拦截器，在实现登录的过程中我们一般在请求拦截器中来加入token，在响应请求器中通过判断后端返回的状态码来对返回的数据进行不同的处理。如果发送的是跨域请求，需在配置文件中 config/index.js 进行代理配置。

// 可以进行全局默认配置
axios.defaults.baseURL = 'https://api.example.com';
axios.defaults.headers.common['Authorization'] = localStorage.getItem('token') || ''
axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded';
axios.defaults.withCredentials = true  //允许跨域

// 或者使用创建实例
// 使用axios用于对数据的请求
import axios from 'axios'
// 创建axios实例
const instance = axios.create({
  baseURL: baseURL + version,
  timeout: 5000
})

// 创建请求的拦截器,添加token
instance.interceptors.request.use(config => {
  config.headers['Authorization'] = localStorage.getItem('token') || ''
  return config
}, error => {
  return Promise.reject(error)·
})

// 创建响应的拦截器
instance.interceptors.response.use(response => {
  let res = null

  // 对相应的数据进行过滤
  if (response.status === 200) {
    if (response.data && response.data.err === 0) {
      res = response.data.data
    } else if (response.data.err === -1) {
      return alert('token无效')
    }
  } else {
    return alert('请求失败')
  }

  return res
}, error => {
  return Promise.reject(error)
})

export default instance