vue封装axios与api接口管理的完整步骤

下面我将详细讲解vue封装axios与api接口管理的完整步骤。

1. 安装axios

在开始封装axios之前，我们需要先安装axios。可以通过npm进行安装：

npm install axios --save

2. 封装axios

封装axios的目的是为了在项目中统一处理请求和响应，方便管理和维护。以下是封装axios的完整步骤：

2.1 创建axios实例

在src目录下新建一个api目录，在api目录下新建一个request.js文件，并引入axios：

import axios from 'axios';

接着，创建axios实例：

const request = axios.create({
  baseURL: 'http://localhost:3000', // 接口的基础路径
  timeout: 5000 // 请求超时时间
});

2.2 请求拦截器

在request.js文件中，我们可以为axios实例添加请求拦截器，用于在请求发出前统一处理请求参数和请求头：

request.interceptors.request.use(
  config => {
    // TODO: 统一处理请求参数和请求头
    return config;
  },
  error => {
    // TODO: 处理请求错误
    return Promise.reject(error);
  }
);

2.3 响应拦截器

同样的，我们也可以添加响应拦截器，用于在响应返回后统一处理响应结果和响应错误：

request.interceptors.response.use(
  response => {
    // TODO: 统一处理响应结果
    return response.data;
  },
  error => {
    // TODO: 处理响应错误
    return Promise.reject(error);
  }
);

2.4 封装请求方法

最后一步是封装请求方法，我们可以按照请求类型（GET、POST等）封装不同的方法，如下所示：

export const get = url => {
  return request.get(url);
};

export const post = (url, data) => {
  return request.post(url, data);
};

export const put = (url, data) => {
  return request.put(url, data);
};

export const del = url => {
  return request.delete(url);
};

3. api接口管理

有了封装好的axios实例，我们的下一步是管理api接口。在src/api目录下，新建一个api.js文件，用于管理所有的api接口。

例如，我们有一个名为“users”的资源，其接口如下：

接口	方法	描述
/api/users	GET	获取所有用户
/api/users/:id	GET	获取用户详细信息
/api/users	POST	新建用户
/api/users/:id	PUT	更新用户信息
/api/users/:id	DELETE	删除用户

我们可以将以上接口封装成对象形式，如下所示：

import { get, post, put, del } from './request';

export const users = {
  get() {
    return get('/api/users');
  },
  getById(id) {
    return get(`/api/users/${id}`);
  },
  create(data) {
    return post('/api/users', data);
  },
  update(id, data) {
    return put(`/api/users/${id}`, data);
  },
  delete(id) {
    return del(`/api/users/${id}`);
  }
};

通过以上代码，我们就可以在项目中方便地调用API接口进行数据的增删改查了。

示例说明

以下是两个简单的示例，演示了封装axios和API接口管理的应用场景。

示例1：请求Github API并展示数据

在这个示例中，我们使用Github API获取用户数据，并展示在页面上。

首先，在api目录下新建一个github.js文件，用于管理Github API接口：

import { get } from './request';

export const github = {
  getUser(username) {
    return get(`https://api.github.com/users/${username}`);
  }
};

接着，在vue组件中使用github.getUser方法获取数据，代码如下：

<template>
  <div>
    <input v-model="username">
    <button @click="getGithubUser">查询</button>
    <div v-if="user">
      <h2>{{ user.login }}</h2>
      <img :src="user.avatar_url" width="100" height="100">
      <p>{{ user.bio }}</p>
    </div>
  </div>
</template>

<script>
import { github } from '@/api/github';

export default {
  data() {
    return {
      username: '',
      user: null
    };
  },
  methods: {
    async getGithubUser() {
      const user = await github.getUser(this.username);
      this.user = user;
    }
  }
};
</script>

示例2：使用Node.js搭建RESTful API并调用

在这个示例中，我们使用Node.js和Express框架搭建一个RESTful API，并在vue组件中调用该API。

先来看一下express的路由代码：

const express = require('express');
const app = express();

const users = [
  { id: 1, name: '张三', age: 18 },
  { id: 2, name: '李四', age: 19 },
  { id: 3, name: '王五', age: 20 }
];

app.get('/api/users', (req, res) => {
  res.json(users);
});

app.get('/api/users/:id', (req, res) => {
  const user = users.find(user => user.id === parseInt(req.params.id));
  if (user) {
    res.json(user);
  } else {
    res.status(404).json({ message: '用户不存在' });
  }
});

app.post('/api/users', (req, res) => {
  const user = { id: users.length + 1, ...req.body };
  users.push(user);
  res.status(201).json(user);
});

app.put('/api/users/:id', (req, res) => {
  const user = users.find(user => user.id === parseInt(req.params.id));
  if (user) {
    user.name = req.body.name || user.name;
    user.age = req.body.age || user.age;
    res.json(user);
  } else {
    res.status(404).json({ message: '用户不存在' });
  }
});

app.delete('/api/users/:id', (req, res) => {
  const index = users.findIndex(user => user.id === parseInt(req.params.id));
  if (index !== -1) {
    users.splice(index, 1);
    res.sendStatus(204);
  } else {
    res.status(404).json({ message: '用户不存在' });
  }
});

const port = process.env.port || 3000;
app.listen(port, () => {
  console.log(`Server is running on port ${port}.`);
});

接着，在vue组件中使用该API，代码如下：

<template>
  <div>
    <button @click="getUsers">获取所有用户</button>
    <ul v-if="users.length">
      <li v-for="user in users" :key="user.id">{{ user.name }} ({{ user.age }}岁)</li>
    </ul>
  </div>
</template>

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

export default {
  data() {
    return {
      users: []
    };
  },
  methods: {
    async getUsers() {
      const users = await get('/api/users');
      this.users = users;
    }
  }
};
</script>

这里我们只用了request.js中的get方法进行请求，而API接口则可以通过URL直接进行调用。

阅读剩余 82%