详解vue中axios请求的封装

下面我会详细讲解vue中axios请求的封装。

前言

在vue项目开发中，我们经常需要使用到axios进行数据请求。但是，每次使用axios都需要重复的书写请求代码，一方面增加了代码量，另一方面也容易造成代码的维护成本变高。

所以，我们需要将axios请求进行封装，以便于复用和维护代码。

封装步骤

1. 安装axios

在vue项目中，使用axios请求前，需要先安装axios。

使用npm安装:

npm install axios --save

使用yarn安装:

yarn add axios

2. 创建api.js文件

在src目录中创建一个api.js文件，这个文件将用于存放axios请求的封装。

3. 导入axios和Vue

在api.js文件中，需要导入axios和Vue：

import axios from 'axios'
import Vue from 'vue'

4. 创建axios实例

在api.js文件中，创建axios实例，并设置一些默认配置：

// 创建axios实例
const http = axios.create({
  baseURL: 'http://localhost:3000', // 接口的基础地址
  timeout: 10000 // 请求超时时间
})

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

// 添加响应拦截器
http.interceptors.response.use(response => {
  // 对响应数据做点什么
  return response
}, error => {
  // 对响应错误做点什么
  return Promise.reject(error)
})

export default http

上面的代码中，我们创建了一个axios实例，并设置了接口的基础地址为http://localhost:3000，超时时间为10秒。同时，我们为这个实例添加了请求拦截器和响应拦截器，这样我们就可以在请求和响应中进行一些公共的操作，比如添加token。

5. 封装get请求

在api.js文件中，我们封装一个get请求的方法：

export function get(url, params) {
  return new Promise((resolve, reject) => {
    http.get(url, { params })
      .then(response => {
        // 成功返回
        resolve(response.data)
      })
      .catch(error => {
        // 失败返回
        reject(error)
      })
  })
}

上面的代码中，我们封装了一个get请求的方法，它接受两个参数：请求的地址和请求的参数。在方法内部，我们使用axios实例的get方法发送请求，并通过Promise的resolve和reject方法处理请求的结果。

6. 封装post请求

在api.js文件中，我们封装一个post请求的方法：

export function post(url, data) {
  return new Promise((resolve, reject) => {
    http.post(url, data)
      .then(response => {
        // 成功返回
        resolve(response.data)
      })
      .catch(error => {
        // 失败返回
        reject(error)
      })
  })
}

上面的代码中，我们封装了一个post请求的方法，它接受两个参数：请求的地址和请求的参数。在方法内部，我们使用axios实例的post方法发送请求，并通过Promise的resolve和reject方法处理请求的结果。

7. 在组件中使用封装的请求

在vue组件中，我们可以直接使用上面封装的get和post方法来发送请求。下面是一个实例：

<template>
  <div>
    <ul>
      <li v-for="(item, index) in list" :key="index">{{ item }}</li>
    </ul>
  </div>
</template>

<script>
  import { get } from '@/api'

  export default {
    name: 'App',

    data: () => ({
      list: []
    }),

    created () {
      this.getList() // 页面刚刚加载时就调用列表数据
    },

    methods: {
      getList () {
        get('/list')
          .then(res => {
            this.list = res.list // 将请求到的数据赋值给组件的list属性
          })
          .catch(err => {
            console.log(err)
          })
      }
    }
  }
</script>

在上面的实例中，我们在组件的methods中定义了一个getList方法，用来请求接口中的list数据。通过调用封装的get方法获取到数据，然后将数据赋值给组件的list属性，最后渲染到页面上。