• 【vue会员管理系统】篇三之自定义Axios、初试后台接口、跨域问题

    一、自定义封装Axios异步对象和添加拦截器

            因为本项目很多组件需要通过Axios发送一步请求，所以封装Axios对象，自己封装的Axios在后续可以使用axios中提供的拦截器。

    1.在src文件夹下创建utils文件夹，再在utils文件夹下创建request.js文件

    2.填入以下代码

    1. import axios from "axios";
    2.  
    3. //创建自定义axios对象
    4. const request = axios.create({
    5.   baseURL: "/", //默认路径
    6.   timeout: 5000, //请求超时
    7. });
    8.  
    9. //请求拦截器
    10. request.interceptors.request.use(
    11.   (config) => {
    12.     //请求拦截
    13.     return config;
    14.   },
    15.   (error) => {
    16.     //出现异常
    17.     return Promise.reject(error);
    18.   }
    19. );
    20.  
    21. //响应拦截
    22. request.interceptors.request.use(
    23.   (response) => {
    24.     return response;
    25.   },
    26.   (error) => {
    27.     return Promise.reject(error);
    28.   }
    29. );
    30.  
    31. export default request; //导出自定义的axios

    二、调用后台服务接口API封装（浅试）

    1.在public文件夹下新建db.json文件，并添加数据。

    1. [
    2.     {"name":"hh","age":"18"},
    3.     {"name":"jj","age":"18"},
    4.     {"name":"kk","age":"18"}
    5. ]

    2.在src文件夹下新建api文件夹，再在api文件夹下新建test.js文件，用来封装测试调用的接口。并在test.js文件里填入以下代码：

    1. /**
    2.  * 封装调用接口
    3.  */
    4. //同import axios from "@/utils/request";
    5. import request from "@/utils/request";
    6.  
    7. export default {
    8.   getList() {
    9.     const req = request({
    10.       method: "get",
    11.       url: "/db.json",
    12.     });
    13.     return req;
    14.   },
    15. };

    3.打开components下的HelloWorld.vue。在