axios我们都使用过,怎么在uni-app中使用呢
uni-app的官网提供了 uni.request
作为请求网络的API,但是我们如果习惯了使用axios,那就要在uni-app中引入了
首先,在项目中引入 axios的包是必不可少的 npm install
安装即可
然后在工具包中新建一个request.js
的文件,用来封装我们的axios
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88
| import axios from 'axios'
// 创建axios实例 const service = axios.create({ baseURL: process.env.BASE_API, // api 的 base_url timeout: 60000 // 请求超时时间 }) // request拦截器 service.interceptors.request.use((config) => { try{ config.data = JSON.parse(config.data) }catch(e){ //TODO handle the exception } return config }, (error) => { Promise.reject(error) } )
// response 拦截器 service.interceptors.response.use( (response) => { return new Promise((resolve, reject) => { const res = response.data // 正常数据返回 resolve(response.data) }) }, (error) => { if (error && error.response) { switch (error.response.status) { case 400: errorObj.message = '(c1400)' ; break; // 请求错误 case 401: errorObj.message = '(c1401)'; break; // 未授权 case 403: errorObj.message = '(c1403)'; break; // 拒绝访问 case 404: errorObj.message = '(c1404)'; break; // 请求出错 case 408: errorObj.message = '(c1408)'; break; // 请求超时 case 500: errorObj.message = '(c1500)'; break; // 服务器错误 case 501: errorObj.message = '(c1501)'; break; // 服务未实现 case 502: errorObj.message = '(c1502)'; break; // 网络错误 case 503: errorObj.message = '(c1503)'; break; // 服务不可用 case 504: errorObj.message = '(c1504)'; break; // 网络超时 case 505: errorObj.message = '(c1505)'; break; // HTTP版本不受支持 default: errorObj.message = `连接出错(${error.response.status})!` // 连接出错 } }else{ errorObj.message = '(c3289)' } uni.hideToast(); uni.showToast({ title: '网络繁忙,请稍后再试', duration: 2000, icon: 'none' }); Promise.reject(error) return errorObj } ) //用来适配uniapp的语法 axios.defaults.adapter = function(config) { return new Promise((resolve, reject) => { var settle = require('axios/lib/core/settle'); var buildURL = require('axios/lib/helpers/buildURL'); uni.request({ method: config.method.toUpperCase(), url: buildURL(config.url, config.params, config.paramsSerializer), // url: config.baseURL + buildURL(config.url, config.params, config.paramsSerializer), header: config.headers, data: config.data, dataType: config.dataType, responseType: config.responseType, sslVerify: config.sslVerify, complete: function complete(response) { response = { data: response.data, status: response.statusCode, errMsg: response.errMsg, header: response.header, config: config }; settle(resolve, reject, response); } }) }) }
export default service
|
踩坑! ! ! 一开始以为和vue一样使用,直接引入axios后,就可以开始请求接口,接口一直报错,百度后找到了解决办法
其实看上半部分,和vue中配置的很像,但是最重要的就是下面那个用来适配uniapp的语法的函数
然后把文件在main.js
中引入
1 2
| import axios from './common/request.js' Vue.prototype.$axios = axios;
|
页面中就可以开始使用啦
1 2 3 4 5
| this.$axios.request({ url: https://xxx.com, method: 'POST', data: {} }).then(response => {});
|
以上就是我对uni-app配置axios的一些理解,如果文章由于我学识浅薄,导致您发现有严重谬误的地方,请一定在评论中指出,我会在第一时间修正我的博文,以避免误人子弟。