uni-app axios,uniapp怎么发请求

  uni-app axios,uniapp怎么发请求

  Uni使用的是axios无法请求的解决方案:首先在根目录新建一个[axios.js]文件,在这个文件中配置一个新的axios;然后使用这个适配器并设置重新请求的次数和每次重新请求之间的时间间隔。

  UNI-APP开发(仿饿)开发课程:进入学习

  本教程运行环境:windows7系统,Uni-App版本2.5.1。这个方法适用于所有品牌的电脑。

  推荐(免费):uni-app开发教程

  uniapp使用axios无法请求的解决办法:

  在根目录下创建一个新的axios.js文件,并在这个文件中配置一个新的axios。

  从“axios”导入axios;

  const service=axios.create({

  withCredentials: true,

  crossDomain:真的,

  base URL:“* * *”,

  超时:6000

  })在根目录下建立一个lib文件夹,在这个文件夹下建立一个adapter.js文件,这个文件是基于uniapp配置了axios适配的。记得扔这个适配器。

  从“axios/lib/core/settle”导入settle

  从“axios/lib/helpers/buildURL”导入buildURL

  /*格式路径*/

  const URL format=function(base URL,url) {

  返回url.startsWith(http )?url : baseURL

  }

  /* axios适配器配置*/

  常量适配器=函数(配置){

  返回新承诺((解决,拒绝)={

  uni.request({

  方法:config.method.toUpperCase(),

  URL:build URL(URL format(config . base URL,config.url),config.params,config.paramsSerializer),

  header: config.headers,

  数据:配置数据,

  数据类型:config.dataType,

  response type:config . response type

  sslVerify: config.sslVerify,

  完成:功能完成(响应){

  响应={

  数据:响应.数据,

  状态:response.statusCode,

  errMsg: response.errMsg,

  header: response.header

  配置:配置

  };

  解决(解决、拒绝、响应);

  }

  })

  })

  }

  导出默认适配器;在根目录的axios.js文件中,使用这个适配器并设置重新请求的次数和每次重新请求之间的时间间隔。

  从导入适配器。/lib/adapter

  service.defaults.adapter=适配器;

  service . defaults . retry=5;//设置请求的数量

  service . defaults . retry delay=1000;//重新请求间隔在请求完成后设置一个拦截器。如果响应头中的状态码是200,则表示成功,从请求中获得的数据将被返回。否则,将被视为错误请求,需要退回承诺。在lib中设置一个axiosError.js来处理失败的请求。

  service . interceptors . response . use(RES={

  if (res.status==200) {

  返回res

  }否则{

  返回promise . reject(RES);

  }

  },err=axioserror (err,service))axioserror . js中axios拦截器拦截的错误和这个新创建的axios,这个错误处理页面只是作为一个分发器,我们可以根据响应头中的状态来处理错误。未处理的错误将在使用中处理,并返回Promise.reject

  //处理401错误代码

  从导入错误401./handlers/401 error ;

  导出默认函数(err,axios) {

  const err status=err . response . status;

  if (errStatus==401) {

  返回错误401(err);//401没有权限,请求再次设置令牌

  }否则{

  返回promise . reject(err);

  }

  }处理401错误代码。当请求失败,响应头中的状态码为401时,表示我没有权限请求,我们可以根据项目进行处理。我们需要携带令牌,所以401表示令牌没有携带或者无效,请求时不需要传入令牌。axios遇到401会自动携带这个令牌再次请求。在根目录下创建一个handlers文件夹,并在其中创建一个401Error.js来处理401错误。

  这里要用Vuex,需要介绍一下Vuex,因为获取令牌的方法,设置令牌,令牌都放在里面了!使用store.dispatch(getToken )获取令牌并将令牌设置为请求标头授权。

  导入拦截器错误来自./lib/interceptor serror ;

  从“存储/索引”导入存储

  /*需要输入axios错误配置*/

  导出默认函数(err,axios) {

  const config=err.config//axios请求配置

  store.dispatch(getToken ).then(function () {

  配置。头[授权]=存储。状态。CNR令牌。CNR _ token

  });

  err.config=配置

  返回拦截错误(axios,配置);

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

  导出默认功能(axios,配置){

  //如果配置不存在或未设置重试选项,拒绝

  如果(!config !配置.重试)返回保证。拒绝(err);

  //设置变量以跟踪重试计数

  配置__retryCount=config ._ _重试次数 0;

  //如果重试次数大于最大重试次数,拒绝

  如果(配置__retryCount=config.retry) {

  返回保证。拒绝(err);

  }

  //每重试一次记录一次重试次数

  配置. retry count=1;

  //重试间隔时间

  const back off=new Promise(function(resolve){

  setTimeout(function () {

  resolve();

  },配置。retrydelay 1000);

  });

  return backoff.then(function () {

  返回axios(配置);

  });

  }这是我状态管理中的代码

  /*

  * @作者:UpYou

  * @日期:2020-09-25 16:30:13

  * @ LastEditTime:2020-09-25 21:32:56

  * @描述:令牌

  *

  */

  常量状态={

  cnr_token: ,

  POST_KEYS: {

  .获取代币需要的验证信息.

  }

  };

  常量突变={

  /* 设置令牌*/

  SET_CNRTOKEN(状态,有效负载){

  if (Payload.startsWith(Bearer ))

  state.cnr_token=有效载荷;

  else state.cnr_token=Bearer 有效负载;

  }

  }

  常量操作={

  /* 向服务器获取令牌*/

  格托肯(上下文,参数){

  返回新承诺(功能(解决,拒绝){

  uni.request({

   url:令牌服务器地址,

  数据:{.context.state.POST_KEYS },

  方法:“得到”,

  异步成功(资源){

  等待上下文。提交( SET _ CNRTOKEN ,res.data.access_token)

  等待解决(资源数据)

  },

  失败:拒绝

  });

  })

  }

  }

  导出默认值{

  状态、突变、动作,

  }以上就是uniapp使用爱可信无法请求怎么办的详细内容,更多请关注我们其它相关文章!

郑重声明:本文由网友发布,不代表盛行IT的观点,版权归原作者所有,仅为传播更多信息之目的,如有侵权请联系,我们将第一时间修改或删除,多谢。

留言与评论(共有 条评论)
   
验证码: