axios 封装使用

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);
});