基于axios的ajax请求封装

scorpio_h

于 2018-02-27 16:40:40 发布

阅读量1.3k

点赞数

CC 4.0 BY-SA版权

分类专栏： vue

本文链接：https://blog.youkuaiyun.com/scorpio_h/article/details/79390287

vue 专栏收录该内容

23 篇文章

订阅专栏

本文介绍了一个基于Axios库的HTTP客户端配置示例，包括默认请求设置、请求及响应拦截器的使用方法。通过自定义配置实现了如超时设置、携带凭证、响应类型等定制化需求，并通过拦截器对特定请求进行特殊处理。

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

import axios from 'axios'

// 默认请求配置
let defaultConfig = {
  method: 'GET',
  baseURL: process.env.BASE_API + process.env.API_BASE_URL,
  timeout: 3000,
  withCredentials: true,
  // 配置请求头
  // headers: {
  //   'Content-Type': 'application/x-www-form-urlencoded'
  // },
  responseType: 'json', // 默认的响应格式
  // 只处理函数返回范围中的错误代码
  validateStatus: status => {
    return status >= 100 && status <= 600
  }
}

let instance = axios.create(defaultConfig)

// 添加一个请求拦截器
instance.interceptors.request.use(config => {
  // 根据参数更改配置
  if (!config.url) {
    return
  }
  if (config.fileFlag) {
    config.headers['Content-Type'] = 'multipart/form-data'
  }
  return config
})

// 添加一个响应拦截器
instance.interceptors.response.use(response => {
  return response.data
}, error => {
  if (!error.status) {
    console.log('time out')
    return
  }
  console.log('error:', error)
})

export default instance