vue接口的封装

第一步建立

建立local.js文件

// 封装本地存储的方法
export default {
  // getItem 需要返回值
  get(key) {
    // 携带参数
    return JSON.parse(window.localStorage.getItem(key));
  },
  // setItem 设置不需要返回
  set(key, value) {
    window.localStorage.setItem(key, JSON.stringify(value));
  },
  // removeItem
  remove(key) {
    window.localStorage.removeItem(key);
  },
  // clear 清空
  clear() {
    window.localStorage.clear();
  },
  // 判断是否有对应的名称值
  iskey(key) {
    return window.localStorage.getItem(key) ? true : false;
  },
};

local.js文件第二步建立request.js文件在request.js引入

// 引入axios
import axios from "axios";
// 引入qs qs是转化成字符串
// import qs from "qs";
// 需要导入自己封装的local.js
import local from "./local.js"; //封装的本地存储
// 放url的公共的地址
axios.defaults.baseURL = "/api"; //跨域接口改的名字

// 添加请求拦截器
axios.interceptors.request.use(
  function (config) {
    // 在发送请求之前做些什么
    // 记住这里需要拦截token
    if (local.iskey("yl_token")) {
      config.headers.Token = local.get("yl_token");
      // 还需要设置请求头 权限请求头是为了请求照片
      config.headers.UserId = local.get("userInfo").man_id;//userInfo,vuex定义的全局对象
    }
    return config;
  },
  function (error) {
    // 对请求错误做些什么
    return Promise.reject(error);
  }
);
// 添加响应拦截器
axios.interceptors.response.use(
  function (response) {
    // 2xx 范围内的状态码都会触发该函数。
    // 对响应数据做点什么
    return response.data;
  },
  function (error) {
    // 超出 2xx 范围的状态码都会触发该函数。
    // 对响应错误做点什么
    return Promise.reject(error);
  }
);
// 第一层封装解决了method 对应参数的问题
//这个是我们自己定义的方法
let request = (url, data = {}, method = "get", headers = {}) => {
  return axios({
    url,
    method,
    data: method == "post" ? data : null,
    params: method == "get" ? data : null,
    headers,
  });
};
// 向外抛出get和post
export default {
  get(url, data, headers = {}) {
    return request(url, data, "get", headers);
  },
  post(url, data, headers = {}) {
    return request(url, data, "post", headers);
  },
};

第三步在src下一级建立api文件夹

import request from "../utils/request";
// 简写 如果只有一个返回值 省略{} 登录
// 我的任务
export const api_myass = (data) => request.get("/ass/myass", data);