Vue-axios（十三）

作者: 小二哥很二 | 来源:发表于2020-05-22 09:37 被阅读0次

Vue-axios（十三）
模仿的音乐webapp
开发中的axios
Vue框架+axios使用详细教程
vue使用axios
vuecliPC项目笔记
vue 网络请求封装笔记
vue-Axios
vue-axios
vue-axios

Axios 是一个基于 promise 的 HTTP 库，可以用在浏览器和 node.js 中

特点：

从浏览器中创建 XMLHttpRequests
从 node.js 创建 http请求
支持 Promise API
拦截请求和响应
转换请求数据和响应数据
取消请求
自动转换 JSON 数据
客户端支持防御 XSRF

支持多种请求方式：

axios.request(config)
axios.get(url[, config])
axios.delete(url[, config])
axios.head(url[, config])
axios.options(url[, config])
axios.post(url[, data[, config]])
axios.put(url[, data[, config]])
axios.patch(url[, data[, config]])

一、axios的安装：需要安装运行时依赖，因为环境上线也要使用

1、cnpm install axios --save

二、axios发送网络请求

1、导入axios：在对应的组件中导入此插件
App.vue

import axios from 'axios'

2、axios全局配置进行网络请求，配置全局默认属性

<script>
  import axios from 'axios'

  export default {
    name:'App',
    components:{

    },
    data(){
      return{
        result:''
      }
    },
    created() {
      console.log('开始axios网络请求，初始化......');
      一、使用全局的配置在进行网络请求~~~~
      1.axios是支持promise的，会调用内部的resolv，所以可以直接在后面接then
      axios({
        url:'http://httpbin.org/headers'
      }).then(res=>{
        console.log(res)
      });

      2.配置全局默认属性
      axios.defaults.baseURL = 'http://httpbin.org';
      axios.defaults.timeout = 5000;
      axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded'

      3.axios发送并发请求
      axios.all([axios({
        url:'/headers'
      }),axios({
        url:'/get?show_env=1'
      })]).then(res => {
        console.log(res);
      })
</script>

3、在实际开发中，会有多个服务器，就会有多个域名，所以默认配置为全局不合适，都采用局部配置

二、使用局部配置进行网络请求创建axios实例
      1..创建对应的axios实例一
      const instance1 = axios.create({
        baseURL:'http://httpbin.org',
        timeout:9000
        // headers:'',可以配置headers
      });

      // 1.1..调用实例，在请求繁忙的时候，就会请求其它服务器，所以要分开
      instance1({
        url:'/headers'
      }).then(res =>{
        console.log(res);
        this.result = res;
      });

      instance1({
        url:'/get?show_env=1'
      }).then(res =>{
        console.log(res);
      });

      // 2..创建对应的axios实例二
      const instance2 = axios.create({
        baseURL:'http://112.19.241.84:30023/api/ambulance',
        timeout:10000
      });

      // 2.2..调用实例二的配置
      instance2({
        url:'/login'
      }).then(res =>{
        console.log(res);
      })

三、axios的封装

由于axios是插件，如果使用的时候在每个组件中都导入axios，那么在官方不维护的时候，就要做大量的修改，所以这里需要对axios做一个封装！、

1、文件位置：一般我们在src下创建一个api目录，里面存放接口的js文件

axios封装位置

2、requests.js文件编写
request.js

import axios  from 'axios'

export function request1(config) {
    // 一、第一种写法，promise
    // return new Promise((resolve, reject) => {
    //     // 1..创建axios实例
    //     const instance1 = axios.create({
    //         baseURL:'http://httpbin.org',
    //         timeout:6000
    //     });
    //
    //     // 2..发送真正的网络请求,将res和err传出去，进行异步回调
    //     instance1(config)
    //         .then(res =>{
    //             resolve(res)
    //         })
    //         .catch(err =>{
    //             reject(err)
    //         })
    // })

    // 二、第二种写法直接return
    // 创建axios实例
    const instance1 = axios.create({
        baseURL:'http://httpbin.org',
        timeout:6000
    });

    // 发送真正的网络请求
    return instance1(config);
}

为什么可以直接return instance1呢？请点击create看下源码~~

3、组件App.vue的调用requests.js
App.vue

<template>
  <div id="app">
    <h2>{{result}}</h2>
    <router-view/>
  </div>
</template>

<script>
  // 每个组件都导入第三方插件，维护很恼火，如果第三方插件不维护了，就凉凉
  // import axios from 'axios'
  import {request1} from "./api/requests";

  export default {
    name:'App',
    components:{

    },
    data(){
      return{
        result:''
      }
    },
    created() {
      console.log('开始axios网络请求，初始化......');
    ※三、使用封装的axios来请求接口
    request1({
        url:'/headers'
      }).then(res =>{
        console.log(res);
      }).catch(err =>{
        console.log(err);
      })
    }
  }
</script>

四、axios拦截器

axios拦截器分为请求时拦截request，和响应拦截response。同样可以设置全局和局部拦截

1、发送请求时拦截：
1）请求时拦截会做什么呢？
- 比如succ中的一些信息不符合服务器的要求，需要转换下再传过去,例如修headers
- 比如每次发送网络请求时，都希望在请求过程中，界面显示转圈圈的请求图标
- 某些网络请求，比如登录==》必须要携带token！！

requests.js

// 2..axios的拦截器
    // 全局的拦截器
    // axios.interceptors

    // 局部拦截器，里面传入2个参数，参数均是函数，一个成功Fulfilled，一个失败onRejected
    // 2.1..请求时拦截,以及为什么拦截，拦截后会做什么事情？
    instance1.interceptors.request.use(succ => {
        console.log(succ);
        // 1)比如succ中的一些信息不符合服务器的要求，需要转换下再传过去,例如修改headers
        // 2)比如每次发送网络请求时，都希望在请求过程中，界面显示转圈圈的请求图标
        // 3)某些网络请求，比如登录==》必须要携带token！！

        // 做了请求拦截之后，一定要return  succ信息，不然App.vue真正发送请求时候就拿不到,会报错
        return succ;
    },error => {
        console.log(error);
    })

※一定要加return，否则发送的请求被拦截了，对应的组件真正发送请求时候，就拿不到请求的数据

无return结果

2、响应拦截：有时候响应数据多，并不是我们都想要的，所以拦截取出所需数据

// 2.2..响应拦截
    instance1.interceptors.response.use(res =>{
        console.log(res);
        // return res;
        //也可以返回 响应数据的指定值
        return res.data;
    },error => {
        console.log(error);
    })

响应拦截