三步对 axios 做一个request 封装实例，新手也能学会，有手就行

众所周知，把接口直接放在views中是一种犯罪，每次维护都需要费力去找，为了方便维护（摸鱼），我们必须做一个封装。

1. 在 /src 下建一个 /utils 文件夹，里面创建 request.js 和 api.js 两个文件。
2. request .js 中用来做拦截文件，api.js则用来管理整个项目的接口。
3. 在需要使用axios的页面中，按需引入。

此处使用的两个接口为：        baseURL:   http://www.pudge.wang:3080/api

首页数据（get）：            /rated/list

详情页数据（post）：        /movies/detail

 1.request.js页面

//request.js页面 用来做拦截的文件

//引入axios
import Vue from "vue";
import axios from "axios";
Vue.use(axios);

// 1.创建一个单例（实例）
const instance = axios.create({
  //一个接口前的统一地址
  baseURL: "http://www.pudge.wang:3080/api",
  //超时的时间
  timeout: 4000, 
});

// 拦截器 - 请求拦截
instance.interceptors.request.use(
  (config) => {
    // 部分接口需要拿到token
    let token = localStorage.getItem("token");
    if (token) {
      //有token的话，就给headers中带上token，因为后端的token未必就叫做'token'
      //所以写成对象，即把token赋值给'a-token'
      config.headers = {
        "a-token": token,
      };
    }
    return config;
  },
  (err) => {
    return Promise.reject(err);
  }
);

// 拦截器 - 响应拦截
instance.interceptors.response.use(
  (res) => {
    return res;
  },
  (err) => {
    return Promise.reject(err);
  }
);

//整体暴露
export default instance;

2. api.js 页面

//用于管理整个项目的接口

//首先需要将 request.js 整体导入
import request from "@/utils/request.js";

//然后按需导出每个api

//请求首页数据(get请求)
export const GetHomeApi =()=>request.get('/rated/list');

// 请求详情页数据 post
// 因为 post请求需要参数，所以添加params
export const PostDetailApi =(params)=>request.post('/movies/detail',params);

3. 使用axios的页面，此处为 AxiosView.vue页面

<template>
  <div>
    <h2>这是 axios 的页面</h2>
    <button @click="getData()">getData</button>
    <button @click="postData()">postData</button>
  </div>
</template>

<script>
 //从 api.js 中，按需导入 GetHomeApi, PostDetailApi 这两个请求
import { GetHomeApi, PostDetailApi } from "@/utils/api.js";
export default {
  data() {
    return {};
  },
  methods: {
    getData() {
       //因为后缀的参数在api.js中，如果需要改动的话直接去找GetHomeApi
      GetHomeApi().then((res) => {
        console.log(res.data.result);
      });
    },
    
    postData() {
      //将{id: "1228788",}作为参数，传递给PostDetailApi的 params
      PostDetailApi({
        id: "1228788",
      }).then((res) => {
        console.log(res.data.result);
      });
      
    },
  },
};
</script>