vue axios封装和详细使用

前端 专栏收录该内容
15 篇文章 0 订阅
网络模块封装axios

ajax i/o system

​ 使用自己已经封装好的模块,进行网络请求。假如第三方网络请求框架有一天,出现了不维护申明,那么对于项目来说就是很严重的问题。那么,开发中有啥网络请求选择呢?如下:

方式1:

Vue中发送网络请求有非常多的方式,那么,在开发中,如何选择呢?
传统的Ajax是基于XMLHttpRequestP(XHR)
到为什么不用它呢?
非常好解释,配首和调用方式等非常混乱,
编码起来看起来就非常蛋疼.
所以真实开发中很少直接使用,而是使用Jquery-ajax

方式2:

在前面的学习中,我们经常会使用jQueAjax
相对于传统的Ajax非常好用.
为什么不选择它昵?
首先,我们先明确一点:在的整个开发中都是不需要JQuery了,就意味着为了方便我们进行一个网络请求,特意引用一个jQuery,你觉得合理吗?
jQuey的代码1w+行.
vue的代码1w+行.
所以完全没有必要为了用络请求就引用这个重量级的框架.

方式3:

选择三:官方在vue1.x时院推出了Vue-resource.
Vue-resource的体积相对于jQuery小很多.
另外vue-resoure 是官方推出的.
到为什么不选择它呢?
》在Vue2.0退出后,Vue作者就在GitHub的lssues中说明
了去Mvue-resource,并且以后也不会再更新
》那么意味着以后vue-resource不再支持新的版本时,也不
会再继续更新和维护.
》对以后的顶目开发和维护都存在很大的患,

方式4:

选择四:在说明不再继续更新和维护vue-resource的同时,作者还推荐了一个框架:axios.
axios有非常多的优点,并目用起来也非韋方便.
稍后,我们对他详细学习,

在学习axios的时候,我们还需要了解常用网络请求jsonp相关知识:
在这里插入图片描述

了解一下就行了,图大概知道轮廓就可以了。

在前端开发中,我们一一种常见的网络请求方式就是JSONP
使用JSONP最主要的原因往往是为了解决跨域的问题,
JSONP的原理是什么呢?
JSONP的核心于诵过<script>标签的src来帮助我们请求数据.
原因是我们的项目部罟在domain1.com的服务器上时,是不能直接访问domain2.com服务器上的资科的.
这个时候我有利用<script>标签的sr(帮助我们去服务器请求到数据
将数据当做一个javascnpt的函数来执行。并且执行的过程中传
入我们需要的json。
所以封到jsonp的核心就在于我们监昕windows上的jsonp进行回
调时的各称.

现在来看下使用axios的优点:

功能特点:
在浏览器中发送XMLHttpRequests请求
在node.js中发送http请求
支持PromiseAPI
拦截请求响应
转换请求响应数据
等等

现在来看下axios的请求方式:

1.axios(config)
2.axios.request(config)
3.axios.get(url[,config])
4.axios.delete(url[,config])
5.axios.head(url[,config])
6.axios.post(url[,data[,config]])
7.axios.put(url[,data[,config]])
8.axios.patch(url[,data[,config]])

使用

首先,先在终端使用npm安装axios:

npm install axios --save

安装好后,可以在很多地方开始使用,下面来进行简单到稍微复杂点的使用。

在main.js中导入axios,然后导入配置[自己定义]:

import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
//引用axios
import axios from 'axios'
Vue.config.productionTip = false

new Vue({
  router,
  store,
  render: h => h(App)
}).$mount('#app')
//使用axios进行网络请求
const config = {
    //请求网络地址[这里是本人本地接口,请求验证码]
    url: 'http://localhost:8080/uaa/auth/code/image'
}
//实例导入config,并且进行回调处理,当服务器端返回了response数据后,进行打印
axios(config).then(res=>{
  //打印
  console.log(res);
})

这样之后,我们运行项目,然后运行如下:

在这里插入图片描述

有时候,我们需要同时发送两个网络请求,当两个请求都返回相关数据的时候,才继续往下做一些事情,在main.js中修改代码,如下:

import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
//引用axios
import axios from 'axios'
Vue.config.productionTip = false

new Vue({
  router,
  store,
  render: h => h(App)
}).$mount('#app')
//使用axios进行网络请求
axios.defaults.baseURL='http://localhost:8080';

//一次请求两个或者多个网络请求,然后两个请求都相应之后,才进行回调的处理
axios.all([axios({
  url:'/uaa/auth/code/image',
  method: 'post'
}),axios({
  url:'/uaa/auth/form',
  method: 'post'
})]).then(results =>{
  console.log(results)
  //穿回来的是个数组,可以利用下标来进行获取对应数据
  console.log("----------------------------------")
  console.log(results[0]);
  console.log("----------------------------------")
  console.log(results[1]);
})

运行结果:
在这里插入图片描述

除此之外,当然也是可以使用axios的spread的属性来对结果进行分割,就不需要使用数组下标来进行获取数据了,格式如下:

//一次请求两个或者多个网络请求,然后两个请求都相应之后,才进行回调的处理
axios.all([axios({
  url:'/uaa/auth/code/image',
  method: 'post'
}),axios({
  url:'/uaa/auth/form',
  method: 'post'
})]).then(axios.spread((res1,res2) =>{
    console.log(res1);
    console.log("----------------------------------")
    console.log(res2);
})

运行结果如下:

在这里插入图片描述

可以看到,运行结果是一样的

axios的基本全局配置

在这里插入图片描述

全局配置使用的举例:

vue封装axios,在组件中调用

创建network文件夹,在文件夹下面创建request.js文件,代码如下:

import axios from 'axios'
export function request(config,success,failure){
    const instance  = axios.create({
        baseURL: 'http://localhost:8080',
        timeout: 5000
    })
    instance(config)
        //成功,回调
        .then(res=>{
            success(res);
        })
        //失败,回调
        .catch(res=>{
            failure(res)
        })
}

在app.vue组件中引入封装的request,进行使用封装好的request进行请求:

<template>
  <div id="app">
   
  </div>
</template>

<style>
    
</style>
<script>
  import {request} from './network/request';
  request({
    url:'/uaa/auth/form'
  },res => {
    console.log(res);
  },err => {
    console.log(err);
  });
  export default {
    
  }
</script>

运行结果:

在这里插入图片描述

可以看到,已经成功调用封装好的request

比较常用的下面这种封装方案,使用promise:

import axios from 'axios'
export function request(config,success,failure){
    return new Promise((resolve,reject)=>{
        const instance  = axios.create({
            baseURL: 'http://localhost:8080',
            timeout: 5000
        })
        //网络请求
        instance(config)
            //成功,回调
            .then(res=>{
                resolve(res)
            })
            //失败,回调
            .catch(err=>{
                reject(err)
              })
    })
}

然后在组件[app.vue]页面使用:

<script>
  import {request} from './network/request';
  request({
    url:'/uaa/auth/form'
  }).then(res=>{
      console.log(res)
  }).catch(err=>{
      console.log(err)
  })

  export default {
    
  }
</script>

运行结果如下;

在这里插入图片描述

可以发现,使用promise来进行回调也是可以的,推荐使用这种方法封装。

还有一种方法也是可以,直接返回一个AxiosInstance实例,request.js修改代码如下:

import axios from 'axios'
export function request(config){
        const instance  = axios.create({
            baseURL: 'http://localhost:8080',
            timeout: 5000
        })
        //网络请求
        return instance(config)
}


运行结果如下:

在这里插入图片描述

发现,还是一样能够获取。

axios的拦截器的使用

​ 使用场景:发送网络请求的过程中想把它拦截,通常使用的例子有但不局限于下面几个:

  1. 当你想再发送网络请求前,看看一些参数是否已经携带
  2. 当你想在发送网络请求前,加载动画。
  3. 回调成功或者失败的时候,进行拦截,进行判断和处理

通常拦截器有四种状态,如下

  1. 发送网络请求到服务器成功
  2. 请求网络请求到服务器失败
  3. 服务器响应成功
  4. 服务器响应响应失败
//使用拦截器 拦截请求
axios.interceptors.request;
//拦截响应
axios.interceptors.response;
简单使用:
import axios from 'axios'
export function request(config){
        const instance  = axios.create({
            baseURL: 'http://localhost:8080',
            timeout: 5000
        })
        //使用拦截器 拦截请求
        instance.interceptors.request.use(
            config=>{
                console.log("拦截器(config):")
                console.log(config)
            },
            err=>{
                console.log("拦截器(err):");
                console.log(err)
            }
        );

        //拦截响应
        // axios.interceptors.response;

        //网络请求
        return instance(config)
}

使用use,来对拦截信息进行打印。运行结果如下:

在这里插入图片描述

但是,运行上面的代码,会出现如下结果:

在这里插入图片描述

会说,config不存在、这是说,config已经被我们拦截下来了,axios拿不到应该有的config

在这里插入图片描述

所以,上面会打印报错,因此我们应该返回给config给axios,进行网络请求,加retrurn

  //使用拦截器 拦截请求
        instance.interceptors.request.use(
            config=>{
                console.log("拦截器(config):")
                console.log(config)
                return config;
            },
            err=>{
                console.log("拦截器(err):");
                console.log(err)
            }
        );

接下来是response的拦截:

        //拦截响应
        instance.interceptors.response.use(
            res=>{
                //响应成功的拦截
                console.log("响应拦截器:");
                console.log(res)
            },err=>{
                //响应失败的拦截
                console.log("响应拦截器[失败]:");
                console.log(err)
            }
        );

运行结果:

在这里插入图片描述

出现underfined是因为,服务器返回的数据已经被我们拦截了,所以在main.js中打印不出来了、所以需要也加上return,代码如下:

import axios from 'axios'
export function request(config){
        const instance  = axios.create({
            baseURL: 'http://localhost:8080',
            timeout: 5000
        })
        //使用拦截器 拦截请求
        instance.interceptors.request.use(
            config=>{
                console.log("拦截器(config):")
                //动画
                console.log(config)
                return config;
            },
            err=>{
                console.log("拦截器(err):");
                console.log(err)
            }
        );
        //拦截响应
        instance.interceptors.response.use(
            res=>{
                //响应成功的拦截
                console.log("响应拦截器:");
                console.log(res)
                return res.data;
            },err=>{
                //响应失败的拦截
                console.log("响应拦截器[失败]:");
                console.log(err)
            }
        );
        //网络请求
        return instance(config)
}

这样的话,就可以将数据返回给main.js中进行打印可以处理。

  request({
    url:'/uaa/auth/form'
  }).then(res=>{
      //回调处理
      console.log(res)
  }).catch(err=>{
      console.log(err)
  })

  • 6
    点赞
  • 4
    评论
  • 21
    收藏
  • 一键三连
    一键三连
  • 扫一扫,分享海报

©️2021 CSDN 皮肤主题: 大白 设计师:CSDN官方博客 返回首页
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值