Vue axioxs网络请求封装

Vue axioxs网络请求封装

第一步： 安装axios nprogress 连个插件

npm i axios nprogress

第二步：启动接口
第三步：进行封装

请求拦截和响应拦截

封装代码如下：

import axios from "axios";
import NProgress from "nprogress";
import "nprogress/nprogress.css";
import { Notify } from "vant";
import { getToken } from "./auth";
// 请求接口的基地址
export const serveUrl = "http://localhost:1337";

const instance = axios.create({
  baseURL: serveUrl,
  timeout: 5000,
});

// Add a request interceptor
// 拦截器。全局请求拦截 全局相应拦截
// https://github.com/axios/axios#interceptors

// 发送网络请求之前执行
instance.interceptors.request.use(
  function (config) {
    NProgress.start();
    // Do something before request is sent
    // token的添加方式不是固定的每一个接口文档都会有说明
    // honey-home 这套接口的传递token这样写
    config.headers.token = getToken();
    return config;
  },
  function (error) {
    // Do something with request error
    return Promise.reject(error);
  }
);

// Add a response interceptor
// 网络请求完成之后执行
instance.interceptors.response.use(
  function (response) {
    NProgress.done();
    // Any status code that lie within the range of 2xx cause this function to trigger
    // Do something with response data
    return response.data;
  },
  function (error) {
    // Any status codes that falls outside the range of 2xx cause this function to trigger
    // Do something with response error
    // 全局的网络请求异常处理
    Notify({
      message:
        error.response.status +
        "|" +
        (error.response.data.message
          ? error.response.data.message
          : error.response.data.info),
      type: "danger",
    });
    NProgress.done();
    return Promise.reject(error);
  }
);
/**
 * 发送一个get请求
 * @param {*} url
 * @param {*} params
 * @returns
 */
export const get = (url, params) => instance.get(url, { params });

/**
 * 发送一个post请求
 * @param {*} url
 * @param {*} data
 * @returns
 */
export const post = (url, data) => instance.post(url, data);

/**
 * 发送一个put 请求
 * @param {*} url
 * @param {*} data
 * @returns
 */
export const put = (url, data) => instance.put(url, data);

/**
 * 发送一个delete请求
 * @param {*} url
 * @returns
 */
export const del = (url) => instance.delete(url);