uni-app中ajax请求uni-request封装

本文介绍: 我们知道在VUE框架，用axios进行请求是非常方便的，在uni–app用uni–request有异曲同工之妙

第一步： npm i uni–request -S
uni–app 目录中默认是没有 package.json 文件，我们 需要 通过 npm init进行生成，生成之后就可以 执行上面的命令

第二步：

import uniRequest from 'uni-request'

uniRequest.defaults.baseURL = '这里输入请求的网址'
uniRequest.defaults.headers['X-Requested-With'] = 'XMLHttpRequest'
uniRequest.timeout = 1000 * 60 //这里设置超时

/* 下面就是对请求进行拦截，设置token
在拦截时，对请求加入了一个时间参数t,加入这个参数的目的就是防止从缓存直接读取，因为每一次请求t参数的值都是不一样的 */
uniRequest.interceptors.request.use(request =&gt; {
	let token = uni.getStorageSync('token') || ''
	if (token) {
	  request.headers['token'] = token
	}
	request.headers['Content-Type'] = 'application/json; charset=utf-8'
	if (request.method == 'post') {
	    request.data = {
	      ...request.data,
	      t: new Date().getTime()  
	    }
	  } else if (request.method == 'get') {
	    request.params = {
	      ...request.params,
	      t: new Date().getTime()
	    }
	  }
	return request
}, err =&gt; {
	return Promise.reject(err)
})


/* 对响应的结果进行处理，根据具体情况封装*/
uniRequest.interceptors.response.use( response => {
	if (response.data &amp;&amp; response.data.code === 500 &amp;&amp; response.data.msg !== "手机号未注册") {
		uni.showToast({
			icon: 'error',
			title: response.data.msg,
			duration: 2000
		})
	}
	if (response.data &amp;&amp; response.data.code === 401) {
	  uni.reLaunch({
	  	url: '@/pages/login/login'
	  })
	}
	return response
}, error => {
	if (error.response &amp;&amp; error.response.data &amp;&amp; error.response.data.msg) {
		uni.showToast({
			icon: 'error',
			title: error.response.data.msg,
			duration: 2000
		})
	  }
	return Promise.reject(error)
})

function doRequest(method, {url, params = {}, data={}, headers={}}) {
	return uniRequest({
		url,
		method,
		data,
		params,
		headers
	})
} 

/* 这里只对get post 请求进行，还有其它的，根据具体情况自己可以加的
这样处理完成之后，get,post请求其实形式上是完全一致的, 都是 get | post (url， 参数)*/
const post = (url,data = {}) => doRequest('POST', {url, params: {}, data, headers: {}})
const get = (url, params = {}) => doRequest('GET', {url, params, data: {}, headers: {}})


export default {
	post,
	get
}