解析vue 3.0 使用axios库发起 post get 的配置过程

解析vue 3.0 使用axios库发起 post get 的配置过程

get post 请求开发中最普通最常见的请求方式 但是在vue 中如何实现呢 这里记录一下配置过程,

首先在src 目录下新建 api 文件夹 在文件夹下新建 request.js 请求基类

// 请求配置过程的代码是这样的 import axios from "axios"; const requests = axios.create({ // 配置对象 baseURL: "", // 这里写自己的域名 timeout: 5000, // withCredentials: true, //异步请求携带Cookie headers: { // 这里的参数可以根据自己的需要设置 不需要的可以不设置 "Content-Type": "application/x-www-form-urlencoded", 'token': "", // "X-Requested-With": 'XMLHttpRequest', "App-Version": "", "Lng-Lat": "", "System-Version": "", "Mobile-Model": "", "Device": "", } }) // 配置请求拦截器 requests.interceptors.request.use((config) => { // config 配置对象 请求头 return config }) // 响应拦截器 requests.interceptors.response.use((resp) => { // 请求成功 return resp.data }, (error) => { console.log('请求失败....................') return Promise.error(new Error("请求失败")) }) export default requests

请求基础类大概就是这样了 主要是把请求的架子搭起来 另外配置一些基础参数

在 api 文件夹下再新建一个 http.js 文件 配置get 和post 请求 // 导入请求的基础类 import request from './request' const http = { 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; console.log('传递过来的参数========' + params.phone) } return request(config) } } export default http

其实到这里我们的请求就配置好了

下面可以开始具体发起我们的请求了

根据自己需要在对应的文件目录下新建请求管理类 这里以 index.js 举例说明

// 导入请求方法类 import http from './http' // 定义一个获取验证码的方法 params 就是自己要传递的参数 不需要传参可以不传递 export function getMsgCode(params) { return http.post("/api/sendCode", params) } // 再写一个get 请求的例子 这里的参数我根据自己的需要写 我这里为了演示直接写这里了 最好声明一个参数从外部传入 export function getbilllist() { return http.get("/api/bill/billList", { "household_id": "10131", "pay_status": "1", "community_id": "10", "year": "2022" }) } 请求写好了 下面看具体使用 // 在模板中声明两个点击事件 <button @click="loadData">get请求</button> <button @click="loadbilllist">post 请求</button> // 导入请求 api import { getbilllist, getMsgCode } from '@/api' // 实现请求方法 const loadData = ()=> { getbilllist().then((res) => { console.log("请求成功返回值" + res.code + res.msg); }).catch((error) => { console.log('请求失败返回值' + error) }) } const loadbilllist = () => { console.log('点击获取验证码............') getMsgCode({ params: { "phone": "13027703035" } }).then((res) => { console.log("请求成功返回值" + res.code + res.msg); }).catch((error) => { console.log('请求失败返回值' + error) }) } // 在 vue3 中需要把方法返回 return { loadData, loadbilllist }

到这里axios 的具体请求方法就完成了

到此这篇关于vue 3.0 使用axios库 发起 post get 的配置过程的文章就介绍到这了,更多相关vue 使用axios发起 post get配置内容请搜索易知道(ezd.cc)以前的文章或继续浏览下面的相关文章希望大家以后多多支持易知道(ezd.cc)!

推荐阅读

    学习写字楼新选择6000元主流配置

    学习写字楼新选择6000元主流配置,,这种配置需要考虑双核心的办公和娱乐平台,充分考虑办公室的办公需求和娱乐需求,以约6000元的预算和cost-e

    酷睿I7 配置

    酷睿I7 配置,配置,玩家国度啦华硕 Rampage II Extreme(3800元)如果米不够,也可以把Extreme改为Gene,不过是小板内存推荐金士顿6G DDR3 2000骇

    提高3A四核羿龙II游戏配置的性能

    提高3A四核羿龙II游戏配置的性能,,以节能环保为主题的IT产业,目前3A低端平台处理器、主板芯片组、独立开发卡性能突出,特别是在与AMD的处理

    opporeno8参数配置及价格

    opporeno8参数配置及价格,面部,亿元,Oppo的荣誉2020年1月4日,接近屏幕关闭传感器是否支持双卡:支持oppor11splus什么时候上市的Oppo R11S P

    查看配置:酷睿i3530集展示办公平台

    查看配置:酷睿i3530集展示办公平台,,由于时间和精力的关系,我们不可能对所有的配置进行评论,希望我们能理解,我希望我们的评论能在那些需要帮

    3500元超额值学生娱乐结构的优化配置

    3500元超额值学生娱乐结构的优化配置,,作为一个DIY的主流用户领域的学生,每个用户51学生攒机的高峰。因为学生用户没有稳定的收入来源,攒机