公司项目要求用H5写 作为一个iOS菜鸟搞起来啊,首先是搭建项目框架,项目框架直接用vue-cli搭建好,接下来是网络请求的封装,之前写过一个小项目网络请求用的vue-resource 后来看到尤雨溪大神推荐用Axios 再网上看了很多网络请求的封装,都不是很满意,最后总结了一下封装了一个网络请求
首先创建一个网络请求的Js文件
// 引入axios
import axios from 'axios'
// 这里是我在token过期的情况 调用原生的登录方法
var jsbridge = require('../../static/js/jsbridge.js')
var Rxports = {
ajax: function (opt) {
var opts = opt || {}
if (!opts.url) {
return false
}
var token = sessionStorage.getItem('token')
axios({
// 请求方式
method: opts.type || 'post',
// 请求url
url: opts.url,
// 请求参数
params: opts.data || {},
// 请求头
headers: opts.headers || {
'Content-Type': 'application/json',
'X-Requested-With': 'XMLHttpRequest',
'source': 'ios',
'token': token
},
// 请求超时时间
timeout: opts.time || 10 * 1000,
responseType: opts.dataType || 'json'
}).then(function (res) {
// 下面的是根据业务需求做的处理
if (res.data.code === 'ACK') {
if (opts.success) {
opts.success(res.data.data, res)
} else {
opts.error('网络请求错误,请稍后再试', res)
}
} else if (res.data.code === 'BUSINESS_ERROR') {
if (opts.error) {
opts.error(res.data.message, res)
} else {
opts.error('网络请求错误,请稍后再试', res)
}
} else if (res.data.code === 'NACK') {
if (opts.error) {
opts.error(res.data.message, res)
} else {
opts.error('网络请求错误,请稍后再试', res)
}
}
}).catch(function (error) {
// token过期的情况调用原生方法
if (error.response.data.code === 'UNAUTHORIZED') {
jsbridge.setupWebViewJavascriptBridge(function (bridge) {
bridge.callHandler('goLogin', function (response) {
})
})
sessionStorage.removeItem('token')
} else {
if (opts.error) {
opts.error(error, error)
} else {
opts.error('网络请求错误,请稍后再试', error)
}
}
})
}
}
export default Rxports
最后使用方法
import api from '../fetch/api'
api.ajax({
'type': 'post',
'url': '', // 请求url
'params': {
// 请求参数
},
'success': function (data) {
// 请求成功处理
},
'error': function (error) {
// 错误原因提示
Toast(error)
}
})
这么看起来,也是挺简单的