不得不說不管是微信小程式還是Web，封裝的請求使用起來確實很方便，起碼能讓程式碼看起來清晰，不那麼冗餘，不過最重要還是能少寫幾行程式碼。哈哈

1.建立Vue模板專案：進入專案下，

npm install axios

2.開啟專案進入min.js,將他們掛載到全域性中，方便使用。

import Axios from 'axios'

Vue.prototype.$Axios=Axios

3.components資料夾下，建立一個資料夾，命名utils並建立一個util.js檔案（個人習慣命名）

export function Request_get(url,params){
	return new Promise((resolv,reject)=>{
		this.$Axios.get(url,params)
		.then(res=>{
			resolv(res)
		})
		.catch(err=>{
			reject(err)
		})
	})
}

export function Request_post(url,data){
	return new Promise((resolv,reject)=>{
		this.$Axios.post(url,data)
		.then(res=>{
			resolv(res)
		})
		.catch(err=>{
			reject(err)
		})
	})	
}
 

4.進入main.js檔案將兩種請求方式掛載進全域性。如果需要restful風格介面自己也可多寫幾個，大同小異。

import {Request_get,Request_post} from '@/components/utils/util.js'

Vue.prototype.$Request_get=Request_get

Vue.prototype.$Request_post=Request_post

5.攔截器。攔截器中你可以對請求引數進行校驗，比對等一些操作。具體操作看個人需求。請求響應時也能根據API返回狀態碼對客戶端統一處理

Axios.interceptors.request.use(function(config){
	console.log("請求開始!")
	return config
},function(error){
	return Promise.reject(error)
})
Axios.interceptors.response.use(function(response){
	console.log("響應開始！")
	if(response.status!=200){
		alert("伺服器繁忙")
	}
	return response
},function(error){
	return Promise.reject(error)
})
 

6.使用一下

this.$Request_post('/api/calDistance', {petShop_context:petShop_context}).then(res => {
    console.log(res)
    console.log(res.data)
})