vue2項目使用axios發送請求

標籤：1.0   job   targe   請求   imp   資料   適用於   類型   服務   

前言：在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的原型屬性

　　Vue.prototype.$http = axios

在main.js中添加這兩行代碼之後，就能直接在組件中使用axios了

 

使用方式

this.$http.post(url,params).then(function (response) {
　　//請求成功
}).catch(function (error) {
　　//請求失敗
});

 

實際應用

假設我們需要請求的介面是：http://www.liuliangu.cn:8067/index/data/

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

在vue-cli的config檔案下面的index.js裡有一個參數叫proxyTable

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

具體配置代碼：

// 配置代理 
proxyTable: {
　　‘/api‘:{ // api為匹配項
　　　　target:‘http://www.liuliangu.cn:8067‘, // 設定代理目標
　　　　changeOrigin: true,
　　　　pathRewrite: { // 重寫路徑
　　　　　　‘^/api‘: ‘/‘
　　　　}
　　}
}

組件中請求的具體代碼：

this.$http.post(‘/api/index/data/‘, qs.stringify({
　　jobName: ‘getSiteProductAnalysis‘,
　　DateType: this.DateType
})).then(function (response) {
　　console.log(response)
}).catch(function (error) {
　　console.log(error);
});

 

注意

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

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

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

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

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

vue2項目使用axios發送請求