先为上一篇的错误道歉,虽然不影响大局,但还是有一些bug还是很不好的。在我看了阮一峰es6教学之promise和axios中文说明后,修改得到感觉比较满意的axios.ts。Typescript可以参考typescript中文文档。
- axios.ts
import axios from 'axios'
import { check_req } from './utils'
/**
* 2019/06/04
* by zjzuo
* axios
*/
axios.defaults.timeout = 6000;
axios.defaults.baseURL = process.env.NODE_ENV== 'development' ? 'http://development_url.com' : 'http://producttion_url.com'; //请求地址配置,dev|pro
// 请求拦截器
axios.interceptors.request.use(config=> {
if(check_req(config.params))return config;
else return Promise.reject("数据填写不完整,请检查");
});
// 响应拦截器
axios.interceptors.response.use(res=> {
if(res.request.status != 200)return Promise.reject("网络错误,稍后重试或检查是否非法操作");
else if(res.data.code != 200)return Promise.reject(res.data.msg);
return res.data;
});
/**
* @function fetch() axios的get请求
* @arguments { url, params}
* @param {String} url 请求地址 baseURL+url, example: '/login'
* @param {JSON} params 请求附加数据{ xx : '' }
*/
export function fetch( params={},url:string = "/"){
return axios.get(url, {params:params})
}
/**
* @function post axios封装post请求
* @param {string} url 请求地址
* @param {JSON} params 传递参数
*/
export function post(params={},url:string='/'){
return axios.post(url,params)
}
export default axios;
导入axios.js,没有安装axios的记得先
npm install axios
然后在axios.ts中导入
import axios from 'axios'
这里主要讲一下拦截器,其他的设置默认参数这些请参考我给出的axios中文说明,拦截器主要是提前对请求做出处理。
//请求拦截器
axios.interceptors.request.use(config=> {
if(check_req(config.params))return config;
else return Promise.reject("数据填写不完整,请检查");
});
我在请求拦截器主要是检查请求参数是否填写完整,如果没有填写完整的话就不发送请求。请求拦截器可以参考或照抄我的,但是响应拦截器要根据自己后端返回的数据格式来制定,请只作参考。
//check_req 检查参数完整性 我写在utils.ts文件中的,具体实现如下
export function check_req(obj:any):boolean{
if(Object.keys(obj).length>0){
for(let i in obj){
if(typeof(obj[i])== 'string' || typeof(obj[i]) == 'object'){
if(obj[i].length>0)continue;
else return false;
}
else if(typeof(obj[i]) == 'number'){
if(obj[i].toString().length>0)continue;
else return false;
}
else if(obj[i] == undefined || obj[i] == null)return false;
}
return true;
}
return false;
}
响应拦截器,我的返回数据格式如下:
{
code:200, //成功200,失败其他错误返回相应错误码
msg:"请求成功",
data:{} //数据格式可能是{},也可能是[]
}
// 响应拦截器
axios.interceptors.response.use(res=> {
if(res.request.status != 200)return Promise.reject("网络错误,稍后重试或检查是否非法操作");
else if(res.data.code != 200)return Promise.reject(res.data.msg);
return res.data;
});
res.request.status
判断请求是否送达后端服务器,如果错误就把promise状态变为reject,否则为resolve;当成功请求后,再根据后端返回的状态码res.data.code
判断是否有数据或是否成功获取到数据。最后返回请求的数据res.data
。关于promise的状态变换请去看看阮一峰的es6。
看看如何请求,参考我上一篇的main.ts:
this.$get({service:'App.AdminApi.CheckAdmin',user_name:'123',user_password:'123'}).then(res=>{
console.log(res)
})
.catch(res=>{
alert(res)
})
当promise
状态从pedding->resolve
,我们用.then
接受成功的返回,pedding->reject
,我们用.catch
接受错误的返回。
**