Vue 中 axios 的超详细介绍

一、axios 的基本概念和安装

1.1 什么是 axios

Axios 是一个基于 promise 的 HTTP 库，可以用来发送网络请求。它可以在浏览器和 node.js 中使用，本质上是对原生 XMLHttpRequest 的封装，符合最新的 ES 规范，支持 Promise API，能够拦截请求和响应，转换请求和响应数据，取消请求，自动转换 JSON 数据等。

1.2 安装 axios

在 Vue 项目中，可以通过 npm 安装 axios：

npm install axios

二、axios 的基本使用

2.1 GET 请求

GET 请求用于获取数据，请求指定的信息，返回实体对象。可以携带参数，有两种方式：

方式一：直接在 URL 中携带参数

axios.get("http://localhost:3000/list?id=1").then(
  (res) => {
    console.log(res.data);
  },
  (err) => {
    console.log(err);
  }
);

方式二：使用 params 配置对象

axios
  .get("http://localhost:3000/list", {
    params: {
      id: 2,
    },
  })
  .then((res) => {
    console.log(res.data);
  })
  .catch((err) => {
    console.log(err);
  });

2.2 POST 请求

POST 请求用于向指定资源提交数据，例如表单提交或文件上传。

axios
  .post("http://localhost:3000/list", {
    name: "蜘蛛精",
    age: 200,
    address: "盘丝洞",
  })
  .then((res) => {
    console.log(res.data);
  })
  .catch((err) => {
    console.log(err);
  });

2.3 PUT 请求

PUT 请求用于更新数据，从客户端向服务器传送的数据取代指定的文档的内容。会把更新的数据完全替代原数据，如果只修改了部分的数据，原数据其他内容都会丢失。

axios
  .put("http://localhost:3000/list/1", {
    name: "玉皇大帝",
  })
  .then((res) => {
    console.log(res.data);
  })
  .catch((err) => {
    console.log(err);
  });

2.4 PATCH 请求

PATCH 请求用于对已知资源进行局部更新。

axios
  .patch("http://localhost:3000/list/2", {
    name: "王母娘娘",
  })
  .then((res) => {
    console.log(res.data);
  })
  .catch((err) => {
    console.log(err);
  });

2.5 DELETE 请求

DELETE 请求用于请求服务器删除指定的数据。

axios
  .delete("http://localhost:3000/list/1")
  .then((res) => {
    console.log(res.data);
  })
  .catch((err) => {
    console.log(err);
  });

三、axios 的配置

3.1 全局配置

全局配置是对所有请求都生效的配置，例如设置全局的超时时长和基本 URL：

axios.defaults.timeout = 2000;
axios.defaults.baseURL = "http://localhost:3000";

3.2 实例配置

在项目中，可以创建多个 axios 实例，每个实例可以有不同的配置：

// 创建实例时配置
let instance = axios.create({
  baseURL: "http://localhost:3000",
  timeout: 2000,
});
// 创建实例后配置
let instance2 = axios.create();
instance2.defaults.timeout = 2000;
instance2.defaults.baseURL = "http://localhost:3000";

3.3 请求配置

请求配置是针对单个请求的配置，例如设置请求的超时时长：

axios
  .get("http://localhost:3000/list", {
    timeout: 2000,
  })
  .then((res) => {
    console.log(res.data);
  })
  .catch((err) => {
    console.log(err);
  });

四、axios 的拦截器

拦截器用于在网络请求时，在发起请求或者响应时对操作进行处理，例如发送请求时添加网页加载的动画，或认证 token，强制用户先登录再请求数据；响应的时候，可以结束网页加载的动画，或者对响应的数据进行处理。

4.1 请求拦截器

axios.interceptors.request.use(
  (config) => {
    // 发生请求前的一系列的处理
    console.log("开启加载动画");
    console.log("认证是否有 token，如果没有，要去登录");
    return config; // 拦截后的放行
  },
  (err) => {
    // 请求错误处理
    return Promise.reject(err);
  }
);

4.2 响应拦截器

axios.interceptors.response.use(
  (response) => {
    // 数据回来前的一系列的处理
    console.log("关闭加载动画");
    console.log("对数据进行一些处理");
    return response.data; // 拦截后的放行，返回响应对象中的数据
  },
  (err) => {
    // 响应错误处理
    return Promise.reject(err);
  }
);

五、Vue 中 axios 的使用

5.1 在 Vue 原型上配置 $axios

在 Vue 项目的 main.js 文件中引入 axios，并将其放到 Vue 原型上，这样所有 Vue 实例（vm，vc）上都会有 axios：

import axios from "axios";
Vue.prototype.$axios = axios;

5.2 在组件中使用 axios

在组件中，可以通过 this.$axios 来发送请求：

  
    点击发送请求
  


export default {
  name: "App",
  methods: {
    async getDate() {
      let res = await this.$axios.get("http://localhost:3000/list");
      console.log(res.data);
    },
  },
};

六、封装 axios

为了提高代码的可维护性和复用性，可以对 axios 进行封装。

6.1 封装 request.js

在 src/utils 目录下创建 request.js 文件，封装 axios：

import axios from "axios";
const request = axios.create({
  baseURL: "http://localhost:3000", // 设置基地址
  timeout: 2000, // 请求超时：当 2s 没有响应就会结束请求
});
// 添加请求拦截器
request.interceptors.request.use(
  function (config) {
    // 发请求前做的一些处理，数据转化，配置请求头，设置 token,设置 loading 等，根据需求去添加
    config.headers = {
      "Content-Type": "application/x-www-form-urlencoded", // 配置请求头
    };
    return config; // 拦截后的放行
  },
  function (error) {
    // 对请求错误做些什么
    return Promise.reject(error);
  }
);
// 添加响应拦截器
request.interceptors.response.use(
  function (response) {
    // 对响应数据做点什么
    console.log("关闭请求数据动画");
    console.log("对数据进行处理");
    return response.data; // 只要响应对象中的数据
  },
  function (error) {
    // 对响应错误做点什么
    return Promise.reject(error);
  }
);
export default request;

6.2 在组件中使用封装后的 request

  
    获取列表数据
  


import request from "../utils/request";
export default {
  name: "ShowList",
  methods: {
    async getList() {
      let res = await request.get("/list");
      console.log(res);
    },
  },
};

七、二次封装

为了进一步提高代码的可维护性和复用性，可以将请求再次进行封装，创建 API 服务。

7.1 创建 API 服务

在 src/apis 目录下创建 showList.js 文件，导出请求函数：

import request from "@/utils/request";
// 请求 list 数据
export function getListInfo1() {
  return request.get("/list");
}
// 请求 user 数据
export function getUserInfo1() {
  return request.get("/user");
}

7.2 在组件中使用 API 服务

  
    获取列表数据
    获取用户数据
  


import { getListInfo1, getUserInfo1 } from "../apis/showList";
export default {
  name: "ShowList",
  methods: {
    async getList1() {
      let res = await getListInfo1();
      console.log(res);
    },
    async getUser1() {
      let res = await getUserInfo1();
      console.log(res);
    },
  },
};

八、处理跨域问题

在 Vue 项目中，通常会使用代理服务器来解决跨域问题。可以在 vue.config.js 文件中配置代理：

const { defineConfig } = require("@vue/cli-service");
module.exports = defineConfig({
  devServer: {
    proxy: {
      "/api": {
        target: "http://localhost:8000",
        pathRewrite: { "^/api": "" },
        ws: true,
        changeOrigin: true,
      },
    },
  },
});

在组件中发送请求时，地址需要修改如下：

axios.get('/api/user').then(
  response => {
    console.log('服务器返回的数据：', response.data);
  },
  error => {
    console.log('错误信息', error.message);
  }
)

九、总结

在 Vue 项目中使用 axios 发送网络请求，可以大大提高开发效率和代码的可维护性。通过封装 axios 和配置代理服务器，可以解决跨域问题，并且使代码更加简洁和复用性更高。在实际开发中，可以根据项目需求进一步扩展和优化这些功能。