vue2+webpack学习篇(三)

vue2+webpack学习篇(三)

axios请求封装，api接口封装，本地代理服务器防止跨域

1. 本地代理服务器(跨域请求)
   打开文件 config/index.js修改后重启服务

   assetsSubDirectory: 'static',
   assetsPublicPath: '/',
   proxyTable: {
     '/': {
       target: 'http://127.0.0.1:8080',  //代理地址
       changeOrigin: true,
       pathRewrite: {}
     }
   },
   

2. api接口封装及全局注册
   新建 src/api/index.js
   新建 src/public/install.js 引入要定义的全局方法及变量
   main.js中

   import install from './public/install.js'  //全局组件
   Vue.use(install)
   

调用时 this.$key

public/install.js

 import api from '@/api'  // api接口
  import pub from './global.js'  // 全局变量及方法
  let file = {
    api
  }
  for(let key in pub){
    file[key] = pub[key]
  }

  export default {
    install(Vue) {
      for (let key in file) {
        Vue.prototype['$' + key] = file[key]
      }
    }
  }

public/global.js

import vm from '@/main.js'
export default {
  errorMsg(data) { //方法
    vm.$message.error(data)
  },
}

api/index.js 代码

import axios from '@/request'
const BASE_URL = ""

/*
* @method {request} 请求函数
* @param {url} 请求地址
* @param {data} 请求携带的参数
* @param {method} 请求方式取值:
* get get请求
* postForm post请求,请求头 "application/x-www-form-urlencoded;charset=UTF-8"
* postJson post请求,请求头 "application/json;charset=UTF-8"
* postUpload 请求,请求头 "multipart/form-data;charset=UTF-8" 上传文件
* put put请求
* putForm put请求,请求头 "application/x-www-form-urlencoded;charset=UTF-8"
* putJson put请求,请求头 "application/json;charset=UTF-8"
* delete delete请求
* download 下载文件请求,请求头 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet' 下载文件
* xml 下载xml文件请求,请求头 "text/xml;charset=UTF-8" 下载文件
* @returns {response} 请求返回的正确信息Promise对象结果
* @returns {rejection} 请求返回的错误信息Promise对象结果
*/
export default {
  //登陆接口
  login: data => axios(BASE_URL + '/login', data, 'postForm'),
  // 列表接口
  newsList: data => axios(BASE_URL + '/news/index', data, 'postJson'),
}

3. axios请求封装

新建文件 src/request/index.js
代码如下

/*
 * @Description: 该文件的描述信息
 * @Author: myjuan
 * @Date: 2020-08-11
 * @LastEditors: myjuan
 * @lastEditTime: 最后更新时间
 */
import axios from 'axios'
import qs from 'qs'; // 引入qs模块，用来序列化post类型的数据
import router from '@/router'
import vue from 'vue'
import { Loading, Message } from 'element-ui'

// 环境的切换
if (process.env.NODE_ENV == 'development') { //开发环境  本地做代理 防止跨域
  axios.defaults.baseURL = '/';
} else if (process.env.NODE_ENV == 'debug') { //测试环境
  axios.defaults.baseURL = '/';
} else if (process.env.NODE_ENV == 'production') { //生产环境
  axios.defaults.baseURL = '';
}

// 请求头集合
let headerTo = [
  {
    name: 'json',
    header: {
      "Content-Type": "application/json;charset=UTF-8"
    }
  },
  {
    name: 'form',
    header: {
      "Content-Type": "application/x-www-form-urlencoded;charset=UTF-8"
    }
  },
  {
    name: 'upload',
    header: {
      "Content-Type": "multipart/form-data;charset=UTF-8"
    }
  },
  {
    name: 'download',
    header: {
      'Content-Type': 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet'
    }
  },
  {
    name: 'xml',
    header: {
      "Content-Type": "text/xml;charset=UTF-8"
    }
  },
  {
    name: 'binary',
    header: {
      "Content-Type": "application/octet-stream;charset=UTF-8"
    }
  }
]
const codeMessage = {
  200: '服务器成功返回请求的数据。',
  201: '新建或修改数据成功。',
  202: '一个请求已经进入后台排队（异步任务）。',
  204: '删除数据成功。',
  400: '发出的请求有错误，服务器没有进行新建或修改数据的操作。',
  401: '用户没有权限（令牌、用户名、密码错误）。',
  403: '用户得到授权，但是访问是被禁止的。',
  404: '发出的请求针对的是不存在的记录，服务器没有进行操作。',
  406: '请求的格式不可得。',
  410: '请求的资源被永久删除，且不会再得到的。',
  422: '当创建一个对象时，发生一个验证错误。',
  500: '服务器发生错误，请检查服务器。',
  502: '网关错误。',
  503: '服务不可用，服务器暂时过载或维护。',
  504: '网关超时。',
};

/*
* @method {request} 请求函数
* @param {url} 请求地址
* @param {data} 请求携带的参数
* @param {method} 请求方式
* @returns {response} 请求返回的正确信息Promise对象结果
* @returns {rejection} 请求返回的错误信息Promise对象结果
*/

const request = (url, data, method = 'get', parameterPositioning = 'body') => {
  if (url) {
    // 请求头请求方式
    let methodHeader, methods, requestThere = false, header;
    // 请求头集合循环 设置请求头
    headerTo.forEach(headerToItem => {
      if (method.toLowerCase().indexOf(headerToItem.name) != -1) {
        requestThere = true;
        header = headerToItem  // 设置请求头
      }
    })
    // 设置请求方式
    if (requestThere) {
      methodHeader = header.header;
      methods = method.toLowerCase().substring(0, method.toLowerCase().indexOf(header.name));
    } else { // get/post/put/delete等请求
      methods = method.toLowerCase();
    }
    let obj
    //请求参数集合
    if (parameterPositioning != 'body' || (methods == 'get' || methods == 'delete')) {
      // get请求
      obj = {
        url,
        timeout: 5000,
        method: methods,
      }
      data ? obj.params = data : '';
    } else {
      // 上传文件
      if (header && header.name == 'upload') {
        obj = {
          url,
          timeout: 120000,
          method: methods,
        }
        let form = new FormData()
        for (let key in data) {
          form.append(key, data[key])
        }
        data ? obj.data = form : '';
      } else if (header && header.name == 'download') {
        // 文件下载
        obj = {
          url,
          timeout: 60000,
          method: 'get',
          responseType: 'blob'
        }
        data ? obj.params = data : '';
      } else {
        // post请求
        obj = {
          url,
          timeout: 5000,
          method: methods,
        }
        if (header && header.name == 'form') {
          data ? obj.data = qs.stringify(data) : '';
        } else {
          data ? obj.data = data : '';
        }

      }
    }
    // 设置请求头  token
    if (methodHeader) {
      methodHeader['Authorization'] = sessionStorage.getItem('loginKey') ? JSON.parse(sessionStorage.getItem('loginKey')).access_token : ''
    } else {
      methodHeader = {
        "Authorization": sessionStorage.getItem('loginKey') ? JSON.parse(sessionStorage.getItem('loginKey')).access_token : ''
      }
    }
    let newAxios = axios.create({
      headers: methodHeader
    })
    // 发起请求前
    newAxios.interceptors.request.use(
      config => {
        return config;
      },
      error => {
        $errInfo('加载超时');
        return Promise.reject(error);
      }
    );
    // 发起请求后
    newAxios.interceptors.response.use(
      res => {
        if (res.data.code) {
          if (res.data.code == 10010200) {
            return res.data
          } else {
            res.data.errors && Message.error(res.data.errors[0].details)
          }
        }else if(res.status === 200){
            return res.data;
        }
      },
      error => {
        let res = error.response
        console.log(res)
        if (error) {
          // 请求配置发生的错误
          if (!error.response) {
            return console.log('Error', error.message);
          }
          // 获取状态码
          const status = res.data.httpStatus;
          const errortext = codeMessage[status];
          // console.log(errortext)
          // 提示错误信息
          if (errortext) {
            Message.error(errortext);
          } else {
            if (res.data.errors) {
              Message.error(res.data.errors[0].details)
            } else {
              Message.error(res.data.message)
            }
          }
          // 错误状态处理
          // if (status === 401) {
          //   router.push('/login')
          // } else if (status === 403) {
          //   router.push('/login')
          // } else if (status >= 404 && status < 422) {
          //   router.push('/404')
          // }
        }
        return Promise.reject(error);
      }
    );
    let loadingInstance = ''

    return new Promise((resolve, rejection) => {
      if (header && header.name == 'upload') {
        loadingInstance=Loading.service({
          lock: true,
          text: 'Loading',
          spinner: 'el-icon-loading',
          background: 'rgba(0, 0, 0, 0.7)'
        })
      }
      newAxios(obj).then(res => {
        if (header && header.name == 'upload') {
          loadingInstance.close();
        }
        if(res){
          resolve(res)
        }else{
          rejection(res)
        }

      }).catch(err => {
        if (header && header.name == 'upload') {
          loadingInstance.close();
        }
        rejection(err)
      })
    })
  } else {
    console.error(new Error('请求地址不存在,请检查接口地址，请求方式为' + method))
  }
}
export default request