vue 常见问题积攒
一、vue中使用async/await
把 ES2015 语法转为 ECMAScript 5 语法
npm i babel-plugin-transform-runtime --save-dev
npm i babel-runtime --save
在项目根目录下有个.babelrc文件，增加一句代码：
"plugins":["transform-runtime"]
二、vue中配置跨域
config 中的index.js 文件
proxyTable: {
'/api': {
target: 'http://******.com', //源地址
changeOrigin: true, //是否跨域
pathRewrite: {
'^/api': 'http://******.com' //路径重写
}
}
},
三、vue中封装axios
新建文件request.js
import axios from 'axios'
// 创建axios实例
const service = axios.create({
baseURL: 'http://192.168.2.100:7777', //设置默认请求地址
timeout: 50000, // 请求超时时间
})
service.interceptors.request.use(config => {
config.headers = {
'Content-Type':'application/x-www-form-urlencoded',
}
config.params.token = global_.user.Token // 接口默认传参
config.params.lang = global_.lang // 接口默认传参-----有什么默认的蚕食都可以写在这
return config
})
service.interceptors.response.use(
response => {
const res = response.data
if (!res.Success) { //请求不成功的处理写在这里
if (res.ResultCode == "100"||res.ResultCode == "800") {
处理异常状态
}
}
return response.data;
},error => {
//请求异常处理，比如断网，请求状态500等，或者重新发起请求
var config = error.config
if (!error.response) {
console.log('断网了', error)
}
if (error.response.status === 404) {
console.log('异常', 404)
}
if (error.response.status === 401) {
console.log('异常', 401)
}
if (error.response.status === 500) {
var back = new Promise(function(resolve) {
setTimeout(function() {
resolve();
}, config.retryInterval|| 1);
});
//返回axios的实体，重试请求
return back.then(function() {
return service(config);
});
}
return Promise.resolve(error.response)
})
export default service
这样调用
function apiSetDefaultcoin(params) {
return request({
url:'/api/account/defaultcoin', //接口地址
method:'POST',
params
})
}