关于请求后端接口的封装历程（ajax -> axios -> axios封装 -> api封装）

一、总述：

原生ajax请求 ==> 原始axios请求 ==> axiose二次封装请求 ==> api解耦封装请求

二、基础代码

需求：点击小狗按钮，掉接口获取小狗图片链接，展示小狗图片；

请求接口：'dog.ceo/api/breeds/... 请求方法：get请求

三、原生ajax请求

注：当请求状态为4（完成）且状态码为200（成功）时，解析服务器返回的响应，并将狗狗图片的URL赋值给imageUrl

<template>
  <div>
    <el-button @click="handleClick">小狗按钮</el-button>
    <img v-if="imageUrl" :src="imageUrl" alt="狗狗图片">
  </div>
</template>

<script>
export default {
  data() {
    return {
      imageUrl: ''
    };
  },
  methods: {
    handleClick() {
      const xhr = new XMLHttpRequest();
      xhr.open('GET', 'https://dog.ceo/api/breeds/image/random', true);
      xhr.onreadystatechange = () => {
        if (xhr.readyState === 4 && xhr.status === 200) {
          const response = JSON.parse(xhr.responseText);
          this.imageUrl = response.message;
        }
      }
      xhr.send();
    }
  }
}
</script>

四、原始axios请求

注：axios是对原生ajax的封装，简化了ajax请求，安装axios：npm install axios

<template>
  <div>
    <el-button @click="handleClick">小狗按钮</el-button>
    <img v-if="imageUrl" :src="imageUrl" alt="狗狗图片">
  </div>
</template>

<script>
import axios from 'axios';

export default {
  data() {
    return {
      imageUrl: ''
    };
  },
  methods: {
    handleClick() {
      axios.get('https://dog.ceo/api/breeds/image/random')
        .then(response => {
          this.imageUrl = response.data.message;
        })
        .catch(error => {
          console.error(error);
        });
    }
  }
}
</script>

五、axiose二次封装请求

可以在设置请求拦截器 和响应拦截器；比如在请求拦截器中，在请求头中添加token，一次操作后续都可以用；在响应拦截器中，对后端返回的状态码进行判断并做相应处理

5.1、首先，创建一个request.js文件，并在其中封装Axios相关的方法（一般放在 src/utils/request.js）

import axios from 'axios';

const instance = axios.create({
  baseURL: 'https://dog.ceo/api',
  timeout: 5000 // 超时时间
});

// 请求拦截器  前端 => 后端传输
instance.interceptors.request.use(
  config => {
    // 根据需要添加请求的配置，比如在请求头中添加token等
    return config;
  },
  error => {
    return Promise.reject(error);
  }
);

// 响应拦截器  后端 => 前端传输
instance.interceptors.response.use(
  response => {
    // 在这里可以对响应做一些处理，比如统一的错误处理等
    return response;
  },
  error => {
    return Promise.reject(error);
  }
);

export default instance;

5.2、在需要发送请求的组件中，导入该request.js文件，并使用封装的Axios方法发送请求：

<template>
  <div>
    <el-button @click="handleClick">小狗按钮</el-button>
    <img v-if="imageUrl" :src="imageUrl" alt="狗狗图片">
  </div>
</template>

<script>
import request from '@/request.js';

export default {
  data() {
    return {
      imageUrl: ''
    };
  },
  methods: {
    handleClick() {
      request.get('/breeds/image/random')
        .then(response => {
          this.imageUrl = response.data.message;
        })
        .catch(error => {
          console.error(error);
        });
    }
  }
}
</script>

六、api解耦封装请求

在对axios进行二次封装的前提下（已有request,js文件），对组件上的请求路径进行归类封装，如部门管理模块的所有接口都放在dept.js文件下，登录相关接口都放在login.js文件下。把请求路径都封装成方法，方便在各个页面调用

6.1、在独立的dog.js文件中封装getDogImage方法（一般放在 src/api/...js）

import request from "@/utils/request";

// 查询小狗
export function getList(data) {
  return request({
    url: "/breeds/image/random/list",
    method: "get",
    params: data,
  });
}

// 新增小狗
export function add(data) {
  return request({
    url: "/breeds/image/random/add",
    method: "post",
    data: data,
  });
}

// 删除小狗
export function Delete(data) {
  return request({
    url: "/breeds/image/random/del",
    method: "post",
    data: data,
  });
}

// 编辑小狗
export function update(data) {
  return request({
    url: "/breeds/image/random/edit",
    method: "post",
    data: data,
  });
}

6.2、在需要调用dog.js的getList方法的组件中，导入它并调用即可

<template>
  <div>
    <el-button @click="handleClick">小狗按钮</el-button>
    <img v-if="imageUrl" :src="imageUrl" alt="狗狗图片">
  </div>
</template>

<script>
import { getList } from '@/api/dog.js';

export default {
  data() {
    return {
      imageUrl: ''
    };
  },
  methods: {
    handleClick() {
      getList()
        .then(res => {
          this.imageUrl = res.data.message;
        })
        .catch(error => {
          console.error(error);
        });
    }
  }
}
</script>

七、总结

在公司级项目中，对于后端请求一般都采用 api解耦封装请求 方式，即 在@/utils/request.js下有axios二次封装的文件、@/api/...js下有请求路径封装为方法的文件，并且是按模块分好类；在需要掉接口的组件页面，引入封装好的请求方法，进行后端交互。