【Vue】axios的二次封装和使用(附详细代码)

Vue中的axios

---

1、为什么要二次封装axios

之所以要二次封装axios，是有一些公用的事情，每次请求都要做；

• 添加token
• 添加加载提示信息和关闭加载提示
• 统一请求地址

2、封装api

• 集中管理api
• 重复利用
• “进入登录方法” 写好了，放在登录页面，只能在登录页面用；如果放单独文件中，多个页面就可以使用 “登录方法” 。

3、代码实现

• 封装axios
• 在 src 目录下 ，新建一个文件夹，命名为 utils ，然后在这个文件夹里面 ，新建一个js文件，命名为 request.js

• 对 axios 二次封装，在 request.js 里写以下代码：

注意： 在此之前 要在自己的项目里 安装aixos
命令为： npm i axios -S

// 对 axios 进行集中管理（对axios二次封装）
import axios from "axios";
// 导入Vue
import Vue from "vue";
import Toast from "@/plugin/Toast";  //之前写的toast插件
Vue.use(Toast);
//设置默认：请求域名，超时时间
const request = axios.create({
    baseURL: "http://localhost:8080", //默认请求域名
    timeout: 5000, //请求超时  请求5秒还没好，就返回失败
});

//对请求进行拦截，添加加载提示  token   config请求配置
request.interceptors.request.use(function (config) {
    // console.log(config);
    // console.log("请求加载中...");
    Toast.show("加载中...", 5000);  // 显示加载提示
    //返回配置 
    return config;
//拦截响应头 ，关闭加载提示，（ajax 结束）
request.interceptors.response.use(
    function (res) {
        // console.log("加载结束....");
        Toast.hide();  // 请求结束，关闭加载提示
        return res;
    },
    function (err) {
        Toast.hide();
        return err;
    }
);

export default request;

//interceptors 拦截  request 请求  response 响应 config配置

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36

• 封装api

• 在 src 目录下 ，新建一个文件夹，命名为 api ，然后在这个文件夹里面 ，新建一个js文件，命名为 home.js

• 在 home.js 里写以下代码：

// 导入二次封装好的请求工具
import request from "@/utils/request";
function stringify(data) {
    var str = "";
    for (var k in data) {
        str += k + "=" + data[k] + "&";
    }
    // 不要最后一个&
    return str.slice(0, -1);
}
function GetHomePage(data) {
    return request.post(
        "/v1/home/page", //请求地址
        stringify(data), // 请求的数据
        { headers: { "Content-Type": "application/x-www-form-urlencoded" } } //请求头
    );
}

export { GetHomePage };

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

4、使用

• 在LoginView.vue 里面使用封装好的axios，详细代码如下

• template

<template>
  <div>
    <h1>登录h1>
    用户名：<input type="text" v-model="user.name" /> <br />
    密码：<input type="password" v-model="user.password" /> <br />
    <button @click="login()">登录button>
    <button @click="$notify.show('为什么会这样', 'gold')">自定义通知button>
  div>
template>
1
2
3
4
5
6
7
8
9

• javascript

//导入登录的方法
import { Login } from "@/api/user.js";

export default {
  data() {
    return {
      user: { name: "", password: "" },
    };
  },
  methods: {
    login() {
      //通过axios,发起post 请求，登录
      //集中管理，axios 统一请求地址，请求都携带token
      this.$toast.show();
      Login(this.user)
        .then((res) => {
          //如果code,200存储user 和token
          if (res.data.code === 200) {
            this.$notify.success(res.data.msg);
            //存储token 和user , JSON.stringify 把js 对象转换为json 字符串
            localStorage.setItem("token", res.data.token);
            localStorage.setItem("user", JSON.stringify(res.data.user));
            //登录成功跳转到用户页面
            // this.$router.replace("/user");
            //获取查询参数
            var redirect = this.$route.query.redirect || "/";
            this.$router.replace(redirect);
          } else {
            this.$notify.danger(res.data.msg);

            //登录失败
            localStorage.removeItem("token");
            localStorage.removeItem("user");
          }
        })
        .catch((err) => {
          // 网络失败
          this.$notify.danger("登录失败");
          console.log(err);
          localStorage.removeItem("token");
          localStorage.removeItem("user");
        });
    },
  },
};
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46

• css

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

5、效果实现

今天的分享就到这里了~~