vue封装axios的API

首先我们要在搭建好的项目的src目录下创建一个 http | | netWork 目录

然后在这里面写三个js文件
他们分别是
api.js
env.js
request.js

env文件里面放置的是环境

export default {
  //开发环境
  dev: {
    baseUrl: "https://localhost:2333"
  },
  //测试环境
  test: {
    baseUrl: "https://test.365msmk.com"
  },
  //生产环境
  prod: {
    baseUrl: "https://www.365msmk.com"
  }
};

api里面放置的是我们封装业务的各种接口

import http from "./request";      //引入封装好的axios实例

//封装业务的各种接口


// 获取轮播图
export function getBanners() {
  return request({
    url: "/banner",
    method: "GET"
  });
}

//获取验证码
export function get_sms_code(data) {
  return request({
    url: "/smsCode",
    method: "POST",
    data
  });
}

request是对axios的具体封装

import axios from 'axios'   /引入axios

//创建axios实例
const http = axios.create({
    baseURL: 'https://www.365msmk.com/api/app',     //设置根路径
    
    headers: {    //设置请求头
        "content-Type": 'application/json',       
        "devicetype": "H5"
    }
});

//请求拦截
http.interceptors.request.use(
    config => {
        console.log("请求的数据:", config);
        return config;
    },
    error => {
        return Promise.reject("出错啦");
    }
);

//响应拦截
http.interceptors.response.use(
    response => {
        //根据返回不同的状态码来做后续处理
        // console.log("返回的数据", response);
        return response;
    },
    error => {
        return Promise.reject("返回报错");
    }
);
export default http   // 导出实例

最后在需要的页面引入

然后调用