在vue中使用axios（详细通用版）

一、安装

1、使用npm

$ npm install axios

2、使用bower

$ bower install axios

3、使用cdn

<script src="https://unpkg.com/axios/dist/axios.min.js"></script>

二、封装

在src下创建两个文件夹，utils和api，分别用来放封装的文件和接口文件

1、封装fetch.js

在utils中创建fetch.js文件，内容如下
fetch.js

// 引入element插件，也可以不用，看具体项目需求
import { Message } from "element-ui";
// 引入路由，登录失效时跳转回登录页
import router from "../router/index";
// 文件处理方法
import { file } from "@/assets/js/file.js";

const axios = require("axios");
axios.defaults.headers["Content-Type"] = "application/json;charset=UTF-8";
axios.defaults.headers.common["Access-Control-Allow-Origin"] = "*";
// 超时时间
const fetch = axios.create({
  timeout: 15 * 1000
});

fetch.interceptors.request.use(
  config => {
    // 设置token
    const token = ''
    config.headers.common["Authorization"] = token;
    return config;
  },
  error => {
    return Promise.reject(error);
  }
);

fetch.interceptors.response.use(
  res => {
  	// 判断返回数据类型，如果是文件，则执行下载；否则判断接口是否请求成功，具体状态与后端协商，这里以res.data.success举例
    if (
      res.headers["content-type"] === "application/vnd.ms-excel;charset=UTF-8"
    ) {
      // 下载文件
      file(res);
    } else if (res.data.success === true) {
      return res.data;
    } else {
      return Promise.reject(res.data);
    }
  },
  error => {
    const stateCode = error.response.status;
    // 这里只添加了401状态码，如有需求可自行添加更多状态码
    if (stateCode === 401) {
      // 这里记得清除token 
      Message.closeAll();
      Message.error("登录已失效，请重新登录！");
      router.push("/login");
    } else {
      // 清除多余失败提示框
      Message.closeAll();
    }
    return Promise.reject(error);
  }
);

export default fetch;

2、处理文件下载 file.js

在utils中创建file.js文件，内容如下
此处看需求，如果项目没有文件下载功能可不创建此文件，同时fetch.js中也不需要引入此文件

file.js

// 文件流类型
export const downLoadFile = res => {
  const blob = new Blob([res.data], {
    type: "application/vnd.ms-excel"
  });
  // 创建标签
  const link = document.createElement("a");
  // 隐藏标签
  link.style.display = "none";
  // 添加文件
  link.href = URL.createObjectURL(blob);
  // 获取文件名（此处看后端接口如何返回，非固定）
  const name = res.headers["content-disposition"].split(";")[1];
  link.download = decodeURI(name);
  // 添加子节点
  document.body.appendChild(link);
  // 模拟点击下载
  link.click();
  // 清除子节点
  document.body.removeChild(link);
};

// 文件地址类型
export const clickDownload = data => {
  // 创建标签
  const link = document.createElement("a");
  // 隐藏标签
  link.style.display = "none";
  // 添加文件
  link.href = data.url;
  // 添加文件名（此方法在本地不会生效，部署到线上可正常使用）
  link.download = data.name;
  // 添加子节点
  document.body.appendChild(link);
  // 模拟点击下载
  link.click();
  // 清除子节点
  document.body.removeChild(link);
};

// 获取文件格式（此处是为了显示不同文件图标，总结为5类，具体可根据需求进行修改）
export const fileType = e => {
  if (!e) {
    return "";
  }
  let list = e.split(".");
  let code = "";
  const format = list[list.length - 1];
  switch (format) {
    case "xls":
      code = "excel";
      break;
    case "xlsx":
      code = "excel";
      break;
    case "doc":
      code = "word";
      break;
    case "docx":
      code = "word";
      break;
    case "pptx":
      code = "ppt";
      break;
    case "png":
      code = "img";
      break;
    case "jpg":
      code = "img";
      break;
    case "jpeg":
      code = "img";
      break;
    case "gif":
      code = "img";
      break;
    case "txt":
      code = "text";
      break;
    case "wps":
      code = "text";
      break;
  }
  return code;
};

3、封装请求类型

在utils中创建request.js文件，内容如下
统一封装，方便进行修改

request.js

import fetch from './fetch'
import qs from 'qs';

function request(url, method, data, blob) {
  switch (method) {
    case 'get':
      return fetch({
        method: 'get',
        url,
        params: data
      })
    case 'post':
      return fetch({
        method: 'post',
        url,
        data,
        responseType: blob || '' // 判断数据类型
      })
    case 'delete':
      return fetch({
        method: 'delete',
        url,
        params: data
      })
    case 'put':
      return fetch({
        method: 'put',
        url,
        data: qs.stringify(data)
      })
    default:
      return fetch
  }
}

export default request;

4、封装接口

在api文件中创建js文件，这里以login.js举例；
接口文件可以有很多个，为了方便管理，建议按照模块进行分别封装，每个文件格式都是一样的。

login.js

import request from "@/utils/request";

// 登录
export function login(data) {
  return request("/user/login", "post", data);
}

// 退出登录
export function logout(data) {
  return request("/user/logout", "post", data);
}

使用

1、在main.js中引入axios

const axios = require("axios");
Vue.prototype.$axios = axios;

2、在.vue文件中使用

<script>
import { login, logout } from "@/api/message.js";
export default {
	methods: {
		// 登录
    	_login() {
    		login({
				name:'qdxxbj-ds',
				password:'123456'
			}).then(res => {
				console.log(res.data)
			}).catch(err=> {
				console.log(err.data)
			})
		}
	}
}
</script>

over…