Vue2.x -Axios请求，拦截器

版权声明：转载请标明出处。 https://blog.csdn.net/qq_42172829/article/details/83655581

不得不说不管是微信小程序还是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)
})