VUE封装http.js get\del\put\post请求（一）

概要

VUE封装http.js get\del\put\post请求

整体架构流程

安装一下qs及axios： npm install axios | npm install qs
1.在src下创建文件夹utils,创建文件http.js
2.在src下创建cs.js

创建及使用

1.http.js

import axios from 'axios'
import { MessageBox, Message } from 'element-ui'
import qs from 'qs'
// create an axios instance
//创建一个axios实例
const service = axios.create({
  baseURL:'http://localhost:8080', //要请求的地址 url = base url + request url   
  // withCredentials: true, // send cookies when cross-domain requests
  timeout: 5000 // request timeout
})


//请求方法
const http = {
    post(url, params) {
      return service.post(url, params, {
        transformRequest: [(params) => {
          return JSON.stringify(params)
        }],
        headers: {
          'Content-Type': 'application/json'
        }
      })
    },
    put(url, params) {
      console.log('put方法')
      console.log(params)
      console.log('put方法结束')
      return service.put(url, params, {
        transformRequest: [(params) => {
          return JSON.stringify(params)
        }],
        headers: {
          'Content-Type': 'application/json'
        }
      })
    },
    //parm =>  {id:10}
    // http://localhost:8089/api/user?id=10
    get(url, params) {
      console.log('请求参数')
      console.log(params)
      return service.get(url, {
        params: params,
        paramsSerializer: (params) => {
          return qs.stringify(params)
        }
      })
    },
    //parm =>  {id:10}
    // http://localhost:8089/api/user/10
    getRestApi(url, params) {
      let _params
      if (Object.is(params, undefined || null)) {
        _params = ''
      } else {
        _params = '/'
        for (const key in params) {
          console.log(key)
          console.log(params[key])
          // eslint-disable-next-line no-prototype-builtins
          if (params.hasOwnProperty(key) && params[key] !== null && params[key] !== '') {
            _params += `${params[key]}/`
          }
        }
        //去掉参数最后一位?
        _params = _params.substr(0, _params.length - 1)
      }
      console.log(_params)
      if (_params) {
        return service.get(`${url}${_params}`)
      } else {
        return service.get(url)
      }
    },
    //parm =>  {id:10}
    // http://localhost:8089/api/user/10
    delete(url, params) {
      let _params
      if (Object.is(params, undefined || null)) {
        _params = ''
      } else {
        _params = '/'
        for (const key in params) {
          // eslint-disable-next-line no-prototype-builtins
          if (params.hasOwnProperty(key) && params[key] !== null && params[key] !== '') {
            _params += `${params[key]}/`
          }
        }
        //去掉参数最后一位?
        _params = _params.substr(0, _params.length - 1)
      }
      if (_params) {
        return service.delete(`${url}${_params}`).catch(err => {
          // message.error(err.msg)
          return Promise.reject(err)
        })
      } else {
        return service.delete(url).catch(err => {
          // message.error(err.msg)
          return Promise.reject(err)
        })
      }
    },
    upload(url, params) {
      return service.post(url, params, {
        headers: {
          'Content-Type': 'multipart/form-data'
        }
      })
    }
  }
  export default http

cs.js

import http from '@/utils/http'

export const getListApi=async(parm)=>{
    return await http.get('/userApi/getList',null);
}

使用

<script>
import {getListApi} from '@/api/cs'

async getListUser(){
      let res=await getListApi();
      console.log(res);
    }

后端配置跨域

@Configuration
public class webMvcConfig implements WebMvcConfigurer {
    /**
     * 跨域配置
     * @param registry
     */
    @Override
    public void addCorsMappings(CorsRegistry registry) {
        registry.addMapping("/**")
                .allowedOriginPatterns("*")
                .allowedMethods("*")
                .allowedHeaders("*")
                .maxAge(3600)
                .allowCredentials(true);
    }
}

小结

http.js直接复制粘贴即可使用 缩略很多内容 但不影响get\post\del\put请求 仅供参考