编程宝库 - 技术改变世界

编程宝库

JS编程技术

解析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 的具体请求方法就完成了

关于vue3.0使用axios库发起postget的配置过程的文章就介绍至此，更多相关vue使用axios发起postget配置内容请搜索编程宝库以前的文章，希望以后支持编程宝库！