vue封装网络请求

1.新增util文件夹
在util文件夹里新增http.js,负责axios的封装

import Vue from "vue";
import axios from "axios";
import { Message } from "element-ui";
const postAxios = (data, resolve, reject) => {
  const request = axios.create({
    // API 请求的默认前缀
    baseURL: "/index",
    timeout: 6000, // 请求超时时间
    headers: {
      "content-type": "application/json",
      token: sessionStorage.getItem("token")
    }
  });
  // 请求拦截器
  if (!data.url) {
    Message.error("请设置请求地址");
  }
  request
    .post(data.url, data.data)
    .then(res => {
      // 响应拦截器
      if (res.status != 200) {
        Message.error(`${res.statusText}服务器出现问题`);
      } else if (res.data.code == 401 && !data.type) {
        Message.error(res.data.msg);
        setTimeout(res => {
          window.location.href = "/#/login";
        }, 1000);
      } else if (res.data.code !== 0 && !data.type) {
        Message.error(res.data.msg);
      }
      resolve(res.data);
    })
    .catch(err => {
      Message.error("404服务器出错");
      reject(err);
    });
};

function _AXIOS(data) {
  return new Promise(function(resolve, reject) {
    postAxios(data, resolve, reject);
  });
}

Vue.prototype.$axios = _AXIOS;

export default _AXIOS;

2.在util.js里新增request_url文件，负责装接口

import Vue from "vue";

const url = {
  0: "/user/login", // 登录
};

Vue.prototype.$url = url;

export default url;

3.在util.js下新增url.js,负责测试环境与正式环境的域名

export const base_url = "https:/xxx/index";
export const base_img_url = "https://xxx/";
export const base_h5_url = "https://xxx/h5";

//  测试
// export const base_url = "http://xxx";
// export const base_img_url = "http:/xxx/";
// export const base_h5_url = "http://xxx/h5";

4.在main.js里引入这两个文件

import "@/utils/http.js"; // 全局注册请求
import "@/utils/request_url.js"; // 全局注册请求接口统一管理

5.在文件就可以直接引用了

this.$axios({
          url: this.$url[35],
          data: {
            dayId: this.day_id,
            test_id: this.task_id
          }
        }).then(res => {
         
})