封装vue的ajax请求

Vue 中可以使用 axios 来发送 AJAX 请求，下面是一个封装的示例：

1. 首先，在项目中安装 axios：

npm install axios --save

        2.在 Vue 项目中创建一个 api.js 文件，用于封装 AJAX 请求：

import axios from 'axios'

const instance = axios.create({
  baseURL: 'http://example.com/api', // 接口基础路径
  timeout: 10000 // 超时时间（毫秒）
})

// 添加请求拦截器
instance.interceptors.request.use(function (config) {
  // 在请求发送之前做一些处理
  return config
}, function (error) {
  // 对请求错误做些什么
  return Promise.reject(error)
})

// 添加响应拦截器
instance.interceptors.response.use(function (response) {
  // 对响应数据做一些处理
  return response.data
}, function (error) {
  // 对响应错误做些什么
  return Promise.reject(error)
})

// 封装 GET 请求方法
export const get = (url, params) => {
  return instance.get(url, { params })
}

// 封装 POST 请求方法
export const post = (url, data) => {
  return instance.post(url, data)
}

3.在需要发送 AJAX 请求的组件中，导入 api.js 并调用封装好的方法即可：

import { get, post } from './api.js'

// 发送 GET 请求
get('/users', { page: 1 }).then(response => {
  console.log(response)
}).catch(error => {
  console.error(error)
})

// 发送 POST 请求
post('/login', { username: 'admin', password: '123456' }).then(response => {
  console.log(response)
}).catch(error => {
  console.error(error)
})