vue2專案使用axios傳送請求

2022-09-13 21:21:28 字數 1286 閱讀 9940

前言:在vue1.0的時候有乙個官方推薦的 ajax 外掛程式 vue-resource,但是自從 vue 更新到 2.0 之後,官方就不再更新 vue-resource。

目前主流的 vue 專案,都選擇 axios 來完成 ajax 請求,下面來具體介紹一下axios的使用。

專案中安裝axios

cnpm install axios -s

每個需要請求的元件中都需要引入axios,如果覺得麻煩,可以axios改寫成vue的原型屬性,在使用的時候,就不需要每個元件都去引用。

將axios改寫成vue的原型屬性

1、在main.js中引入axios

import axios from 'axios'

2、寫成vue的原型屬性

在main.js中新增這兩行**之後,就能直接在元件中使用axios了

使用方式

實際應用

假設我們需要請求的介面是:

如果是開發環境,我們請求的介面如果存在跨域問題,需要配置**

在vue-cli的config檔案下面的index.js裡有乙個引數叫proxytable

配置proxytable的時候本地會虛擬乙個服務端接收你的請求並代你傳送該請求,這樣就不會有跨域問題了,當然這只適用於開發環境。

具體配置**:

// 配置**

proxytable: }}

元件中請求的具體**:

注意

在vue2中使用axios,我們請求的引數仍為json型別,是並沒有序列化的。我們需要使用querystring解決該問題

需要先引入  import qs from 'qs';

傳入引數的時候轉下格式,qs.stringify(data)

這樣,我們就能正常請求訪問到資料了。

生成環境下,生產**應該使用npm run build然後把dist放到nginx伺服器上,在nginx上配置**位址。

基於requirejs的vue2專案 三

這裡是打包篇 使用的是requirejs的r.js進行打包 思路是,通過entrance.js裡面的require.config進行專案的初打包 因為router.js和store.js裡面的引用是動態生成的,所以r.js無法對其進行處理,這裡我們用到了nodejs來進行檔案整合 具體看 node2...

基於requirejs的vue2專案 一

專案截圖 專案演示位址 該專案主要是解決 如何讓不了解前端構建,並負責大部分業務邏輯的後端 開發出 乙個單頁應用 覺得有用請給個推薦,謝謝 最近做了一次小更新,配置檔案可以配置模組是否非同步載入以及是否關聯store 公司推進手機端專案,但目前開發模式依舊是後端渲染為主,後端開發對前端的自動化打包與...

Vue2專案架構搭建(九) 打包專案

vue開發的東西基礎架構已經搭建完成,還有很多關聯的外掛程式,具體等以後用到再補充,最後就是專案打包。vue cli已經配置好打包工具,只需要我們在當前專案下build就好,連續兩次ctrl c 退出服務啟動,執行 npm run bulid下圖顯示完成打包和生成的檔案目錄 打包完成後,專案目錄會自...