Axios 二次封装与API解耦

Axios 请求接口

下载

npm install axios -S

引入

import axios from 'axios'

使用

// get 请求
axios.get()

// post 请求
axios.post()

// 统一写法【任意请求方法】
axios({
    url: URL,
    method: [get,post,put,delete...]
    data: [post请求的传参方式]，
    param: [get请求的传参方式]

})

正常写法，例如：Index.vue

<template>
  <div class="about">
    <button @click="sendLogin">提交</button>
  </div>
</template>

<script>
/* eslint-disable */
// eslint-disable-next-line
import axios from "axios";
export default{
  methods: {
    sendLogin() {
      axios({
        url: '/api/admin/employee/login',
        method: "post",
        data: {
          username: 'admin',
          password: '123456',
        },
      })
        .then((res) => {
          // 请求成功 进行回调
          console.log(res.data);
        })
        .catch((error) => {
          // 请求失败 进行处理
          console.log(error);
        });
    },
  },
};
</script>

Axios 二次封装

解决问题:

• 1.请求的url地址统一管理

• 2.某些接口需要传递headers

在src文件夹下，新建一个utils工具类文件夹

在utils里面新建一个request.js文件

在request.js文件中写入如下：

/* eslint-disable */
// eslint-disable-next-line

// 导入 axios 库，用于发送 HTTP 请求。
import axios from 'axios';

const service = axios.create({
  // 指定请求的基础 URL
  baseURL: 'http://localhost:8080',
  // 设置请求超时时间为 5000 毫秒（5 秒）。
  timeout: 5000,
});

// 拦截器 请求前处理，设置请求头中的 token
service.interceptors.request.use(
  (request) => {
    // 在发送请求前执行这个函数，打印一条日志信息。
    console.log('拦截器 请求前处理，设置请求头中的 token');
    // 返回请求对象，继续发送请求。
    return request;
  },
  (error) => {
    // 如果在请求前发生错误，打印错误信息。
    console.log(error);
    // 拒绝 Promise，将错误传递下去。
    return Promise.reject(error);
  },
);

// 响应拦截器
service.interceptors.response.use(
  (response) => {
    // 当接收到响应时，从响应对象中提取数据。
    const res = response.data;
    // 返回响应数据。
    return res;
  },
  (error) => {
    return Promise.reject(error);
    // 如果响应出现错误，拒绝 Promise，将错误传递下去。
  },
);
// 导出经过配置的 axios  实例，方便在其他地方使用。
export default service;

API解耦

封装

在utils文件夹下面新建一个api文件夹，在api文件夹中创建每个功能的js文件，例如我用户功能，我新建一个user.js文件。

打开user.js文件

引入二次封装的Axios

import request from '@/utils/request';

写你的功能请求代码，例如：我的用户有个登录功能。

import request from '@/utils/request';

// 用户登录
export function login(data) {
  return request({
    url: 'http://localhost:8080/admin/employee/login',
    method: 'POST',
    data,
  });
}

使用

在vue组件中使用，例如我有个HelloWorld.vue

<template>
  <div class="hello">
    <button @click="sendLogin">点击</button>
  </div>
</template>

<script>
/* eslint-disable */
// eslint-disable-next-line

// 引入封装好的api
import { login } from '@/utils/api/user';

export default {
  name: 'HelloWorld',
  methods: {
    sendLogin() {
      const data = {
        username: 'admin',
        password: '123456',
      };
      // 使用登录方法
      login(data).then((res) => {
        console.log(res.data.name);
      });
    },
  },
};
</script>