vue中 axios封装(后期发现有一些问题，能正确执行，但是问题还没修复，请参考慎用)

javascript环境下：

import axios from 'axios'

/**
 * 2019/05/15 06:25 pm
 * by zjzuo
 * axios
 */

axios.defaults.timeout = 6000;

/**
 * @function fetch()  axios的get请求
 * @arguments { url, params} 
 * @param {String} url 请求地址 baseURL+url, example: '/login'
 * @param {JSON} params  请求附加数据{ xx : '' }
 * @returns {Promise} Promise对象，success: res.data;fail:err
 */

export function fetch(url,params={}){
    return new Promise(( resolve,reject ) => {
        axios.get( url, {params:params}).then(res => {
            resolve(res.data);
        }).catch(err =>{
            reject(err);
        })
    })
}

/**
 * @function post axios封装post请求
 * @param {string} url 请求地址
 * @param {JSON} params 传递参数
 * @returns {Promise} promise对象
 */

export function post(url,params={}){
    return new Promise((resolve,reject)=>{
        axios.post(url,params).then((res)=>{
            resolve(res.data);
        }).catch(err =>{
            reject(err);
        })
    })
}

typescript 环境下

import axios from 'axios'

/**
 * 2019/05/15 06:25 pm
 * by zjzuo
 * axios
 */

axios.defaults.timeout = 6000;
//baseurl 未设置，可以设置成你自己的



/**
 * @function fetch()  axios的get请求
 * @arguments { url, params} 
 * @param {String} url 请求地址 baseURL+url, example: '/login'
 * @param {JSON} params  请求附加数据{ xx : '' }
 * @returns {Promise} Promise对象，success: res.data;fail:err
 */

export function fetch(url:string,params={}){
    return new Promise(( resolve,reject ) => {
        axios.get( url, {params:params}).then(res => {
            resolve(res.data);
        }).catch(err =>{
            reject(err);
        })
    })
}

/**
 * @function post axios封装post请求
 * @param {string} url 请求地址
 * @param {JSON} params 传递参数
 * @returns {Promise} promise对象
 */

export function post(url:string,params={}){
    return new Promise((resolve,reject)=>{
        axios.post(url,params).then((res)=>{
            resolve(res.data);
        }).catch(err =>{
            reject(err);
        })
    })
}

然后在main.js/main.ts中配置全局引用

//main.js or main.ts都可以使用下面的代码

import {fetch,post} from '@utils/axios'；  //@utils: src/utils/ 具体请看我写的别名设置博客里面提到过

Vue.prototype.$get = fetch;
Vue.prototype.$post = post;

//这样过后，在别的vue组件中要使用post和get请求就可以使用 

this.$get('url',data).then(res=>{
	//success TO DO
	
}).catch(_=>{
	//fail TO DO
	
})

 和

this.$post(‘url’,data)...和get一样的调用方式

可以看到js和ts代码差不多，唯一区别就是ts我的参数带了类型，不然会报错。

有一些promise的遗留问题，请求可以