• http.js 的封装


    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)
    }
  • 相关阅读:
    day13_迭代器,生成器
    作业礼包
    day12_装饰器进阶
    装饰器作业
    day11_装饰器
    函数作业
    day10-函数进阶
    数据类型-习题解答
    day09_函数
    PHP 完美分页
  • 原文地址:https://www.cnblogs.com/wenqylh/p/14964921.html
Copyright © 2020-2023  润新知