uni-app中ajax请求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 => {
	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 => {
	return Promise.reject(err)
})


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

你可能感兴趣的:(javascript,前端)