码迷,mamicode.com
首页 > Web开发 > 详细

http.js 的封装

时间:2021-07-05 16:58:57      阅读:0      评论:0      收藏:0      [点我收藏+]

标签:work   ring   function   out   develop   func   defaults   move   chm   

import axios from ‘axios‘;
import iView from ‘iview‘;
const baseApiObj = {
  production: ‘https://imzt.bndxqc.com/api‘,
  experience: ‘https://imztty.bndxqc.com/api‘,
  test: ‘http://imzth5test.bndxqc.com/api‘,
  development: ‘/api‘
}
let baseApi = ‘/api‘;
// 开发模式
if (process.env.NODE_ENV === ‘development‘){
  baseApi = ‘/api‘;
}
else{
  baseApi = baseApiObj[process.env.VUE_APP_TITLE] || ‘https://imzt.bndxqc.com/api‘;
}
// axios.defaults.timeout = 3000;
// 请求拦截器
axios.interceptors.request.use(
  config => {
    // 每次发送请求之前判断是否存在token
    // 如果存在,则统一在http请求的header都加上token,这样后台根据token判断你的登录情况
    // 即使本地存在token,也有可能token是过期的,所以在响应拦截器中要对返回状态进行判断
    // const token = sessionStorage.getItem("userToken");
    // token && (config.headers.Authorization = ‘Bearer ‘ + token);
    config.headers[‘Content-Type‘] = ‘application/json; charset=UTF-8‘;
    return config;
  },
  error => {
    return Promise.error(error);
  });
// 响应拦截器
axios.interceptors.response.use(
  response => {
    // 如果返回的状态码为200,说明接口请求成功,可以正常拿到数据
    // 否则的话抛出错误
    if (response.status === 200) {
      return Promise.resolve(response);
    } else {
      return Promise.reject(response);
    }
  },
  // 然后根据返回的状态码进行一些操作,可自行扩展
  error => {
    if(error.message.includes(‘Network Error‘)){
      iView.Message.error("网络错误,请检查网络连接");
      return; 
    }
    else if(error.message.includes(‘timeout‘)){
      iView.Message.error("网络超时,请稍后重试");
      return ; 
    }
    else if (error.response && error.response.status) {
      switch (error.response.status) {
        //token过期,清除本地token
        case 403:
          iView.Message.error("token失效,请关闭重连");
          // 清除token
          localStorage.removeItem(‘userToken‘);
          break;
        //请求不存在
        case 404:
          iView.Message.error("网络请求不存在");
          break;
        //请求不存在
        case 500:
          iView.Message.error("服务器异常");
          break;
        //其他错误,直接抛出错误提示
        //用户被登出
        case 401:
          
          break;
        default:
          if(error.response.data && error.response.data.message){
            iView.Message.error(error.response.data.message);
          }
      }
      return Promise.reject(error.response);
    }
  }
);

/**
 * methods请求为GET
 *
 */
function getMethod(url, params) {
  let headers = filterHeader();
  headers[‘Content-Type‘] = ‘application/json; charset=UTF-8‘;
  return new Promise((resolve, reject) => {
    axios
      .request({
        url: baseApi + url,
        method: "get",
        params: { ...params },
        headers
      })
      .then(res => {
        resolve(res);
      })
      .catch(error => {
        console.log(error);
        reject(error);
      });
  })
}

/**
 * methods 请求为POST
 * data 请求格式
 */

function postMethod(url, data) {
  let headers = filterHeader();
  return new Promise((resolve, reject) => {
    axios.request({
      url: baseApi + url,
      method: ‘post‘,
      // data: data,
      params: { ...data },
      transformRequest: [
        function (data) {
          data = JSON.stringify(data)
        }
      ],
      headers
    }).then(res => {
      resolve(res)
    }).catch((error) => {
      console.log(error);
      reject(error)
    })
  })
}


/**
 * methods请求为POST
 * data请求为JSON格式
 */
function postJsonMethod(url, data, noUseToken, config={ timeout: 20 * 1000 }) {
  const { timeout } = config;
  let headers = filterHeader();
  return new Promise((resolve, reject) => {
    axios.request({
      url: baseApi + url,
      method: ‘post‘,
      data: data,
      timeout,
      transformRequest: [
        function (data) {
          data = JSON.stringify(data)
          return data
        }
      ],
      headers
    }).then(res => {
      resolve(res)
    }).catch((error) => {
      console.log(error);
      reject(error)
    })
  })
}

/**
 * methods请求为DELETE
 *
 */
function deleteMethod(url, params) {
  let headers = filterHeader();
  return new Promise((resolve, reject) => {
    axios.request({
      url: baseApi + url,
      method: ‘delete‘,
      params: params,
      headers
    }).then(res => {
      resolve(res)
    }).catch(error => {
      console.log(error);
      reject(error)
    })
  })
}

/**
 * methods请求为PUT
 * data请求为JSON格式
 */
function putMethod(url, data) {
  let headers = filterHeader();
  return new Promise((resolve, reject) => {
    axios.request({
      url: baseApi + url,
      method: ‘put‘,
      data: data,
      headers
    }).then(res => {
      resolve(res)
    }).catch(error => {
      console.log(error);
      reject(error)
    })
  })
}

/**
 * @Description: 过滤请求头,默认加token和staffId
 *               当noUseToken参数为true时,请求头不加参数
 * @author lidonghui
 * @date 2019/6/28
*/
function filterHeader(noUseToken) {
  const userToken = sessionStorage.getItem("userToken");
  const staffId = sessionStorage.getItem("staffId");
  if (noUseToken) {
    return {}
  } else {
    return {
      Authorization: "Bearer " + userToken,
      staffId: staffId,
    };
  }
}

export default {
  postJsonMethod,
  postMethod,
  getMethod,
  deleteMethod,
  putMethod,
}
 
 
 
使用  :
import apiMethod from "@/libs/http";

//搜索联系人
export const imSearchMemberList = (data)=>{
    return apiMethod.getMethod(‘/user/es/staffSearch/imSearch_v2‘,data)
}

http.js 的封装

标签:work   ring   function   out   develop   func   defaults   move   chm   

原文地址:https://www.cnblogs.com/wenqylh/p/14964921.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!