前后端數據交互作為項目最基礎需求（靜態的除外），同時也是項目中最重要的需求。

本文重點介紹axios如何配合vue搭建項目框架，而axios的詳細使用介紹請移步 使用說明

1、安裝

cnpm install axios --save-dev

2、引入

main.js 文件引入：

import Vue from 'vue'//引入vue
import axios from 'axios'//引入axios
Vue.prototype.$axios = axios;//把axios掛載到vue上

3、使用

　　　　　getStore(){
 let that = this
 that.$axios({
 method: "post",//指定請求方式
 url: "/business-app/getCityShopList.cgi",//請求接口（相對接口，后面會介紹到）
 data: {
 cityId: cityId,
 data:{},
 isDebug:"1",
 longitude: "",
 latitude: ""
 }
 })
 .then(function(res){
 //接口成功返回結果執行
 })
 .catch(function(err){
　　　　　　　　　　//請求失敗或者接口返回失敗或者.then()中的代碼發生錯誤時執行
 })
 }

4、跨域與代理

在vue本地開發時請求總是發生跨域

解決方案：配置代理

config 下的index.js 文件

proxyTable: {
 '/business-app/*': {
 target: 'http://****:8080',//被代理的接口
 
 changeOrigin: true,
 secure:true // 如果是https接口，需要配置這個參數
 }
 },

　　當URL以 '/business-app/'層級開端時，把 'http://****:8080' 代理成本地IP

5、 baseURL與代理

兩者用途不一樣，

baseUrl會附加到你綁定的axios實例（如果是全局的，那就是所有實例）上，即如果get/post的url參數是相對路徑（如） /api/c/xx，那就會執行 baseUrl + '/api/c/xx',如果未指定baseUrl，那就走瀏覽器地址欄里的base + baseUrl。

webpack里的proxyTable是測試環境為了避免瀏覽器下的跨域訪問，而以nodejs代理成同前端頁面（即瀏覽器地址欄）同域的一種處理。指定proxyTable后， axios就不需要指定baseUrl了。proxyTable會把base + '/api/c/xx'代理到【base baseUrl + '/api/c/xx'】的接口地址上。

當然工程發布時，后端和前端也需要發布到同一個域下。

6、axios與vue-axios

先看兩者的用法

Vue.prototype.$axios = axios
和
import Vueaxios from ‘vue-axios'
Vue.use(VueAxios,axios)

解釋：使用vue-axios更多是為了符合規范，并且方便協作

7、其他待補充

對于跨域的處理，除了采用代理外，也可用JSONP或者Qs（axios官方推薦）方案，待詳細研究后再來補充

總結

以上所述是小編給大家介紹的vue框架搭建之axios使用教程，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對腳本之家網站的支持！

聲明：本網頁內容旨在傳播知識，若有侵權等問題請及時與本網聯系，我們將在第一時間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com