vue接口封装(简单实现是否需要登录获取数据)

再次记录用了很久的一个vue接口封装方法(非原创)

/**
 *  * npm install axios  安装
 *  接口地址    封装方法
 */
import axios from "axios";

var VUE_API_URL = "../plugins/index"

const instance = axios.create({
  baseURL: VUE_API_URL,
  timeout: 10000
});
const defaultOpt = {login:false};
/**
 * http 请求基础类
 * 参考文档 https://www.kancloud.cn/yunye/axios/234845
 *
 */

// 接收数据
const request = ["post", "put", "patch" , "get", "delete", "head"].reduce((request, method) => {
  /**
   *
   * @param url string 接口地址
   * @param data object get参数
   * @param options object axios 配置项
   * @returns {AxiosPromise}
   */
  request[method] = (url, data = {}, options = {}) => {
    return baseRequest(
      Object.assign({ url, data, method }, defaultOpt , options)
    );

  };
  return request;
}, {});


//处理请求
function baseRequest(options){
  const headers = options.headers || {};
  if(options.login == true){
    headers["Authori-zation"] = getCookie("token")
  }

  options.headers = headers;
  return instance(options).then(res => {
    const data = res.data || {};

    //删除登录标识
    delete options.login;
    //请求失败
    if (res.status !== 200)
      return Promise.reject({ msg: "请求失败", res, data });


    if(data.code === 200){
      return Promise.resolve(data,res);
    }else{
      return Promise.reject(data,res);
    }


  });

}

function getCookie(c_name) {
  if (document.cookie.length>0)
  {
    var  c_start=document.cookie.indexOf(c_name + "=")
    if (c_start!=-1)
    {
      c_start=c_start + c_name.length+1
      var c_end=document.cookie.indexOf(";",c_start)
      if (c_end==-1) c_end=document.cookie.length
      return unescape(document.cookie.substring(c_start,c_end))
    }
  }
  return ""
};

export default request;
import request from "../plugins/request";
/**
 * 登录
 */
export function signIn(phone,code) {
  return request.post("/user/login",{phone:phone,code:code},{login:false});
}

在这里插入图片描述

猜你喜欢

转载自blog.csdn.net/weixin_45518668/article/details/109318065