美文网首页
Weex 网络请求工具库 axios 使用

Weex 网络请求工具库 axios 使用

作者: 木猫尾巴 | 来源:发表于2017-04-19 14:06 被阅读983次

    [TOC]

    介绍

    weex 使用 vue 所以官方推荐的网络通信库不再是vue-resource了,推荐使用axios

    https://github.com/mzabriskie/axios

    axios 安装

    
    # npm
    
    npm install axios
    
    # bower
    
    bower install axios
    
    

    or Use CDN <script src="https://unpkg.com/axios/dist/axios.min.js"></script>

    使用方法

    先创建 axios实例 这样是配置全局

    
    
    var axiosInstance = axios.create({
    
      baseURL: 'https://some-domain.com/api/',
    
      timeout: 1000,
    
      headers: {'Content-Type': 'application/x-www-form-urlencoded'}
    
    })
    
    

    也可以这样配置

    
    axios.defaults.baseURL = 'https://api.example.com';
    
    axios.defaults.headers.common['Authorization'] = AUTH_TOKEN;
    
    axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded';
    
    

    full set

    
    import Qs from 'qs'
    
    let baseURL = 'http://....'
    
    export default{
    
        url: '/get',
    
    
    
        baseURL: baseURL,
    
        // if not set default is GET
    
        method: 'POST',
    
    
    
        transformRequest: [
    
            function(data) {
    
                //for qs format behand
    
                data.strSQL = base64encode(data.strSQL);
    
                //form-data must be format
    
                data = Qs.stringify(data);
    
                return data;
    
            }
    
        ],
    
    
    
        transformResponse: [
    
            function(data) {
    
                return data;
    
            }
    
        ],
    
    
    
        headers: {
    
            // base header set
    
            'Content-Type':'application/x-www-form-urlencoded'
    
        },
    
    
    
        params: {
    
            // default set of params
    
        },
    
    
    
        paramsSerializer: function(params) {
    
            return Qs.stringify(params)
    
        },
    
    
    
        data: {
    
            // you can set by you want
    
            currentPage:1,
    
            ItemsOfPage:99999,
    
            type:0,
    
            strSQL:""
    
        },
    
    
    
        timeout: 5000,
    
    
    
        withCredentials: false, // default
    
    
    
        responseType: 'json', // default
    
    
    
        // an event of upload ,for close cross Domain option
    
    
    
        // onUploadProgress: function(progressEvent) {
    
        //  // Do whatever close u want with the native progress event
    
        // },
    
    
    
    
    
        // onDownloadProgress: function(progressEvent) {
    
        //  // Do whatever you want with the native progress event
    
        // },
    
    
    
        maxContentLength: 2000,
    
    
    
        validateStatus: function(status) {
    
            return status >= 200 && status < 300; // default
    
        },
    
    
    
        maxRedirects: 5, // default
    
    }
    
    
    
      function base64encode(str) {
    
        var keyStr = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/=";
    
        var output = "";
    
        var chr1, chr2, chr3 = "";
    
        var enc1, enc2, enc3, enc4 = "";
    
        var i = 0;
    
        var input = utf16to8(str);
    
        do {
    
            chr1 = input.charCodeAt(i++);
    
            chr2 = input.charCodeAt(i++);
    
            chr3 = input.charCodeAt(i++);
    
            enc1 = chr1 >> 2;
    
            enc2 = ((chr1 & 3) << 4) | (chr2 >> 4);
    
            enc3 = ((chr2 & 15) << 2) | (chr3 >> 6);
    
            enc4 = chr3 & 63;
    
            if (isNaN(chr2)) {
    
                enc3 = enc4 = 64;
    
            } else if (isNaN(chr3)) {
    
                enc4 = 64;
    
            }
    
            output = output + keyStr.charAt(enc1) + keyStr.charAt(enc2) + keyStr.charAt(enc3) + keyStr.charAt(enc4);
    
            chr1 = chr2 = chr3 = "";
    
            enc1 = enc2 = enc3 = enc4 = "";
    
        } while (i < input.length);
    
        return output;
    
    
    
      }
    
    
    
      function utf16to8(str) {
    
        var out, i, len, c;
    
        out = "";
    
        len = str.length;
    
        for (i = 0; i < len; i++) {
    
            c = str.charCodeAt(i);
    
            if ((c >= 0x0001) && (c <= 0x007F)) {
    
                out += str.charAt(i);
    
            } else if (c > 0x07FF) {
    
                out += String.fromCharCode(0xE0 | ((c >> 12) & 0x0F));
    
                out += String.fromCharCode(0x80 | ((c >> 6) & 0x3F));
    
                out += String.fromCharCode(0x80 | ((c >> 0) & 0x3F));
    
            } else {
    
                out += String.fromCharCode(0xC0 | ((c >> 6) & 0x1F));
    
                out += String.fromCharCode(0x80 | ((c >> 0) & 0x3F));
    
            }
    
        }
    
        return out;
    
      }
    
    
    
    import axios from 'axios'
    
    import config from './config'
    
    
    
    // axios(config);
    
    class API {
    
        //get parms
    
        get (param) {
    
            config.data.strSQL = param.param;
    
            return axios.post(param.api,{},config);
    
        }
    
        //post for param
    
        post (param) {
    
            config.data.strSQL = param.param;
    
            return axios.post(param.api,{},config);
    
        }
    
        // get list
    
        getList (param) {
    
            config.data.Method="get";
    
            config.data.CustData.Data = param;
    
            return axios.post('/list',{},config);
    
        }
    
        reqSuccess(obj,msg){
    
                obj.$message({
    
                    message: msg,
    
                    type: 'success'
    
                });
    
        }
    
        reqFail(obj,msg){
    
                obj.$message({
    
                    message: msg,
    
                    type: 'success'
    
                });
    
        }
    
    }
    
    export default API;
    
    

    使用

    
    import API from '../../api/API'
    
    const api = new API();
    
    export default{
    
        beforeMount(){
    
            let that = this;
    
            api.getList({})
    
            .then(function(res){
    
                let data = JSON.parse(res.data.DataJson).Data.datalist;
    
                that.ntGetList= data;
    
            })
    
            .catch(err=>{
    
                console.log(err);
    
            });
    
        },
    
        data(){
    
            return {
    
                ntGetList:[]
    
            }
    
        }
    
    }
    
    

    相关文章

      网友评论

          本文标题:Weex 网络请求工具库 axios 使用

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