Weex 网络请求工具库 axios 使用

[TOC]

介绍

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

https://github.com/mzabriskie/axios

axios 安装

# npm

npm install axios

# bower

bower install axios

or Use CDN

使用方法

先创建 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:[]

        }

    }

}