axios网络请求封装 axios api封装

在做项目的时候,我们平常会对接口api进行一些封装。今天来教给大家一些简单的封装接口的方法。

一.request.js文件夹

通常情况下我们会在utils/request.js封装自己的api。

// 1.导入axios
import axios from "axios";
// 2.创建axios副本
const _axios = axios.create({
  baseURL: process.env.VUE_APP_BASE_API,
});
// 3.请求拦截器
_axios.interceptors.request.use(
  (config) => {
    return config;
  },
  (error) => {
    console.log(error, "请求失败之后的结果");
    return Promise.reject(error);
  }
);
// 4.响应拦截器
_axios.interceptors.response.use(
  (res) => {
    if (res.data.success) {
      return res.data;
    } else {
      // 错误的提示信息
      return Promise.reject(res.data.message);
    }
  },
  (error) => {
    // return Promise.reject(error);
    return error, "响应失败的结果";
  }
);
// 5.暴露出去
export default _axios;

分析步骤:

1.导入了axios

2.深拷贝了一份，并且能够配置基地址

后面了两个拦截器我要重点进行剖析了。

拦截器是固定的写法。

3.然后暴露出去。

二.测试接口,如果要调用一个登录的接口

import request from "./request";
// 登录
export function sysLogin(data) {
  return request({
    url: "/sys/login",
    method: "POST",
    data,
  });
}

分析步骤:

导入配置好的api文件

然后配置好信息

如请求的地址：

请求的方法:

请求的参数：

三.遇到跨域的问题

这是一个老生常谈的问题,在以前的文章也有讲过,跨域的问题是如何解决的。

 

四.开始调用接口

代码:

<template>
  <div class="">
    <form>
      账号: <input type="text" v-model="from.mobile" /> 密码:<input
        type="password"
        v-model="from.password"
      />
    </form>
    <button @click="fn">点击登录</button>
  </div>
</template>

<script>
import { sysLogin } from "./api/login";
export default {
  data() {
    return {
      from: {
        mobile: "13800000002",
        password: "123456",
      },
    };
  },
  created() {
    alert(process.env.VUE_APP_BASE_API, "我是基地址");
  },
  name: "",
  methods: {
    async fn() {
      const res = await sysLogin(this.from);
      console.log(res);
    },
  },
};
</script>

<style scoped>
button {
  width: 200px;
  height: 30px;
  background-color: pink;
  margin: 300px auto;
}
</style>

解析:既然是默认导出的,那么肯定是要默认导入，千万要加上{},名字也不要随便更改,如果要更改需要加上as关键字后面接上自己要更改的名字。

好了,那么我们愉快地来调用接口吧

这样我们就成功地调用了一个接口了。

在阐述拦截器之间,分析一下一个请求的过程。

也就是请求还没到服务器的时候会进行一次拦截。

数据还没到客户端的时候又会进行一次拦截。

那么我们可以做一些响应的操作。

五.可以在拦截器里面进行的操作

还是上面封装的api不做任何改变。

请求拦截:

_axios.interceptors.request.use(
  (config) => {
    console.log(config, "请求之前的一些东西");
    return config;
  },
  (error) => {
 　// 对请求错误做些什么
    return Promise.reject(error);
  }
);

点击按钮打印config这个参数的结果是:

可以看出这里里面包含了请求的信息。我们可以做一些操作。

在发送请求之前携带token。判断toekn是否过期。

响应拦截:

_axios.interceptors.response.use(
  (res) => {
    console.log(res, "响应之前的一些东西");
    if (res.data.success) {
      return res.data;
    } else {
      return Promise.reject(res.data.message);
    }
  },
  (error) => {
    //对响应错误做什么
    return Promise.reject(error);
  }
);

res,就是响应回来的一些数据,我们可以做一些判断,如果成功就进行一层解析以res.data的形式传递过去,如果失败就错一个失败的统一错误处理。

然后分析一下两个错误

在请求之前会携带东西,如果出现错误也要给用户一些相应的提示信息。

例如

代码：

_axios.interceptors.response.use(
  (res) => {
    alert("响应成功");
    if (res.data.success) {
      return res.data;
    } else {
      return Promise.reject(res.data.message);
    }
  },
  (error) => {
    // 响应失败的提示语
    return alert(error);
  }
);

 

这是响应错误给出的提示。

请求错误也应该给出一定的提示。

总结:

在发送一个请求的时候,具体的流程