网络请求封装

1 npm install flyio -S
2 新建文件/util/request.js
import flyio from 'flyio'
//设置超时
flyio.config.timeout = 20000;
//设置请求基地址
flyio.config.baseURL = '***'

// 添加请求拦截器
flyio.interceptors.request.use((request) => {
// 在发送请求之前做些什么
let token = uni.getStorageSync('aliToken')
if (token) {
request.headers['token'] = token
}
return request
}, function (error) {
// 对请求错误做些什么
return Promise.reject(error)
})

flyio.interceptors.response.use((res) => {
// 对响应数据做些事
// if (!res.data) {
// return Promise.reject(res)
// }
return res
}, (error) => {
return Promise.reject(error)
})
const ajaxMethod = ['get', 'post']
const Api = {}
ajaxMethod.forEach((method) => {
Api[method] = function (uri, data, config) {
return new Promise(function (resolve, reject) {
flyio[method](uri, data, config).then((response) => {
if (response.data.StatusCode === 200) {
if (response.headers.token) {
console.log(response)
// console.log(response.headers.token)
uni.setStorageSync('aliToken', response.headers.token)
uni.setStorageSync('isFirstLogin', true)
}
resolve(response.data)
} else {
uni.showToast({
title: response.data.Message || 'fetch data error',
duration: 3000,
icon: 'none'
})
}
}).catch(function (error) {
if (error.response && error.response.status === 401) {
// 请求已发出，但服务器响应的状态码不在 2xx 范围内
let isFirstLogin = uni.getStorageSync('isFistLogin')
if (isFirstLogin) {
uni.showToast({
title: '登录信息失效',
duration: 3000,
icon: 'none'
})
}
uni.setStorageSync('updateUserInfo', '')
uni.removeStorageSync('aliToken')
// 进入首页
// console.log(error.response.data)
// console.log(error.response.status)
// console.log(error.response.headers)
} else {
console.log(error)
// Something happened in setting up the request that triggered an Error
// console.log('Error', error.message)
}
// console.log(error.config)
})
})
}
})

export default Api

3 挂载到vue实例 （main.js）
import Api from './util/request.js'
Vue.prototype.$flyio = Api

4 调用
this.$flyio.get(urls.userInfo).then((res) => {
console.log(res)
uni.showToast({
title: '获取信息成功',
icon: 'success'
})
})

5 说明
登录成功，返回信息包含token，之后的请求需要将token设置到request的headers中，每个请求请求成功后需要获取response中的token并更新token的值；后端需要放开option请求；