在Vue项目中使用Axios来进行网络请求是很常见的,如果我们每次都直接调用axios的API来进行请求的话,不仅代码重复度高,而且还会影响代码的可维护性。因此,我们可以通过封装一个Axios请求的工具类,来优化我们的代码。
以下是使用Vue2.x版本进行Axios请求封装的详细步骤及代码:
1. 安装Axios
在开始之前,我们需要先安装和引入Axios,这里我们可以通过npm或yarn来进行安装。在项目中统一引入Axios,建议在main.js中进行引入:
import axios from 'axios'
Vue.prototype.axios = axios
2. 封装请求工具类
在src目录下新建network文件夹,并在其中新建request.js文件,用来封装Axios请求的工具类。具体代码如下:
import axios from 'axios'
axios.defaults.baseURL = 'api' // 配置请求的根路径
export default function request (options) {
return new Promise((resolve, reject) => {
const instance = axios.create({
baseURL: options.baseURL || '',
headers: options.headers || {},
timeout: options.timeout || 60000
})
instance(options)
.then(response => {
resolve(response.data)
})
.catch(error => {
reject(error)
})
})
}
以上代码我们封装了一个request函数,它接收一个参数options,options是一个对象,包含以下属性:
url
:请求的URL地址method
:请求的方法,例如get、post等data
:请求的数据headers
:请求头信息timeout
:超时时间
该函数内部使用了Axios的create方法创建一个axios实例,并配置基础URL、请求头和超时时间等。然后通过实例调用Axios的API,最终返回一个Promise对象,实现了异步请求的目的。
3. 在Vue组件中使用封装工具类进行请求
在Vue组件中使用上述封装的工具类进行请求非常简单,如下所示:
import request from '@/network/request.js'
export default {
methods: {
handleRequest () {
request({
url: '/product',
method: 'get'
}).then(res => {
console.log(res)
}).catch(err => {
console.log(err)
})
}
}
}
在Vue组件中导入我们封装的request函数,并在需要的方法中调用即可。
以上就是在Vue项目中封装Axios的请求工具类的详细说明及代码。
同时对于请求的过滤和拦截等处理,也可以进行深度的定制和扩展
扩展
好的,以下是针对Vue项目中封装Axios请求的详细说明和代码,包括请求过滤和响应拦截的使用:
1. 请求过滤
请求过滤指的是在发送请求之前对请求进行一些处理,例如在请求头中添加一些通用信息,或者对请求参数进行加密等。在Vue项目中使用Axios进行请求过滤,可以通过在请求拦截器中来处理。以下是一个请求拦截器的示例代码:
import axios from 'axios'
axios.interceptors.request.use(
function(config) {
// 在请求发出之前进行处理
config.headers.Authorization = 'Bearer ' + getToken()
return config
},
function(error) {
// 对请求错误做些什么
return Promise.reject(error)
}
)
在以上代码中,我们使用了Axios的interceptors属性,通过request.use方法来注册了一个请求拦截器。在拦截器的回调函数中,我们可以对请求配置进行修改,并返回一个新的配置对象来实现请求过滤。在该示例中,我们对请求的头信息添加了一个Authorization属性,并通过函数getToken()来获取对应的token信息。
2. 响应拦截
响应拦截指的是在接收到服务器响应之后对响应进行一些处理,例如进行数据解密、对响应进行统一的处理等。在Vue项目中使用Axios进行响应拦截,可以通过在响应拦截器中来处理。以下是一个响应拦截器的示例代码:
import axios from 'axios'
axios.interceptors.response.use(
function(response) {
// 对响应数据做些事情
return response.data
},
function(error) {
// 对请求错误做些事情
return Promise.reject(error)
}
)
在以上代码中,我们同样使用了Axios的interceptors属性,通过response.use方法来注册了一个响应拦截器。在拦截器的回调函数中,我们可以对响应数据进行处理,并返回一个新的数据来实现响应拦截。在该示例中,我们简单地将响应数据中的data属性返回,以获得响应的数据信息。
3. 使用封装的Axios请求
在对Axios进行请求过滤和响应拦截的代码封装完成之后,我们就可以将其应用于Vue项目中使用。以下是一个使用封装的Axios请求的示例代码:
import axios from 'axios'
const instance = axios.create({
baseURL: 'https://api.example.com',
timeout: 5000
})
instance.interceptors.request.use(
function(config) {
// 在请求发出之前进行处理
config.headers.Authorization = 'Bearer ' + getToken()
return config
},
function(error) {
// 对请求错误做些什么
return Promise.reject(error)
}
)
instance.interceptors.response.use(
function(response) {
// 对响应数据做些事情
return response.data
},
function(error) {
// 对请求错误做些事情
return Promise.reject(error)
}
)
export default {
get: function(url, params) {
return instance.get(url, {
params: params
})
},
post: function(url, data) {
return instance.post(url, data)
},
upload: function(url, formData) {
return instance.post(url, formData, {
headers: {
'Content-Type': 'multipart/form-data'
}
})
}
}
在以上代码中,我们首先使用Axios的create方法创建了一个实例instance,并在该实例中配置了请求的基础URL和超时时间。接着,我们通过instance的interceptors属性来注册了请求和响应的拦截器,并在拦截器函数中进行相应的处理。最后,我们通过导出一个对象来对包括GET、POST和上传文件等请求进行了封装,使得请求的调用变得十分简洁和方便。
至此,我们已经完成了在Vue项目中封装Axios请求的代码,同时加入了请求过滤和响应拦截的处理,使得请求更加安全和可靠。