解析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配置内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！