axios在项目中的封装

目录

一次封装

二次封装

---

一次封装

1.axios大家都应该很了解了,在React和Vue中广泛应用进行请求数据,那么为什么还需要对其封装呢,如果后端解决跨域了的话,我们是可以通过请求时携带请求头来解决跨域。那么对于这些重复的请求头就可以通过封装axios进行减少重复的请求地址,请求头。

import axios from "axios";
import { MessageBox, Message } from "element-ui";
import store from "@/store";
const service = axios.create({
  baseURL: 'http://43.138.58.236', 
  timeout: 5000, 
});
service.interceptors.request.use(
  (config) => {
    Message.success('loading')
    return config;
  },
);

service.interceptors.response.use(
  (response) => {
    Message.closeAll()
    const res = response.data;
    if(res.code==400){
      Message.error('请求失败')
    }
  },
  (error) => {
    Message({
      message: error.message,
      type: "error",
      duration: 5 * 1000,
    });
    return Promise.reject(error);
  }
);

export default service;

可以看到 我想向外暴露了service这个函数,service这个函数调用了axios.create这个方法,传递了baseUrl这个参数,这样每次请求都会携带上这个网址，service.interceptors.request.use对请求前进行操作，通过message显示一个loading,告诉用户正在加载,service.interceptors.response.use请求结果回来后进行操作,通过Message.closeAll()清除所有message。如果返回的code是400,告诉用户请求失败。

二次封装

二次封装主要就是对请求进行一个集中式的管理,在src跟目录创建api文件夹,在api中创建index.js,

引入刚才的封装。

import request from "@/util/request";
export const GetCategoryList = () =>
  request({ url: "/product/getBaseCategoryList", method: "get" });

在main.js中引入import * as api from '@/api'，Vue.prototype.api = api 往Vue实例本身绑定,所有组件都可使用