uniapp使⽤axios处理请求
uniapp可以使⽤原⽣的请求⽅式，quest()，但涉及到请求或者响应拦截可能需要⾃⼰动⼿去写，因此这⾥使⽤axios去处理uniapp的⽹络请求
引⼊axios
npm install axios --save
创建axios实例
util/request.js
//封装axios请求
import Vue from 'vue'
import axios from 'axios'
import store from '@/store'
// console.log('token----------------------------->',ken)
// create an axios instance
const service = ate({
// baseURL:'3333',
// withCredentials: true, //允许跨域携带cookie
// send cookies when cross-domain requests 注意：withCredentials和后端配置的cross跨域不可同时使⽤
timeout: 6000, // request timeout
async: true,
crossDomain: true
})
// request，在请求之前做⼀些处理
quest.use(
config => {
if (ken) {
// 给请求头添加user-token
config.headers["Authorization"] = 'Bearer ' + ken;
}
// console.log('请求拦截成功')
//针对媒体类型数据进⾏特殊处理
if (hod === 'formdata') {
config.headers['Content-Type'] = 'multipart/form-data';
}
/
/ console.log('请求config------------------',config)
return config;
},
error => {
// console.log('请求错误-------------', error); // for debug
ject(error);
}
);
//配置成功后的
sponse.use(res => {
// console.log('响应res---------------', res)
/
/res.data.status== 200
if (de == 0 || de == 0) {
return res.data
} else {
ject(res.data.msg);
}
}, error => {
// console.log('响应错误--------------', error)
if (sponse.status) {
switch (sponse.status) {
case 401:
break;
default:
break;
}
}
ject(error)
})
// 在main.js中放⼊这段⾃定义适配器的代码，就可以实现uniapp的app和⼩程序开发中能使⽤axios进⾏跨域⽹络请求，并⽀持携带cookie
axios.defaults.adapter = function(config) {
return new Promise((resolve, reject) => {
// console.log('axios⾃定义适配器-------------',config)
var settle = require('axios/lib/core/settle');
var buildURL = require('axios/lib/helpers/buildURL');
//当baseURL为undefined时，不让⼩程序端前缀加上baseURL
const baseURL= config.baseURL?config.baseURL:'';
// console.log('config.baseURL--------------',config.baseURL),
// console.log('buildURL(config.url, config.params, config.paramsSerializer)',buildURL(config.url, config.params, config.paramsSerializer))  quest({
method: UpperCase(),
url: baseURL + buildURL(config.url, config.params, config.paramsSerializer),
header: config.headers,
data: config.data,
dataType: config.dataType,
responseType: sponseType,
sslVerify: config.sslVerify,
complete: function complete(response) {
// console.log("执⾏完成：", response)
response = {
data: response.data,
status: response.statusCode,
errMsg: Msg,
header: response.header,
config: config
};
settle(resolve, reject, response)
}
})
})
}
export default service
注：当没有配置axios的baseURL时，在⼩程序端会发⽣请求错误
出错原因：
//没有配置axios的baseURL时，⼩程序端会在每个请求前加上undifined
url: config.baseURL + buildURL(config.url, config.params, config.paramsSerializer),
解决⽅式：
const baseURL= config.baseURL?config.baseURL:'';
...
url: baseURL + buildURL(config.url, config.params, config.paramsSerializer),
请求中使⽤axios实例
api/policy/policy.js
import service from '@/util/request'
import {
policy
} from '@/api/url'
export const addPolicy = data => {
return service({
url: `${policy}/insure/insure/addInsure`,
method: 'POST',
data
})
图片编辑器app}
//车型列表查询
export const getCarList = data => {
return service({
url: `${policy}/insure/insureAsset/searchInsureAssetListPage`,
method: 'POST',
data
})
}
//资产关联属性查询
export const getAssetAndAttributeList = data =>{
return service({
url:`${policy}/insure/insureAsset/searchAssetAndAttributeListPage`,
method: 'POST',
data
})
}
ps: api/url.js存放api的基路径
/
/配置api的URL
const env = v.NODE_ENV
//website-pm-private.solarmanpv/oauth_dk
export const login = env === 'production'?'10.168.30.31:33005':'192.168.30.97:33005'
export const policy = env ==='production'?'192.168.30.97:50001':'192.168.30.97:50001' export const message = env ==='prodction'?'':''