axios在vue项目中的封装及使用

一、npm下载axios

npm install axios

 二、封装axios

新建core文件夹，core文件下新建axios.js

import Vue from 'vue';
import axios from 'axios';
import qs from 'qs';
import baseUrl from '../config' // 配置地址
import router from '@/router'
import {
  Message
} from 'element-ui'


// 配置接口地址
const baseURL = baseUrl;

axios.defaults.baseURL = "/api" //开发环境
Vue.prototype.$baseURL = baseURL.dev.baseURL; //全局挂载地址

// 配置超时时间
axios.defaults.timeout = 30e3;

// 请求拦截器
axios.interceptors.request.use(
  (config) => {
    if (sessionStorage.getItem("token")) {
      // 判断是否存在token，如果存在的话，则每个http header都加上token
      config.headers['Authorization'] = sessionStorage.getItem("token");
    }
    return config;
  },
  err => Promise.reject(err),
);

// 响应拦截器
axios.interceptors.response.use(
  (response) => {
    return Promise.resolve(response);
  },
  (error) => {
    if (error) {
      const {
        response
      } = error
      if (response.status === 417) {
        Message.error('登录信息已过期，请重新登录')
        sessionStorage.clear();
        router.push(`/login`);
      }
    }
    return Promise.reject(error);
  },
);

export const postForms = (url, form) => {
  const ax = axios.post(url, form, {
    'Content-Type': 'multipart/form-data',
  });
  return ax;
};

export const get = (url, arg = {}) => axios.get(`${url}?${qs.stringify(arg)}`);

export const post = (url, arg = {}) => axios.post(url, qs.stringify(arg));

export const postForm = (url, arg = {}, cfg = {}) => {
  const formData = new FormData();
  Object.entries(arg).forEach(([key, value]) => formData.append(key, value));
  return axios.post(url, formData, {
    'Content-Type': 'multipart/form-data',
    ...cfg,
  });
};

export const put = (url, arg = {}) => axios.put(url, qs.stringify(arg));
export const putJson = (url, arg = {}) => axios.put(url, arg, {
  headers: {
    'Content-type': 'application/json;charset=UTF-8',
  },
});

export const del = (url, arg = {}) => axios.delete(url, {
  data: arg,
});

export const postJson = (url, arg = {}) => axios.post(url, arg, {
  headers: {
    'Content-type': 'application/json;charset=UTF-8',
  },
});

export const getBlob = (url, arg) => axios.get(`${url}?${qs.stringify(arg)}`, {
  responseType: 'blob',
});

export const postBlob = (url, arg) => axios.post(url, qs.stringify(arg), {
  responseType: 'blob',
});

export const postJsonBlob = (url, arg) => axios.post(url, arg, {
  headers: {
    'Content-type': 'application/json;charset=UTF-8',
  },
  responseType: 'blob',
});

 core文件下新建api.js(这里api接口的地方)

import {
  get,
  post,
  postForm,
  postJson,
  getBlob,
  postBlob
} from './axios';

export default {
  // 示范
  test: args => get(`/test`, args),
};

core文件下新建index.js（将api接口全部导出）

import api from "./api"

export default {
  ...api,
};

main.js(全局挂载)

import api from './core/index'; // 引用刚才封装好的core下的index

Vue.prototype.$api = api; //全局挂在api

三、项目中使用

this.$api.test().then(res => {
     console.log(res)
});