vue介面封裝(簡單實現是否需要登入獲取資料)

2020-10-29 12:01:08

再次記錄用了很久的一個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});
}

在這裡插入圖片描述