快捷導(dǎo)航

解析vue?3.0?使用axios庫發(fā)起?post?get?的配置過程

更新時間：2022年05月18日 10:58:33 作者：空尼機挖

get post 請求開發(fā)中最普通最常見的請求方式但是在vue中如何實現(xiàn)呢這里記錄一下配置過程，對vue?使用axios發(fā)起?post?get配置過程感興趣的朋友一起看看吧

get post 請求開發(fā)中最普通最常見的請求方式但是在vue 中如何實現(xiàn)呢這里記錄一下配置過程，

首先在src 目錄下新建 api 文件夾在文件夾下新建 request.js 請求基類

// 請求配置過程的代碼是這樣的 
import axios from "axios";
const requests = axios.create({
    // 配置對象
    baseURL: "", // 這里寫自己的域名
    timeout: 5000,
    // withCredentials: true, //異步請求攜帶Cookie  
    headers: { // 這里的參數(shù)可以根據(jù)自己的需要設(shè)置 不需要的可以不設(shè)置
        "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
})
// 響應(yīng)攔截器
requests.interceptors.response.use((resp) => {
    // 請求成功
    return resp.data
}, (error) => {
    console.log('請求失敗....................')
    return Promise.error(new Error("請求失敗"))
})
export default requests

請求基礎(chǔ)類大概就是這樣了主要是把請求的架子搭起來另外配置一些基礎(chǔ)參數(shù)

在 api 文件夾下再新建一個 http.js 文件配置get 和post 請求

// 導(dǎo)入請求的基礎(chǔ)類
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('傳遞過來的參數(shù)========' + params.phone)
        }
        return request(config)
    }
}
export default http

其實到這里我們的請求就配置好了

下面可以開始具體發(fā)起我們的請求了

根據(jù)自己需要在對應(yīng)的文件目錄下新建請求管理類這里以 index.js 舉例說明

// 導(dǎo)入請求方法類
import http from './http'
 // 定義一個獲取驗證碼的方法  params 就是自己要傳遞的參數(shù) 不需要傳參可以不傳遞
 export function getMsgCode(params) {
    return http.post("/api/sendCode", params)
}
// 再寫一個get 請求的例子  這里的參數(shù)我根據(jù)自己的需要寫  我這里為了演示直接寫這里了 最好聲明一個參數(shù)從外部傳入
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>
  // 導(dǎo)入請求 api
  import { getbilllist, getMsgCode } from '@/api'
  // 實現(xiàn)請求方法
  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 的具體請求方法就完成了

到此這篇關(guān)于vue 3.0 使用axios庫發(fā)起 post get 的配置過程的文章就介紹到這了,更多相關(guān)vue 使用axios發(fā)起 post get配置內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: