安装

npm install axios -S

全局引入

在main.js中进行全局注册

main.js

创建axios文件夹

image.png

在index.js文件中，创建axios实例，并进行请求拦截

import axios from "axios";
// 创建axios实例
const service = axios.create({});
// request拦截器
service.interceptors.request.use(
  config => {
    config.headers["tokenid"] = "435065970"; // 请求头中添加tokenid
    return config;
  },
  error => {
    Promise.reject(error);
  }
);
// response拦截器
service.interceptors.response.use(
  response => {
    if (response) {
      return response.data;
    } else {
      Promise.reject(new Error("error"));
    }
  },
  error => {
    if (JSON.stringify(error).includes("401")) {
      alert("登录已过期，请重新登录！");
    } else {
      alert(error);
    }
    return Promise.reject(error);
  }
);
export default service;

在first.js进行封装获取数据

import axios from "./index";
export class firstApi {
  // 获取信息
  static getFisrtList() {
    return axios.get(`first.json`).then(res => res.data);
  }
}

获取数据

first.vue获取数据

<script>
import { firstApi } from "../src/axios/first";
export default {
  created() {
    firstApi.getFisrtList().then(res => {
      window.console.log(res);
    });
  }
};
</script>

image.png