vue框架搭建之a(chǎn)xios使用教程

前后端數(shù)據(jù)交互作為項(xiàng)目最基礎(chǔ)需求（靜態(tài)的除外），同時(shí)也是項(xiàng)目中最重要的需求。

本文重點(diǎn)介紹axios如何配合vue搭建項(xiàng)目框架，而axios的詳細(xì)使用介紹請(qǐng)移步 使用說明

1、安裝

cnpm install axios --save-dev

2、引入

main.js 文件引入：

import Vue from 'vue'//引入vue
import axios from 'axios'//引入axios
Vue.prototype.$axios = axios;//把a(bǔ)xios掛載到vue上

3、使用

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

4、跨域與代理

在vue本地開發(fā)時(shí)請(qǐng)求總是發(fā)生跨域

解決方案：配置代理

config 下的index.js 文件

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

　　當(dāng)URL以 '/business-app/'層級(jí)開端時(shí)，把 'http://****:8080' 代理成本地IP

5、 baseURL與代理

兩者用途不一樣，

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

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

當(dāng)然工程發(fā)布時(shí)，后端和前端也需要發(fā)布到同一個(gè)域下。

6、axios與vue-axios

先看兩者的用法

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

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

7、其他待補(bǔ)充

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

總結(jié)

以上所述是小編給大家介紹的vue框架搭建之a(chǎn)xios使用教程，希望對(duì)大家有所幫助，如果大家有任何疑問請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)億速云網(wǎng)站的支持！