api封装,封装api 这么多年都不和别人说的秘技,超好用,简单只需2步

第一步:在src下面新建utils文件夹,新建个request.js

import axios from 'axios'
import { Message, MessageBox } from 'element-ui'//请根据自己的情况自信修改
import store from '../store'  

**封装api,能有啥秘技,就皮一下,吼,很开心**

// 创建axios实例
const service = axios.create({
  baseURL: process.env.BASE_API, // api 的 base_url
  /* baseURL: window.glod.baseApi, // api 的 base_url*/
  timeout: 50000 // 请求超时时间
})

// request拦截器
service.interceptors.request.use(
  config => {
    // config.headers['Content-Type'] = 'application/json'
    if (store.getters.token) {
      config.headers['Authorization'] = 'Bearer ' + store.getters.token
       // 让每个请求携带自定义token 请根据实际情况自行修改
    }
    return config
  },
  error => {
    // Do something with request error
    console.log(error) // for debug
    Promise.reject(error)
  }
)

// response 拦截器
service.interceptors.response.use(
  response => {
    /**
     * code为201-206的暂时定为正确 可结合自己业务进行修改
     */
    const res = response
    if (res.status < 200 || res.status > 299) {
      Message({
        message: res.statusText,
        type: 'error',
        duration: 5 * 1000
      })

      if (res.status === 401 || res.status === 403) {
        MessageBox.confirm(
          '你已被登出,可以取消继续留在该页面,或者重新登录',
          '确定登出',
          {
            confirmButtonText: '重新登录',
            cancelButtonText: '取消',
            type: 'warning'
          }
        ).then(() => {
          store.dispatch('oidc/signOutOidc');
        })
      }
      return Promise.reject('error')
    } else {
      return response.data
    }
  },
  error => {
    if (error.response) {
      Message({
        message: error.response.data.error.details,
        type: 'error',
        duration: 5 * 1000
      })
      console.log('err' + error.response.data) // for debug
    } else {
      Message({
        message: error.message,
        type: 'error',
        duration: 5 * 1000
      })
      console.log('err' + error.message) // for debug
    }
    return Promise.reject(error)
  }
)

export default service

第二步:在src下面新建api文件夹,新建api.js

import request from "@/utils/request";
import qs from 'qs'

	// get请求方式
	export function getConsumeByPhone(query) {
	  return request({
	    url: `/v1_consume/getConsumeByPhone`,
	    method: "get",
	    params: query
	  });
	}
	
// post请求方式
export function addLeaveMessage(query) {
  return request({
    url: `/v2_leave/addLeaveMessage`,
    method: "post",
    data: qs.stringify(query),
  });
}

 //delete请求方式
   export function deleteByIdCard(id) {
     return request({
       url: `/card/deleteById/${id.id}/${id.updater}`,
       method: "delete"
    });
   }
   
//下面说说data数据上传

//当action为get时候,浏览器用x-www-form-urlencoded的编码方式把form数据转换成一个字串
(name1=value1&name2=value2…),然后把这个字串append到url后面,用?分割,加载这个
新的url。

export function getOpenId(query) {
  return request({
    url: `/v1_auth/getOpenId`,
    method: "post",
    data: qs.stringify(query),
    headers: {
      'Content-Type': 'application/x-www-form-urlencoded'
    }
  });
}

// data上传2
export function getCode(query) {
  return request({
    headers: {
      'Content-Type': 'application/json'
     },
    url: `/v1_global/getCode`,
    method: "post",
    data: qs.stringify(query),
  });
}
// **当action为post时候,浏览器把form数据封装到http body中,然后发送到server。
 如果没有type=file的控件,用默认的application/x-www-form-urlencoded就可以了。 
 但是如果有type=file的话,就要用到multipart/form-data了。浏览器会把整个表单以控件
 为单位分割,并为每个部分加上Content-Disposition(form-data或者file),Content-Type
 (默认为text/plain),name(控件name)等信息,并加上分割符(boundary)。**

export function upload(query) {
  return request({
    headers: {
      'Content-Type': 'multipart/form-data'
     },
    url: `v1_global/upload`,
    method: "post",
    data: query
  });
}
	//  data上传4
	export function uploadFace(query) {
	  return request({
	    headers: {
	      'Content-Type': 'applic/v1_pFace/uploadFace'
	    },
	    url: `/v1_pFace/uploadFace`,
	    method: "post",
	    data: query
	  });
	}
	
	import { uploadFace } from '@/api/api' vue语法其他页面使用方式!

上传二进制数据;它告诉我们传输的数据要用到多媒体传输协议,由于多媒体传输的都是大量的数据,所以规定上传文件必须是post方法,的type属性必须是file。form里面的input的值以2进制的方式传过去,所以request就得不到值了。传输到你的servlet里是二进制数据,包括那个title,所以你用request.getParameter(“title”)是得不到值的,必须把数据再换为String的。

你可能感兴趣的:(封装api,api,vue,js)