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 @click="loadbilllist">post 请求

// 导入请求 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 的具体请求方法就完成了

原文：https://juejin.cn/post/7098633675033542663