vue项目,http封装请求，封装公共的api和调用请求的过程

vue项目,http封装请求，封装公共的api和调用请求的过程

1.封装请求——http.js
在项目src目录下的utils文件夹中新建 http.js文件，这个文件是主要书写几种请求的封装过程。

/****   http.js   ****/
// 导入封装好的axios实例
import request from './request'

const http ={
    /**
     * methods: 请求
     * @param url 请求地址 
     * @param params 请求参数
     */
    get(url,params){
        const config = {
            method: 'get',
            url:url
        }
        if(params) config.params = params
        return request(config)
    },
    post(url,params){
        const config = {
            method: 'post',
            url:url
        }
        if(params) config.data = params
        return request(config)
    },
    put(url,params){
        const config = {
            method: 'put',
            url:url
        }
        if(params) config.params = params
        return request(config)
    },
    delete(url,params){
        const config = {
            method: 'delete',
            url:url
        }
        if(params) config.params = params
        return request(config)
    }
}
//导出
export default http

2.正式封装API，用于发送请求——api.js

在项目src目录下新建api文件夹，然后在其中新建 api.js文件，这个文件是主要书写API的封装过程。

分类导出

import http from '../utils/http'
// 
/**
 *  @parms resquest 请求地址 例如：http://197.82.15.15:8088/request/...
 *  @param '/testIp'代表vue-cil中config，index.js中配置的代理
 */
//let resquest = "/testIp/request/"
let resquest = "http://197.82.15.15:8088"
let url = "api接口地址" // 如“/getUser”

// get请求
export function getListAPI(params){
    return http.get(`${resquest}${url}`,params)
}
// post请求
export function postFormAPI(params){
    return http.post(`${resquest}${url}`,params)
}
// put 请求
export function putSomeAPI(params){
    return http.put(`${resquest}${url}`,params)
}
// delete 请求
export function deleteListAPI(params){
    return http.delete(`${resquest}${url}`,params)
}

3.在vue文件中调用
用到哪个api 就调用哪个接口——适用于上文接口分类导出；

特别说明：
参数是对象形式！！！
参数是对象形式！！！
参数是对象形式！！！

import {getListAPI,postFormAPI, putSomeAPI, deleteListAPI} from '@/api/api'

  methods: {
      //promise调用，链式调用， getList()括号内只接受参数；
      // get不传参
      getList() {
        getListAPI().then(res => console.log(res)).catch(err => console.log(err))
      },
		//post传参
      postForm(formData) {
        let data = formData
        postFormAPI(data).then(res => console.log(res)).catch(err => console.log(err))
      },

      //async await同步调用
      async postForm(formData) {
        const postRes = await postFormAPI(formData)
        const putRes = await putSomeAPI({data: 'putTest'})
        const deleteRes = await deleteListAPI(formData.name)
        // 数据处理
        console.log(postRes);
        console.log(putRes);
        console.log(deleteRes);
      },
   }

4.get请求 参数不是对象形式

// 导入封装好的axios实例 自己的request位置
import request from './request'
// get请求
export function getListAPI(params){
    return request({
    url: '/接口地址/' + params,
    method: 'get'
  })
}

另外，说明
export function listForPage(query) {
  return request({
    url: '/接口地址',
    method: 'get',
    params: query
  })
}
注意: query是对象

后端参数接收:
dto不可加@RequestBody 直接对象接收
vo可加@RequestBody 直接对象接收

主要参考：https://blog.csdn.net/weixin_43216105/article/details/98877960?utm_medium=distribute.pc_relevant.none-task-blog-2%7Edefault%7EBlogCommendFromMachineLearnPai2%7Edefault-1.control&dist_request_id=1331303.9658.16182950730741437&depth_1-utm_source=distribute.pc_relevant.none-task-blog-2%7Edefault%7EBlogCommendFromMachineLearnPai2%7Edefault-1.control
特别鸣谢！！！