zoukankan      html  css  js  c++  java
  • 在uniapp设计的APP中引入axios,支持cookie(真机亲测可行)

      在uniapp中,我们可以通过原生的uni.request(OBJECT)方法发起网络请求,但是这个请求方式不管是在h5、app、还是微信小程序,都是不支持cookie的。这里就想到在vue项目中经常用到的请求方式axios,是支持cookie的,那我们是不是可以把axios也引入到uniapp中使用呢?有了这个想法,我们就开始动手做起来吧!

    首先就是正常的安装和引用axios:

    一.安装npm插件

    在HbuilderX顶部菜单,选择工具—>插件安装,选择NPM安装。

    二.安装axios

    在你的uniapp项目的根目录下,运行命令行语句:

    npm install axios

     执行完后会发现uniapp和vue的项目一样,多了一个node_module文件夹,文件夹中多了一个axios文件夹,即安装成功。

    三.在main.js中引入axios

    import Vue from 'vue'
    import App from './App'
    import axios from 'axios' // create an axios instance const service = axios.create({ baseURL: 'http://192.168.0.105:8090', // url = base url + request url withCredentials: true, // send cookies when cross-domain requests // timeout: 5000, // request timeout crossDomain: true }) Vue.prototype.$axios = service

    四.创建axios.js文件,导出axios方法

    import Vue from 'vue'
    
    export default Vue.prototype.$axios

    五.使用axios进行方法请求

    到这一步,我们就可以用axios进行请求了。但是问题也来了,这个请求方式在h5中可以执行,但是在app和微信小程序运行的就会出现下面这个错误:

     adapter是axios的适配器,可在adapter中设置属于自己的请求方法,这里报错大概是axios默认的适配器并没有被uniapp识别到,所以我们在这里就自己定义个适配器。这里就是基于Promise封装了uniapp的request方法,代码如下:

    axios.defaults.adapter = function(config) {
        return new Promise((resolve, reject) => {
            console.log(config)
            var settle = require('axios/lib/core/settle');
            var buildURL = require('axios/lib/helpers/buildURL');
            uni.request({
                method: config.method.toUpperCase(),
                url: config.baseURL + buildURL(config.url, config.params, config.paramsSerializer),
                header: config.headers,
                data: config.data,
                dataType: config.dataType,
                responseType: config.responseType,
                sslVerify: config.sslVerify,
                complete: function complete(response) {
                    response = {
                        data: response.data,
                        status: response.statusCode,
                        errMsg: response.errMsg,
                        header: response.header,
                        config: config
                    };
    
                    settle(resolve, reject, response);
                }
            })
        })
    }

    在main.js中放入这段自定义适配器的代码,就可以实现uniapp的app和小程序开发中能使用axios进行跨域网络请求,并支持携带cookie。

    以上就是uniapp引入axios的方法分享。

    /****************************我是可爱的分割线********************************/

  • 相关阅读:
    ....
    CodeForces 375A(同余)
    POJ 2377 Bad Cowtractors (最小生成树)
    POJ 1258 AgriNet (最小生成树)
    HDU 1016 Prime Ring Problem(全排列)
    HDU 4460 Friend Chains(bfs)
    POJ 2236 Wireless Network(并查集)
    POJ 2100 Graveyard Design(尺取)
    POJ 2110 Mountain Walking(二分/bfs)
    CodeForces 1059B Forgery(模拟)
  • 原文地址:https://www.cnblogs.com/merryan-share/p/12418450.html
Copyright © 2011-2022 走看看