vue axios封装和详细使用

网络模块封装axiosajax i/o system使用自己已经封装好的模块，进行网络请求。假如第三方网络请求框架有一天，出现了不维护申明，那么对于项目来说就是很严重的问题。那么，开发中有啥网络请求选择呢？如下：方式1：Vue中发送网络请求有非常多的方式，那么，在开发中，如何选择呢？传统的Ajax是基于XMLHttpRequestP(XHR)到为什么不用它呢？非常好解释，配首和调用方式等非常混乱

想飞的鳍鱼

3088人浏览 · 2020-07-06 21:01:29

想飞的鳍鱼 · 2020-07-06 21:01:29 发布

网络模块封装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的拦截器的使用

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

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

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

发送网络请求到服务器成功
请求网络请求到服务器失败
服务器响应成功
服务器响应响应失败

//使用拦截器 拦截请求
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)
  })

Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^

Vue

echarts堆叠柱状图

Vue

Error in v-on handler: "TypeError: Cannot read properties of undefined (reading 'current')"

这是一个 Vue.js 错误，报错信息提示在 v-on 处理程序中出现了错误：“TypeError: Cannot read properties of undefined(读取 'current')”。这意味示在您的代码中，试图读取一个未定义的变量 'current'。您需要检查您的代码，确保 'current' 已正确定义并初始化。...

Vue

所有评论(0)

查看更多评论

想飞的鳍鱼

@CharLINHeng

已为社区贡献3条内容