【axios】封装axios

最新推荐文章于 2023-04-12 10:51:46 发布

小花花inhere

最新推荐文章于 2023-04-12 10:51:46 发布

阅读量469

点赞数

分类专栏： axios 文章标签： axios vue jquery ajax 接口

本文链接：https://blog.csdn.net/IT429/article/details/112904150

版权

axios 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

该博客介绍了如何在Vue项目中使用axios库创建一个HTTP请求服务。首先导入axios和auth模块，设置默认的Content-Type和超时时间。然后创建axios实例，并配置请求和响应拦截器，用于处理请求前的token设置和响应时的错误处理。最后，提供了一个登录API的示例。

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

在项目的utils文件夹下建个request.js

import axios from 'axios'
import { getToken } from '@/utils/auth'

axios.defaults.headers['Content-Type'] = 'application/json;charset=utf-8'

// 创建axios实例
const service = axios.create({
  // axios中请求配置有baseURL选项，表示请求URL公共部分
  baseURL: process.env.VUE_APP_BASE_API,
  // 超时时长
  timeout: 300000
})

// request拦截器
service.interceptors.request.use(config => {
  // 是否需要设置 token
  const isToken = (config.headers || {}).isToken === false
  if (getToken() && !isToken) {
    config.headers['Authorization'] = 'Bearer ' + getToken() // 让每个请求携带自定义token 请根据实际情况自行修改
  }
  return config
}, error => {
    console.log(error)
    Promise.reject(error)
})

// 响应拦截器
service.interceptors.response.use(res => {
    // 未设置状态码则默认成功状态
    const code = res.data.code || 200;
    if (code === 401) {
   	  //登录状态已过期,引导重新登录
    } else if (code === 500) {
      //提示接口出错
    } else {
      return res.data
    }
  },
  error => {
    console.log('err' + error)
    return Promise.reject(error)
  }
)

export default service

api.js

import request from '@/utils/request'

// 登录方法
export function login(data) {
  return request({
    url: '/login',
    method: 'post',
    data: data
  })
}