uniapp 使用 axios 请求 uniapp可以用axios吗

前端面试时，我们很容易被面试官询问到封装过请求吗？

当然，如果是高手，那么以下的文章你就可以不用查看了。但是，如果你是新手前端，我还是建议你往下看。

请求封装真的不难，难的是根据你们项目那些特定的状态code进行分别处理。

在下面的文章中，我只简单的对请求进行拦截处理，实际处理还需按你们项目的需求进行处理即可。

如果是，vue或者react框架等项目，我们通常使用axios进行发送请求，axios的请求拦截封装可以看如下文章：对axios请求进行封装，设置请求拦截和响应拦截。

 

 

如果是uniapp项目时，由于其自带了uni.request这个API，我们可以直接通过uni.request进行发送请求。如下代码调用ip所示。

uni.request({
	url:'http://api.90focus.top/api/ip',
	success(res) {
	console.log(res)
	}
})

但是，如果我们就这样调用请求的话，我们得到的返回信息就有点杂乱了，例如：获取到后端返回 的信息后，我们需要 res.data.data 这样获取数据。虽然不影响我们获取关键的data信息。但是，如果我们每天调接口时，都看到这杂乱的信息，我相信心情一般都不太好。

 

如果我们发送请求时，我们直接看到的信息只是data数据，那么该多好啊。于是，对请求进行拦截封装就有必要了。因为如上所说的，uniapp有自己的请求API。所以，我们只需对其外面套一层Promise即可。

封装的拦截js代码如下。

//fetch.js

const BaseUrl = 'http://api.90focus.top/'  //设置基本的url路径

export default ({ //对页面穿过来的参数进行解构
	url,
	method,
	data,
	header
}) => {
	return new Promise(function(resolve, reject) {
		uni.request({
			url: BaseUrl + url,  // 开发者服务器接口地址
			method: method,   
			timeout: 60000, //请求超时时间
			dataType: "json", 
			responseType: 'text',
			data: data,  //请求的参数
			withCredentials:true,
			header: {  //设置请求的 header
				'x-token':'15315345646',//自定义请求头信息
			},
			success(res) {//对请求请求到的信息进行处理
				console.log(res)
				if (res.data.code == 0) {
					resolve(res.data.data)
				}
			},
			fail(err) {
				reject(err)
			}
		})
	})
}

在需要发送请求的页面中导入fetch.js。如下所示：

 下图的第一个框中是服务器返回的信息，第二个框中就是我们拦截后的信息，是不是很直观勒？

 ok，uniapp的请求拦截的简单封装就完成了。

如果是请求时遇到跨域，那么，你还需要设置代理跨域。通常的方法有Nginx、proxy、Jsonp等。

注意：proxy的代理跨域只对本地有效，项目上线后该怎么报错还会怎么报错。

跨域问题的产生的原因：浏览器的同源策略，因为存在跨域问题的只有浏览器，但是我们又不能不用到浏览器，所以我们只需使用一种后端方式进行代理跨域即可。这里：我推荐大家使用uni云函数进行代理跨域，uni云函数的跨域方法可以看这篇文章：实现代理跨域方法：通过uni云函数实现跨域。或者你们去官网学习也可以。