Vue 2.0 之后官方推薦使用 axios 來完成前端的網(wǎng)絡(luò)請求，不再推薦使用 vue-resource 了。下面我們安裝使用 axios，來完成的常見的 get ，post 請求。并解決常見的跨域問題。
而axios的強(qiáng)大包括以下幾點(diǎn)：

1. 從瀏覽器中創(chuàng)建 XMLHttpRequests
2. 從 node.js 創(chuàng)建 http 請求
3. 支持 Promise API
4. 攔截請求和響應(yīng)
5. 轉(zhuǎn)換請求數(shù)據(jù)和響應(yīng)數(shù)據(jù)
6. 取消請求
7. 自動轉(zhuǎn)換 JSON 數(shù)據(jù)
8. 客戶端支持防御 XSRF

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

安裝

npm install --save axios vue-axios

安裝完成后，在你項(xiàng)目的 main.js 手動 import 進(jìn)來并且使用。

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

Vue.use(VueAxios, axiosInstance)

總結(jié)，Vue 需要用到什么插件，都要經(jīng)過先安裝，再手動導(dǎo)入，然后 調(diào)用Vue.use方法。BTW， axios 會自動將請求數(shù)據(jù)轉(zhuǎn)換成 Json 格式，如果我們傳給后臺是表單格式就要設(shè)置一下 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 這個插件,將數(shù)據(jù)轉(zhuǎn)換成 x-www-form-urlencoded 格式就是key=value&key=value 這樣子，baseURL 可以幫助你設(shè)置主 URL，方便統(tǒng)一管理。

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就是服務(wù)器的 key 了。然后用 then 來獲取成功的回調(diào)，處理 res.data 這個是后臺返回的結(jié)果，用 catch 來接受失敗的回調(diào)。

GET

 this.axios.get('/admin')
        .then(res => {
          console.log(res.data)
        })
        .catch(res => {
          console.log(res.data)
        })

Get 的時候就省略了 params 這個參數(shù)了，直接在 then 接受回調(diào)。

跨域

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

這時候需要后臺跨域，比如 java 后臺跨域創(chuàng)建 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)
    }

}

總結(jié)

axios 官方推薦，持續(xù)維護(hù)，簡單的配置就可以完成網(wǎng)絡(luò)請求，還可以配置攔截器等操作，大大提高我們開發(fā)效率。下一篇，我們會講到 Vue 的組件。