vue中axios更正

先为上一篇的错误道歉，虽然不影响大局，但还是有一些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接受错误的返回。
**

如果要挂载到原型链上，也就是使用this.$get，请使用js，typescript不支持挂载到原型链上，只有等vue3看看了