axios 封装应用

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

cofing/index.js

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

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

对立解决申请异样，在外层包一个本人创立的 promise 对象,在申请出错时, 不 reject(error), 而是显示谬误提醒
异步失去不是 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);});