vue项目,http封装请求，封装公共的api和调用请求的过程 |
您所在的位置：网站首页 › 水陆两栖飞机起飞视频 › 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 http2.正式封装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 特别鸣谢！！！ |
今日新闻 |
点击排行 |
|
推荐新闻 |
图片新闻 |
|
专题文章 |
| CopyRight 2018-2019 实验室设备网 版权所有 win10的实时保护怎么永久关闭 |