精华内容
下载资源
问答
  • uniapp 关于axios 在真机的模式下失效
    2022-01-14 14:35:08

    解决方式
    1.下载 axios-adapter-uniapp 安装包

    2.在axios里进行引用

    import axiosAdapterUniapp from 'axios-adapter-uniapp'
    const service = axios.create({
     adapter: axiosAdapterUniapp,
    });
    
    更多相关内容
  • uniapp 使用 axios

    千次阅读 2021-09-05 01:51:34
    1.先用npm install axios 这就不用说了吧 2.添加配置代码 App.vue <style lang="scss"> @import 'uview-ui/theme.scss'; </style> main.js // 引入封装后的axios import axios from './utils/http.js'...

    1.先用npm install axios
    这就不用说了吧

    2.添加配置代码

    App.vue

    <style lang="scss">
    	@import 'uview-ui/theme.scss';
    </style>
    

    main.js

    // 引入封装后的axios
    import axios from './utils/http.js'
    /**
     * 给Vue函数添加一个原型属性$axios 指向Axios
     * 这样做的好处是在vue实例或组件中不用再去重复引用Axios 直接用this.$axios就能执行axios 方法了
     * 在.vue中使用,this.$axios.get
     * @param {Object} config
     */
    Vue.prototype.$axios = axios
    

    下面是解决app和小程序适配的问题

    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);
                }
            })
        })
    }
    

    uni.css

    在第一行添加
    @import "uview-ui/theme.scss";
    @import "uview-ui/index.scss";
    

    加入http工具包

    http.js

    import Vue from 'vue'
    import axios from 'axios'
    
    // create an axios instance
    const service = axios.create({
    	// baseURL: 'http://127.0.0.1:8686', // url = base url + request url
    	//withCredentials: true, // send cookies when cross-domain requests 注意:withCredentials和后端配置的cross跨域不可同时使用
    	timeout: 6000, // request timeout
    	crossDomain: true
    })
    
    // request拦截器,在请求之前做一些处理
    service.interceptors.request.use(
        config => {
            // if (store.state.token) {
            //     // 给请求头添加user-token
            //     config.headers["user-token"] = store.state.token;
            // }
            console.log('请求拦截成功')
            return config;
        },
        error => {
            console.log(error); // for debug
            return Promise.reject(error);
        }
    ); 
    
    //配置成功后的拦截器
    service.interceptors.response.use(res => {
        if (res.data.status== 200) {
            return res.data
        } else {
            return Promise.reject(res.data.msg);
        }
    }, error => {
    	if (error.response.status) {
    		switch (error.response.status) {
    			case 401:
    				break;
    			default:
    				break;
    		}
    	}
        return Promise.reject(error)
    })
    
    
    
    
    export default service
    

    3.配置api

    建一个api的包,里面存放所有用到的接口

    例子

    import service from '../../utils/http.js'
    
    export function toLogin(data) {
      return service({
        url: '/login',
        method: 'post',
        params : data
      }) 
    }
    

    调用

    const toLogin = require('../../api/login/login.js')
    
    
    //写一个方法,里面添加接口的调用
    
    toLogin.toLogin(data).then(res => {
    					if (res.data.code === 200) {
    						uni.switchTab({
    							url: "../index/index"
    						})
    					}
    				})
    
    展开全文
  • uniapp-axios真机无法发送请求问题

    千次阅读 2021-04-09 16:38:41
    我的项目中没有使用官方提供的...解决方案:配置axios适配器(axios-adapter-uniapp)。 Using npm: $ npm install axios-adapter-uniapp Using yarn: $ yarn add axios-adapter-uniapp axios-adapter-uniapp传送门

    我的项目中没有使用官方提供的uni.request,而是使用了axios,但遇到了一个问题是在我本地调试没问题,但真机运行时无法发送请求,会提示adapter is not a function

    解决方案:配置axios适配器(axios-adapter-uniapp)。

    Using npm:
    
    $ npm install axios-adapter-uniapp
    
    Using yarn:
    
    $ yarn add axios-adapter-uniapp
    

    axios-adapter-uniapp传送门

    使用:

    import axios from 'axios'
    import axiosAdapterUniapp from 'axios-adapter-uniapp'
     
    const instance = axios.create({
      baseURL: 'URL.com',
      adapter: axiosAdapterUniapp
    })
    

    — END —

    展开全文
  • uniapp中,使用axios进行请求时,uniapp无法使用axios的适配器,需要基于uni.request来定义适配器。 安装完成axios后在项目utils目录下建一个axios文件夹 文中根目录代表utils中的axios文件夹 在根目录新建一个...

    在uniapp中,使用axios进行请求时,uniapp无法使用axios的适配器,需要基于uni.request来定义适配器。
    安装完成axios后在项目utils目录下建一个axios文件夹

    文中根目录代表utils中的axios文件夹

    在根目录新建一个axios.js文件,在该文件中配置一个新的axios

    import axios from "axios";
    const service = axios.create({
      withCredentials: true,
      crossDomain: true,
      baseURL: '***',
      timeout: 6000
    })
    
    

    在根目录建一个lib文件夹,在这个文件夹里建一个adapter.js文件,该文件配置了基于uniapp的axios适配,记得抛出这个适配器

    
    import settle from "axios/lib/core/settle"
    import buildURL from "axios/lib/helpers/buildURL"
    
    /* 格式化路径 */
    const URLFormat = function (baseURL, url) {
      return url.startsWith("http") ? url : baseURL
    }
    
    /* axios适配器配置 */
    const adapter = function (config) {
      return new Promise((resolve, reject) => {
        uni.request({
          method: config.method.toUpperCase(),
          url: buildURL(URLFormat(config.baseURL, 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);
          }
        })
      })
    }
    
    export default adapter;
    

    在根目录的axios.js文件中,使用这个适配器并设置重新发起请求的次数以及每次重新请求的间隔时间

    import adapter from "./lib/adapter"
    service.defaults.adapter = adapter;
    service.defaults.retry = 5; // 设置请求次数
    service.defaults.retryDelay = 1000;// 重新请求时间间隔
    

    设置一个请求完成后的拦截器,如果响应头中的状态码为200表示成功,将请求得到的数据返回,否则一律视为错误请求,需要返回一个Promise。在lib中建立一个axiosError.js在里面处理失败的请求。

    service.interceptors.response.use(res => {
      if (res.status == 200) {
        return res;
      } else {
        return Promise.reject(res);
      }
    }, err => axiosError(err, service))
    

    axiosError.js中需要传入axios拦截器截到的错误以及我们新创建的这个axios,这个错误处理页面只是充当一个分配器的角色,我们可以根据响应头中的状态进行处理该错误,未处理的错误在使用时处理,返回Promise.reject

    // 处理401错误代码
    import Error401 from "../handlers/401Error";
    
    export default function (err, axios) {
      const errStatus = err.response.status;
      if (errStatus == 401) {
        return Error401(err); // 401没有权限,重新请求设置token
      } else {
        return Promise.reject(err);
      }
    }
    

    处理401错误代码,当请求失败并且响应头中的状态码为401时,是我没没有权限去请求,可以根据项目来进行处理,我们是需要携带token,所以401为token未携带或失效,请求时无需传入token,axios遇到401会自动携带这个token重新去请求。在根目录建一个handlers文件夹,在里面建一个401Error.js用于处理401的错误。
    这里使用到Vuex,需要引入Vuex,因为获取token、设置token的方法以及token都放在里面!!!使用store.dispatch("getToken")得到token后将token设置到请求头Authorization

    import interceptorsError from "../lib/interceptorsError";
    import store from 'store/index'
    
    /* 需要传入axios错误配置 */
    export default function (err, axios) {
      const config = err.config;// axios请求配置
      store.dispatch("getToken").then(function () {
        config.headers["Authorization"] = store.state.cnrToken.cnr_token;
      });
      err.config = config;
      return interceptorsError(axios, config);
    }
    

    一切准备就绪之后需要重新请求,在根目录建一个interceptorsError.js文件,用于重新执行请求,这个方法需要一个请求配置,只需要把我们上一个请求的配置传入即可。

    export default function (axios, config) {
      // 如果配置不存在或未设置重试选项,reject
      if (!config || !config.retry) return Promise.reject(err);
      // 设置变量以跟踪重试计数
      config.__retryCount = config.__retryCount || 0;
      // 如果重试次数大于最大重试次数,reject
      if (config.__retryCount >= config.retry) {
        return Promise.reject(err);
      }
      // 每重试一次记录一次重试次数
      config.__retryCount += 1;
      // 重试间隔时间
      const backoff = new Promise(function (resolve) {
        setTimeout(function () {
          resolve();
        }, config.retryDelay || 1000);
      });
    
      return backoff.then(function () {
        return axios(config);
      });
    }
    

    这是我Vuex中的代码

    /*
     * @Author: UpYou
     * @Date: 2020-09-25 16:30:13
     * @LastEditTime: 2020-09-25 21:32:56
     * @Descripttion: token
     * 
     */
    
    const state = {
      cnr_token: '',
      POST_KEYS: {
        ...获取token需要的验证信息...
      }
    };
    
    const mutations = {
      /* 设置token */
      SET_CNRTOKEN(state, Payload) {
        if (Payload.startsWith("Bearer"))
          state.cnr_token = Payload;
        else state.cnr_token = "Bearer" + Payload;
      }
    }
    
    const actions = {
      /* 向服务器获取token */
      getToken(context, args) {
        return new Promise(function (resolve, reject) {
          uni.request({
            url: "token服务器地址",
            data: { ...context.state.POST_KEYS },
            method: "get",
            async success(res) {
              await context.commit('SET_CNRTOKEN', res.data.access_token)
              await resolve(res.data)
            },
            fail: reject
          });
        })
      }
    }
    
    export default {
      state, mutations, actions,
    }
    
    展开全文
  • 在使用uniapp开发时,由于习惯使用axios做网络请求框架,所以在uniapp开发时也想使用axios。但实际使用时并没有那么简单。 首先安装axios npm install axios 请求时报 adapter is not a function 错误 网上有...
  • import axios from 'axios' import { baseURL, h5Config, isDev } from "@/config" import md5 from "@/node_modules/js-md5/src/md5.js" import { Encrypt, Decrypt } from '@/commonjs/des.js'; import { ...
  • uniapp之小程序开发中引入axios

    千次阅读 多人点赞 2020-12-24 13:59:52
    import axios from 'axios' // create an axios instance const service = axios.create({ baseURL: 'http://localhost:9004', // url = base url + request url //withCredentials: true, //
  • uni-app系列(一):安装开发工具 HBuilderx 并创建 uniapp 项目 43/100 发布文章 Mrs_chens new ????摘要 今天分享下 —— uni-app系列(一):安装开发工具 的一些基本知识,欢迎关注! ????安装 axios 首先...
  • uni-app使用axios

    2021-10-26 09:42:10
    1.2 安装axios npm install --save axios@0.19.0 1.3 拷贝js_sdk文件夹到项目根路径下 百度网盘链接:链接:https://pan.baidu.com/s/1PvixwCqt-1eXgelRHUa0OQ 提取码:4hmv –来自百度网盘超级会员V1的分享 1.4 ...
  • uni-app加入axios

    2021-11-29 08:30:36
    下载axios
  • uniapp中使用axios,将post方法传参改成get传参方式
  • 在uni-app中引入axios

    千次阅读 2021-05-14 17:59:19
    1、安装依赖 npm install axios --save 2、创建一个js工具类 import Vue from 'vue' import axios from 'axios' // create an axios instance const service = axios.create({ baseURL: 'http://localhost:9004'...
  • 需要安装这个axios-adapter-uniapp传送门 import axios from 'axios' import axiosAdapterUniapp from 'axios-adapter-uniapp' const instance = axios.create({ baseURL: 'URL.com', adapter: ...
  • uniapp中,使用axios进行请求时,uniapp无法使用axios的适配器,需要基于uni.request来定义适配器。 安装完成axios后在项目utils目录下建一个axios文件夹 文中根目录代表utils中的axios文件夹 在根目录新建一个...
  • 1. axios跨域处理 vue.config.js文件中处理 在vue.config.js中添加跨域代理的相关配置,没有vue.config.js文件可以自己手动添加。 关键内容如下: module.exports = { ...其他配置项 devServer: { open: ...
  • uni-app引入axios在微信开发者工具中出错

    千次阅读 热门讨论 2019-05-31 11:34:08
    最近开始使用uni-app做项目,在爬坑中度过半月,昨天到了联调部分,发现之前引入的uniFly请求库有跨不过去的坑,临时决定换axios,换上后,发现在小程序无法运行,话不多说,先贴代码: import Axios from '../...
  • uni-app 请求封装成axios axios原理

    千次阅读 2021-10-16 20:59:30
    uni-app 请求封装成axios 由于原生的uni-app的请求没有拦截守卫, 我用的不爽。 于是自行封装了 请求使用参数 与 uniapp使用一致 https://uniapp.dcloud.io/api/request/request?id=request // 主代码 export ...
  • class Axios { constructor(baseUrl) { this.baseUrl = baseUrl || '' } //get请求 get(url, data) { return this.fetch(url, data, 'GET') } //post请求 post(url, data) { return this.fetch(u
  • uni 中使用axios请求

    2022-04-11 11:43:14
    1、安装依赖 npm install axios --save 2、创建一个js工具类 我的路径static>utils>http.js import axios from 'axios' axios.defaults.headers['Content-Type'] = 'application/json;charset=utf-8' // ...
  • 在小程序端和安卓都不能发送接口,h5就可以,我在axios配置了适配器好像依然不行,有没有大手子知道怎么做呢
  • uni-app vue axios跨域访问问题 为了解决这个axios跨域访问报错问题,查了很多资料,最终还是解决了,特此在这里记录下方法。 main.js import axios from 'static/api/axios.min.js' //导入axios axios.defaults...
  • uni-app封装axios

    千次阅读 2021-02-19 22:18:53
    下载axios npm install axios --save 区分开发环境和生产环境 1)根目录下创建.env.development文件配置开发环境。 NODE_ENV="development"; VUE_APP_URL = '/api' VUE_APP_URL_TWO = '' VUE_APP_URL_THREE = ...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 1,059
精华内容 423
关键字:

uniapp 安装axios