axios 封装应用

依据开发环境判断应用哪个 baseUrl

cofing/index.js

export default {
  title: "admin",
  baseUrl: {
    // 开发环境
    dev: "http://localhost:5000/api/",
    pro: "http://localhost:5000",
  },
};

第一种形式：利用 promise 与 async await 封装 axios

1. 对立解决申请异样，在外层包一个本人创立的 promise 对象, 在申请出错时, 不 reject(error), 而是显示谬误提醒
2. 异步失去不是 reponse, 而是 response.data, 在申请胜利 resolve 时: resolve(response.data)

api/ajax.js

import axios from "axios";

export default function ajax(url, data = {}, type = "GET") {return new Promise((resolve) => {
    let promise;
    // 1. 执行 ajax 申请
    if (type === "GET") {
      // 发 GET 申请
      promise = axios.get(url, { params: data});
    } else {
      // 发 POST 申请
      promise = axios.post(url, data);
    }

    // 2. 胜利 resolve
    promise
      .then((result) => {resolve(result.data);
      })
      .catch((err) => {console.log("申请出错：" + err);
      });
  });
}

api/index.js 对立治理所有 api 接口

import ajax from "./ajax";
import config from "../config/index";
// 判断开发环境
const baseUrl =
  process.env.NODE_ENV === "development"
    ? config.baseUrl.dev
    : config.baseUrl.pro;

// 登陆
export const reqLogin = (username, password) =>
  ajax(baseUrl + "/login", { username, password}, "POST");

// 获取列表
export const reqList = (listId) => ajax(baseUrl + "/manage/list", { listId});

reqLogin 应用

import {reqLogin} from "../../api";
async (values) => {const { username, password} = values;
  // 申请登陆
  const result = await reqLogin(username, password);
};

第二种形式：利用 axios 拦截器封装

api/ajax.js

// 二次封装 axios 拦截器
import axios from "axios";
import config from "../config/index.js";
// 判断开发环境
const baseUrl =
  process.env.NODE_ENV === "development"
    ? config.baseUrl.dev
    : config.baseUrl.pro;
// 封装申请类
class HttpRequst {constructor(baseUrl) {this.baseUrl = baseUrl;}
  // 取得外部设置
  getInsideConfig() {
    const config = {
      baseURL: this.baseUrl,
      header: {},};
    return config;
  }
  // axios 官网拦截器
  interceptors(instance) {
    instance.interceptors.request.use(function (config) {
        // 在发送申请之前做些什么
        console.log("拦挡解决申请");
        return config;
      },
      function (error) {
        // 对申请谬误做些什么
        return Promise.reject(error);
      }
    );
    instance.interceptors.response.use(function (response) {console.log("解决相应");
        // 对响应数据做点什么
        return response.data;
      },
      function (error) {console.log(error);
        // 对响应谬误做点什么
        return Promise.reject(error);
      }
    );
  }
  request(options) {
    // 申请
    const instanse = axios.create();
    // 解构赋值
    options = {...this.getInsideConfig(), ...options };
    this.interceptors(instanse);
    return instanse(options);
  }
}
export default new HttpRequst(baseUrl);

api/index.js

import ajax from "./ajax";

export const reqList = (params) => {
  return ajax.request({
    url: "/manage/list",
    method: "post",
    data: params,
  });
};

应用 reqList

import {reqList} from "../../api";

reqList.then((res) => {console.log(res.data);
});