解析vue|解析vue 3.0 使用axios库发起 post get 的配置过程解析vue3.0使用axios库发起postg

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

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

// 请求配置过程的代码是这样的 import axios from "axios"; const requests = axios.create({// 配置对象baseURL: "", // 这里写自己的域名timeout: 5000,// withCredentials: true, //异步请求携带Cookieheaders: { // 这里的参数可以根据自己的需要设置不需要的可以不设置"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 = https://www.it610.com/article/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" })}

请求写好了下面看具体使用

// 在模板中声明两个点击事件// 导入请求 apiimport { getbilllist, getMsgCode } from '@/api'// 实现请求方法const loadData = https://www.it610.com/article/()=> {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}

【解析vue|解析vue 3.0 使用axios库发起 post get 的配置过程】到这里axios 的具体请求方法就完成了
到此这篇关于vue 3.0 使用axios库发起 post get 的配置过程的文章就介绍到这了,更多相关vue 使用axios发起 post get配置内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！