菜单

axios基本入门用法教程_javascript技巧_脚本之家

2019年12月15日 - 计算机服务器

金沙国际棋牌下载官网,这篇文章主要给大家介绍了axios基本入门用法教程,下面话不多说,来看看详细的介绍吧。

vue更新到2.0之后,作者就宣告不再对vue-resource更新,而是推荐的axios,前一段时间用了一下,现在说一下它的基本用法。

自从使用Vue2之后,就使用官方推荐的axios的插件来调用API,在使用过程中,如果服务器或者网络不稳定掉包了,
你们该如何处理呢? 下面我给你们分享一下我的经历。

首先就是引入axios,如果你使用es6,只需要安装axios模块之后

首先就是引入axios,如果你使用es6,只需要安装axios模块之后

具体原因

import axios from 'axios';//安装方法npm install axios//或bower install axios
import axios from 'axios';
//安装方法
npm install axios
//或
bower install axios

最近公司在做一个项目, 服务端数据接口用的是Php输出的API,
有时候在调用的过程中会失败, 在谷歌浏览器里边显示Provisional headers are
shown。

当然也可以用script引入

当然也可以用script引入

按照搜索引擎给出来的解决方案,解决不了我的问题.

axios提供了一下几种请求方式

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

最近在研究AOP这个开发编程的概念,axios开发说明里边提到的栏截器应该是这种机制,降低代码耦合度,提高程序的可重用性,同时提高了开发的效率。

axios.requestaxios.getaxios.deleteaxios.headaxios.post(url[, data[, config]])axios.put(url[, data[, config]])axios.patch(url[, data[, config]])

axios提供了一下几种请求方式

带坑的解决方案一

这里的config是对一些基本信息的配置,比如请求头,baseURL,当然这里提供了一些比较方便配置项

金沙国际棋牌下载官网 1

我的经验有限,觉得唯一能做的,就是axios请求超时之后做一个重新请求。通过研究
axios的使用说明,给它设置一个timeout = 6000

//configimport Qs from 'qs'{ //请求的接口,在请求的时候,如axios.get;这里的url会覆盖掉config中的url url: '/user', // 请求方法同上 method: 'get', // default // 基础url前缀 baseURL: 'https://some-domain.com/api/', transformRequest: [function  { // 这里可以在发送请求之前对请求数据做处理,比如form-data格式化等,这里可以使用开头引入的Qs(这个模块在安装axios的时候就已经安装了,不需要另外安装) data = Qs.stringify; return data; }], transformResponse: [function  { // 这里提前处理返回的数据 return data; }], // 请求头信息 headers: {'X-Requested-With': 'XMLHttpRequest'}, //parameter参数 params: { ID: 12345 }, //post参数,使用axios.post;如果没有额外的也必须要用一个空对象,否则会报错 data: { firstName: 'Fred' }, //设置超时时间 timeout: 1000, //返回数据类型 responseType: 'json', // default }
axios.request(config)

axios.get(url[, config])

axios.delete(url[, config])

axios.head(url[, config])

axios.post(url[, data[, config]])

axios.put(url[, data[, config]])

axios.patch(url[, data[, config]])
axios.defaults.timeout = 6000;

// Add a request interceptoraxios.interceptors.request.use { // Do something before request is sent return config; }, function  { // Do something with request error return Promise.reject;// Add a response interceptoraxios.interceptors.response.use { // Do something with response data return response; }, function  { // Do something with response error return Promise.reject;

有了配置文件,我们就可以减少很多额外的处理代码也更优美,直接使用

金沙国际棋牌下载官网 2

这个栏截器作用是
如果在请求超时之后,栏截器可以捕抓到信息,然后再进行下一步操作,也就是我想要用
重新请求。

axios.post .then{ console.log .catch{ console.log//axios请求返回的也是一个promise,跟踪错误只需要在最后加一个catch就可以了。//下面是关于同时发起多个请求时的处理axios.all .then(axios.spread { // 只有两个请求都完成才会成功,否则会被catch捕获 }));

这里的config是对一些基本信息的配置,比如请求头,baseURL,当然这里提供了一些比较方便配置项

这里是相关的页面数据请求。

最后还是说一下配置项,上面讲的是额外配置,如果你不想另外写也可以直接配置全局

金沙国际棋牌下载官网 3

this.$axios.get(url, {params:{load:'noload'}}).then {//dosomething.catch(error => {//超时之后在这里捕抓错误信息.if  {console.logconsole.log;} else if  {console.logconsole.logif(error.request.readyState == 4 && error.request.status == 0){//我在这里重新请求}} else {console.log('Error', error.message);}console.log;
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';//当然还可以这么配置var instance = axios.create({ baseURL: 'https://api.example.com'});
//config
import Qs from 'qs'
{
  //请求的接口,在请求的时候,如axios.get(url,config);这里的url会覆盖掉config中的url
  url: '/user',

  // 请求方法同上
  method: 'get', // default
  // 基础url前缀
  baseURL: 'https://some-domain.com/api/',
  
    
  transformRequest: [function (data) {
    // 这里可以在发送请求之前对请求数据做处理,比如form-data格式化等,这里可以使用开头引入的Qs(这个模块在安装axios的时候就已经安装了,不需要另外安装)
  data = Qs.stringify({});
    return data;
  }],

  transformResponse: [function (data) {
    // 这里提前处理返回的数据

    return data;
  }],

  // 请求头信息
  headers: {'X-Requested-With': 'XMLHttpRequest'},

  //parameter参数
  params: {
    ID: 12345
  },

  //post参数,使用axios.post(url,{},config);如果没有额外的也必须要用一个空对象,否则会报错
  data: {
    firstName: 'Fred'
  },

  //设置超时时间
  timeout: 1000,
  //返回数据类型
  responseType: 'json', // default


}

超时之后, 报出 Uncaught Error: timeout of xxx ms exceeded的错误。

本文只是介绍基本的用法,详细看官方文档:

金沙国际棋牌下载官网 4

在 catch那里,它返回的是error.request错误,所以就在这里做 retry的功能,
经过测试是可以实现重新请求的功功能, 虽然能够实现
超时重新请求的功能,但很麻烦,需要每一个请API的页面里边要设置重新请求。

两个例子分享给大家:

有了配置文件,我们就可以减少很多额外的处理代码也更优美,直接使用

看上面,我这个项目有几十个.vue
文件,如果每个页面都要去设置超时重新请求的功能,那我要疯掉的.

使用vue2.0+mintUI+axios+vue-router:

金沙国际棋牌下载官网 5

而且这个机制还有一个严重的bug,就是被请求的链接失效或其他原因造成无法正常访问的时候,这个机制失效了,它不会等待我设定的6秒,而且一直在刷,一秒种请求几十次,很容易就把服务器搞垮了,请看下图,
一眨眼的功能,它就请求了146次。

使用vue2.0+elementUI+axios+vue-router:

axios.post(url,{},config)
    .then(function(res){
        console.log(res);
    })
    .catch(function(err){
        console.log(err);
    })
//axios请求返回的也是一个promise,跟踪错误只需要在最后加一个catch就可以了。
//下面是关于同时发起多个请求时的处理

axios.all([get1(), get2()])
  .then(axios.spread(function (res1, res2) {
    // 只有两个请求都完成才会成功,否则会被catch捕获
  }));

带坑的解决方案二

总结

金沙国际棋牌下载官网 6

研究了axios的源代码,超时后, 会在拦截器那里 axios.interceptors.response
捕抓到错误信息, 且 error.code = “ECONNABORTED”,具体链接

相关文章

发表评论

电子邮件地址不会被公开。 必填项已用*标注

网站地图xml地图