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

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

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

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

【vue会员管理系统】篇三之自定义Axios、初试后台接口、跨域问题_第1张图片

2.填入以下代码

import axios from "axios";

//创建自定义axios对象
const request = axios.create({
  baseURL: "/", //默认路径
  timeout: 5000, //请求超时
});

//请求拦截器
request.interceptors.request.use(
  (config) => {
    //请求拦截
    return config;
  },
  (error) => {
    //出现异常
    return Promise.reject(error);
  }
);

//响应拦截
request.interceptors.request.use(
  (response) => {
    return response;
  },
  (error) => {
    return Promise.reject(error);
  }
);

export default request; //导出自定义的axios

二、调用后台服务接口API封装(浅试)

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

【vue会员管理系统】篇三之自定义Axios、初试后台接口、跨域问题_第2张图片

[
    {"name":"hh","age":"18"},
    {"name":"jj","age":"18"},
    {"name":"kk","age":"18"}
]

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

【vue会员管理系统】篇三之自定义Axios、初试后台接口、跨域问题_第3张图片

/**
 * 封装调用接口
 */
//同import axios from "@/utils/request";
import request from "@/utils/request";

export default {
  getList() {
    const req = request({
      method: "get",
      url: "/db.json",
    });
    return req;
  },
};

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

你可能感兴趣的:(前端web,vue.js,前端,javascript)