vue2使用axios封装

在Vue2中使用axios进行封装的步骤如下：

首先，在项目中创建一个`services.js`文件，用于创建axios实例。在这个文件中，我们需要导入axios并设置一些公共的请求配置，比如`baseURL`和`timeout`。可以参考以下代码：

import axios from "axios";
import { BASE_URL, TIME_OUT } from './config'

export function request(config){
  const service = axios.create({
    baseURL: BASE_URL,
    timeout: TIME_OUT
  })

  // 请求拦截器
  service.interceptors.request.use(config => {
    // 这里可以设置token
    return config
  }, err => {})

  // 响应拦截器
  service.interceptors.response.use(res => {
    if(res.status === 200){
      // 请求成功的处理逻辑
      Message({
        message: '请求成功',
        center: true
      })
    } else if (res.status === 401) {
      // 未授权的处理逻辑
      Message({
        message: '未授权，请重新登录',
        center: true
      })
    }
    return res
  }, err => {
    // 异常处理逻辑
    return err
  })

  return service(config)
}

接下来，在根据不同的开发环境配置不同的请求。可以在一个新建的文件中定义`BASE_URL`和`TIME_OUT`，根据`process.env.NODE_ENV`的值来选择不同的配置。例如：

let BASE_URL = ''
let TIME_OUT = 10000

if (process.env.NODE_ENV === 'development') {
  BASE_URL = '/api'
} else if (process.env.NODE_ENV === 'production') {
  BASE_URL = 'http://jiang.org/prod'
} else {
  BASE_URL = 'http://jiang.org/test'
}

export { BASE_URL, TIME_OUT }

最后，在需要使用axios的地方引入`services.js`文件，并调用封装好的请求方法。可以在需要的地方使用`jyRequest.post()`、`jyRequest.get()`、`jyRequest.patch()`等方法进行相应的请求。

import { request } from "./services";

const jyRequest = {
  post(config){
    return request({...config, method: 'POST'})
  },
  get(config){
    return request({...config, method: 'GET'})
  },
  patch(config){
    return request({...config, method: 'PATCH'})
  }
}

export default jyRequest

这样就完成了在Vue2中使用axios的封装。<span class="em">1</span><span class="em">2</span><span class="em">3</span>
#### 引用[.reference_title]
- *1* *2* *3* [vue2 封装网络请求 axios](https://blog.csdn.net/weixin_51614564/article/details/126795027)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v92^chatsearchT3_1"}}] [.reference_item style="max-width: 100%"]
[ .reference_list ]