axios-01

作者: 夜幕小草 | 来源:发表于2017-08-25 09:59 被阅读23次
    http://blog.csdn.net/sinat_17775997/article/details/69367204
    

    一、axios 简介
    axios 是一个基于Promise 用于浏览器和 nodejs 的 HTTP 客户端,它本身具有以下特征:https://hzzly.github.io/2017/03/12/axios%E5%9C%A8vue%E4%B8%AD%E7%9A%84%E7%AE%80%E5%8D%95%E9%85%8D%E7%BD%AE%E4%B8%8E%E4%BD%BF%E7%94%A8/

    从浏览器中创建 XMLHttpRequest
    从 node.js 发出 http 请求
    支持 Promise API
    拦截请求和响应
    转换请求和响应数据
    取消请求
    自动转换JSON数据
    客户端支持防止 CSRF/XSRF
    

    二、引入方式:

    npm
    $ npm install axios
    //淘宝源
    $ cnpm install axios
    
    bower:
    $ bower install axios
    
    cdn:
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    

    三、vue中axios的配置
    之前那个开源项目一开始就打算用axios,在网上找了好多文章与攻略,发现好多都不太详细,所以打算自己动手配置一个,(不要怂,撸起袖子就是干)。
    我的配置:

    import axios from 'axios'
    import qs from 'qs'
    import * as _ from '../util/tool'
    axios.defaults.timeout = 5000;                        //响应时间
    axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded;charset=UTF-8';           //配置请求头
    axios.defaults.baseURL = '你的接口地址';   //配置接口地址
    //POST传参序列化(添加请求拦截器)
    axios.interceptors.request.use((config) => {
        //在发送请求之前做某件事
        if(config.method  === 'post'){
            config.data = qs.stringify(config.data);
        }
        return config;
    },(error) =>{
         _.toast("错误的传参", 'fail');
        return Promise.reject(error);
    });
    //返回状态判断(添加响应拦截器)
    axios.interceptors.response.use((res) =>{
        //对响应数据做些事
        if(!res.data.success){
            // _.toast(res.data.msg);
            return Promise.reject(res);
        }
        return res;
    }, (error) => {
        _.toast("网络异常", 'fail');
        return Promise.reject(error);
    });
    //返回一个Promise(发送post请求)
    export function fetch(url, params) {
        return new Promise((resolve, reject) => {
            axios.post(url, params)
                .then(response => {
                    resolve(response.data);
                }, err => {
                    reject(err);
                })
                .catch((error) => {
                   reject(error)
                })
        })
    }
    

    四、vue中使用配置好的axios

    export default {
        /**
         * 用户登录
         */
        Login(params) {
            return fetch('/users/api/userLogin', params)
        },  
        /**
         * 用户注册
         */
        Regist(params) {
            return fetch('/users/api/userRegist', params)
        },
        /**
         * 发送注册验证码
         */
        RegistVerifiCode(tellphone) {
            return fetch('/users/api/registVerifiCode', {tellphone: tellphone})
        },
        ......
    }
    
    如果觉得还行,欢迎star项目地址: [https://github.com/hzzly/xyy-vue](https://github.com/hzzly/xyy-vue)demo地址: [http://hjingren.cn/xyy-vue/](http://hjingren.cn/xyy-vue/)
    

    相关文章

      网友评论

          本文标题:axios-01

          本文链接:https://www.haomeiwen.com/subject/axiydxtx.html