vue请求后台的axios的二次封装

前言：

       之前封装过axios，入口，但是在后面不停的开发中，又有了新的新的体会，然后根据自己的情况，重新整理了一份我认为更加适合开发的封装。使用的是iview框架。

第一：是我们封装好的http.js文件

import axios from 'axios'
import { getToken } from '@/libs/util'
import config from '@/config'
import iView from 'view-design';

axios.defaults.timeout =  3000;//超时请求时间
// 添加请求拦截器--------------------------------------------
axios.interceptors.request.use(config => {
    // 显示loading
    iView.Spin.show({
      render: (h) => {
        return h('div', [
          h('Icon', {
            'class': 'demo-spin-icon-load',
            props: {
              type: 'ios-loading',
              size: 18
            }
          }),
          h('div', '加载中')
        ])
      }
    });
    return config
  },error => {
    // 请求错误时弹框提示
    return Promise.reject(error)
  })

// 添加响应拦截器----------------------------------------------------------------
axios.interceptors.response.use(res => {
  iView.Spin.hide();// 隐藏loading
  const { data, status, headers } = res
  console.log('@return-data:')
  console.log(data)
  console.log('@return-headers:')
  console.log(headers)
  return { data, status, headers }
}, error => {
  // 统一处理请求失败问题
  iView.Spin.hide();
  //超时做特殊处理
  if(error=='Error: timeout of 3000ms exceeded'){
    return Promise.reject(error)
  }
  errorState(error)
  console.log('@error:')
  console.log(error)
  return Promise.reject(error)
});

// 封装数据返回失败提示函数---------------------------------------------------------------------------
function errorState(error) {
  console.log('/------------------------------------http(END)------------------------------------/')
  let code = error.response.data.code
  if(  code === 'INVALID_OPERATOR_TOKEN') {
    iView.Message.error('长时间未操作，需要重新登录！'  , 1);
    router.replace({
      name: 'login'
    })

  }
}

// 封装数据返回成功提示函数---------------------------------------------------------------------------
function successState(res) {
    let code = res.data.code;
    if( code == 10001 || code == 10002 || code == 10003 || code == 10004 || code == 10005 || code == 10006 || code == 10010 ){
      iView.Message.error( res.data.message);
    }else if(code == 10007){
      iView.Message.error('长时间未操作，需要重新登录！'  , 1);
      router.replace({
        name: 'login'
      })
    }
    console.log('/------------------------------------http(END)------------------------------------/')
    return res
}

// 封装axios--------------------------------------------------------------------------------------
function http(httpDefault) {
  let token = getToken();
  httpDefault.baseURL= process.env.NODE_ENV === 'development' ? config.baseUrl.dev : config.baseUrl.pro;
  if(token) {
    if(httpDefault.headers){
      httpDefault.headers['X-Access-Token'] =token
    }else {
      httpDefault.headers={
        'X-Access-Token':token
      }
    }
  };
  console.log('/------------------------------------http(START)------------------------------------/')
  console.log('@all-url:')
  console.log(httpDefault.baseURL+httpDefault.url)
  console.log('@params:')
  console.log(httpDefault)
  // 注意**Promise**使用(Promise首字母大写)
  return new Promise((resolve, reject) => {
    axios(httpDefault)
    // 此处的.then属于axios
      .then((res) => {
        console.log('@data-from-@url:');
        console.log(httpDefault.url);
        successState(res);
        resolve(res);
      }).catch((response) => {
        reject(response);
    })
  })
}

export default http

第二：配置api

在src下面新建api文件夹来放我们各种js，这里以login为案例

/**
 * @login接口
 * zwh
 * 2020.7.8
 * */
import axios from '@/libs/http'
const url='/archives/v1/admin/common';
/**
 *  登录
 * */
export const login = ( data ) => {
  return axios({
    url: url +  '/login',
    method: 'post',
    data: data
  })
}
/**
 * 普通用户-短信验证码
 * */
export const getPhoneCaptcha = ( data ) => {
  return axios({
    url:url+'/sms',
    method: 'post',
    data: data
  })
}

第三：页面使用

1、js中引入

import {
          getPhoneCaptcha,//手机验证码
          login,//登陆
        } from '@/api/login'

2、使用方法

getPhoneCaptcha(str).then(res => {
  if (res.status === 200) {
    this.$Message.success('手机验证码已发送!')
  }
}).catch(err=>{
  console.log(err)
})

第四：页面console.log介绍

发送请求以后两个数据：第一个是请求后台全路径，第二个是请求后台所有的参数

接收请求以后三个数据：第一个是后台返回数据，第二个是请求后台返回的请求头，第三个是请求后台地址

第五：除此之外其他亮点

1、加载中效果，请求后台时会有加载中，请求成功以后会消失

2、这里使用的是js-cookie来保存并且获取cookie

相关代码：

import Cookies from 'js-cookie'

export const TOKEN_KEY = 'token'

export const setToken = (token) => {
  Cookies.set(TOKEN_KEY, token, { expires: cookieExpires || 1 })
}

export const getToken = () => {
  const token = Cookies.get(TOKEN_KEY)
  if (token) return token
  else return false
}

js-cookie使用方法

1、设置：

Cookies.set('name', 'value');

Cookies.set('name', 'value', { expires: 7 });

2、读取：

Cookies.get('name');

3、删除：

Cookies.remove('name');

3、超时响应是3秒并会在console.log里面有明显提示