vue中如何简单封装axios浅析

下面是详细讲解"Vue中如何简单封装Axios浅析"的攻略，包含以下内容：

1. 简单介绍Axios

Axios 是一个基于 promise 的 HTTP 库，可以用在浏览器和 node.js 中。它是一个非常流行的、简单易用的 HTTP 请求库，非常适用于 Vue.js 中进行数据请求。

2. 封装 Axios 的目的

在 Vue.js 项目中，我们不可能每次都用 Axios 来执行 HTTP 请求。这会使组件难以维护，代码冗余，且会增加每个页面的 HTTP 请求数。为了解决这些问题，我们可以将 Axios 进行简单封装。

封装 Axios 主要可以实现以下几个目的：

• 在全局范围内统一管理和配置 HTTP 请求。
• 提高代码复用性，让代码更加简洁易懂。
• 方便实现统一的 HTTP 请求拦截和响应处理。

3. Axios封装思路

Axios封装需要考虑到以下几个方面：

• 1.请求的数据格式
• 2.返回的数据格式
• 3.统一的错误处理
• 4.全局的请求拦截和响应处理

4. Vue中如何简单封装Axios

我们可以新建一个 http.js 文件，在其中进行简单的封装。

// 引入axios库
import axios from 'axios'

// 创建axios的实例
const service = axios.create({
  // 请求超时时间
  timeout: 5000  
})

// 全局请求拦截器
service.interceptors.request.use(
  config => {
    // 请求前的处理
    return config
  },
  error => {
    // 请求发生错误时的处理
    return Promise.reject(error)
  }
)

// 全局响应拦截器
service.interceptors.response.use(
  response => {
    // 响应数据处理
    return response
  },
  error => {
    // 响应发生错误时的处理
    return Promise.reject(error)
  }
)

// 封装get请求
export function get(url, params = {}) {
  return new Promise((resolve, reject) => {
    service({
      url: url,
      method: 'get',
      params: params
    })
    .then(response => {
      // 成功回调
      resolve(response.data)
    })
    .catch(error => {
      // 失败回调
      reject(error)
    })
  })
}

// 封装post请求
export function post(url, data = {}) {
  return new Promise((resolve, reject) => {
    service({
      url: url,
      method: 'post',
      data: data
    })
    .then(response => {
      // 成功回调
      resolve(response.data)
    })
    .catch(error => {
      // 失败回调
      reject(error)
    })
  })
}

我们在 main.js 中引入 http.js 文件，并在 Vue 的原型上挂载 $http 方法。

import Vue from 'vue'
import App from './App.vue'
import {get, post} from './http.js'

Vue.prototype.$http = {
  get,
  post
}

new Vue({
  el: '#app',
  render: h => h(App)
})

5. 示例

下面，我们给出使用封装后的 $http 方法进行数据请求的两个简单示例：

示例一：获取用户列表数据

this.$http.get('/api/user/list')
.then(res => {
  console.log(res)
})
.catch(error => {
  console.log(error)
})

示例二：添加用户数据

const data = {
  username: 'John Doe',
  email: '[e-mail]',
  password: 'password'
}
this.$http.post('/api/user', data)
.then(res => {
  console.log(res)
})
.catch(error => {
  console.log(error)
})

这两个示例演示了如何使用封装后的 $http 方法进行 get 和 post 请求。这样，我们只需要在组件中调用 $http 方法即可进行 HTTP 请求，代码更加清晰简洁，易于维护。