Vue 入門之網路請求

ppjunSpirit發表於2018-07-06
Vue

Vue 2.0 之後官方推薦使用 axios 來完成前端的網路請求，不再推薦使用 vue-resource 了。下面我們安裝使用 axios，來完成的常見的 get ，post 請求。並解決常見的跨域問題。 而axios的強大包括以下幾點：

  1. 從瀏覽器中建立 XMLHttpRequests
  2. 從 node.js 建立 http 請求
  3. 支援 Promise API
  4. 攔截請求和響應
  5. 轉換請求資料和響應資料
  6. 取消請求
  7. 自動轉換 JSON 資料
  8. 客戶端支援防禦 XSRF

若有不當之處，請閣下大膽斧正，小弟我大恩不言謝。

安裝

npm install --save axios vue-axios
複製程式碼

安裝完成後，在你專案的 main.js 手動 import 進來並且使用。

import axios from 'axios'
import VueAxios from 'vue-axios'

Vue.use(VueAxios, axiosInstance)
複製程式碼

總結，Vue 需要用到什麼外掛，都要經過先安裝，再手動匯入，然後 呼叫Vue.use方法。BTW， axios 會自動將請求資料轉換成 Json 格式，如果我們傳給後臺是表單格式就要設定一下 Content-Type 。

import Qs from 'qs'

var axiosInstance = axios.create({
  baseURL: location.protocol + '//127.0.0.1:8081/',
  transformRequest: function (data) {
    return Qs.stringify(data)
  },
  headers: { 'Content-Type': 'application/x-www-form-urlencoded' }
})

Vue.use(VueAxios, axiosInstance)
複製程式碼

這裡主要用到 qs 這個外掛,將資料轉換成 x-www-form-urlencoded 格式就是key=value&key=value 這樣子，baseURL 可以幫助你設定主 URL，方便統一管理。

POST

 this.axios.post('admin/login', {
          'user_name': 'admin',
          'user_pwd': 'admin'
        }).then(res => {
          //res.data do something right
        }).catch(res => {
          //do something wrong
        })
複製程式碼

這裡只要傳入url ，params ，這裡的user_name就是伺服器的 key 了。然後用 then 來獲取成功的回撥，處理 res.data 這個是後臺返回的結果，用 catch 來接受失敗的回撥。

GET

 this.axios.get('/admin')
        .then(res => {
          console.log(res.data)
        })
        .catch(res => {
          console.log(res.data)
        })
複製程式碼

Get 的時候就省略了 params 這個引數了，直接在 then 接受回撥。

跨域

當前端直接訪問其他地址時，就會出現 Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the request rsource.這個錯誤。

這時候需要後臺跨域，比如 java 後臺跨域建立 CrossFiledConfig 類完成跨域。

@Configuration
class CrossFiledConfig:WebMvcConfigurerAdapter() {


    override fun addCorsMappings(registry: CorsRegistry) {
        super.addCorsMappings(registry)
        registry.addMapping("/**")
                .allowedOrigins("*")
                .allowCredentials(true)
                .allowedMethods("GET","POST","DELETE","PUT")
                .maxAge(3600)
    }

}
複製程式碼

總結

axios 官方推薦，持續維護，簡單的配置就可以完成網路請求，還可以配置攔截器等操作，大大提高我們開發效率。下一篇，我們會講到 Vue 的元件。

相關文章