axios的详解、基本请求、实例和拦截器

冷不防 2023-06-19 11:22 5阅读 0赞

## axios的网络模块 ##

### 一、axios的介绍 ###

官方网站：[https://github.com/axios/axios][https_github.com_axios_axios]

[http://www.axios-js.com/][http_www.axios-js.com]

直接查看官方网站就行

**概念**：Axios是一个基于Promise（ES6中用于处理异步的）的HTTP库，用于浏览器和node.js中，[API][]。

**作用**：

浏览器中创建XMLHttpRequests

从node.js中创建http请求

支持Promise API

拦截请求和响应

转换请求数据和响应数据

取消请求

自动转换JSON数据

客户端支持防御XSRF

**安装命令**：npm install axios

**使用**：import axios from 'axios'

### 二、发送基本请求 ###

get请求：

axios对象调用get方法，`.then()`成功回调，`.catch()`失败回调。

post请求:

axios.post('/user', {
        firstName: 'Fred',
        lastName: 'Flintstone'
      })
      .then(function (response) {
        console.log(response);
      })
      .catch(function (error) {
        console.log(error);
      });

通用的请求：

axios({
      methods: 'post',
      url: 'http://jsonplaceholder.typicode.com/users',
      data: {
      name: 'qiurx'
      })
      .then(function (response) {
        console.log(response);
      })
      .catch(function (error) {
        console.log(error);
      })

### 三、axios创建实例 ###

let instance = axios.create({
       url: 'http://jsonplaceholder.typicode.com/users',
       imeout: 3000,
       method: 'post'
    });
    //即可调用方法，和axios实例同
    instance.get('http://jsonplaceholder.typicode.com/users').then(Response=>{
       console.log(Response);
    });

### 四、axios拦截器的使用 ###

您可以先拦截请求或响应，然后再由`then`或处理`catch`。

// Add a request interceptor
    axios.interceptors.request.use(function (config) {
        // Do something before request is sent
        return config;
      }, function (error) {
        // Do something with request error
        return Promise.reject(error);
      });
    
    // Add a response interceptor
    axios.interceptors.response.use(function (response) {
        // Any status code that lie within the range of 2xx cause this function to trigger
        // Do something with response data
        return response;
      }, function (error) {
        // Any status codes that falls outside the range of 2xx cause this function to trigger
        // Do something with response error
        return Promise.reject(error);
      });

### 五、实例展示 ###

1.目录结构

![20191206141349215.png][]

2.main.js文件

import Vue from 'vue'
    import App from './App'
    import axios from 'axios'
    
    Vue.config.productionTip = false
    
    new Vue({
      el: '#app',
      components: {App},
      template: '<App/>'
    })
    
    /*//1.axios的基本使用方式
    axios({
      url:'http://123.207.32.32:8000/home/multidata',
      //method:'post' 使用post的请求
    }).then(res=>{
      console.log(res);
    })
    
    axios({
      url:'http://123.207.32.32:8000/home/data',
      params:{
        type:'pop',
        page:'1'
      }
    }).then(res=>{
      console.log(res);
    })
    
    //2.axios发送并发请求
    axios.all([
      axios({
        url:'http://123.207.32.32:8000/home/multidata',
      }),
      axios({
        url:'http://123.207.32.32:8000/home/data',
        params:{
          type:'sell',
          page:5
        }
      })
    
    ]).then(results => {
      console.log(results);
      console.log(results[0]);
      console.log(results[1]);
    })
    
    //3.使用全局的axios和对应的配置在进行网络请求
     axios.defaults.baseURL = 'http://123.207.32.32:8000'
     axios.defaults.timeout = 5000
    
     axios.all([axios({
      url: '/home/multidata'
     }), axios({
       url: '/home/data',
       params: {
       type: 'sell',
         page: 5
       }
     })]).then(axios.spread((res1, res2) => {
      console.log(res1);
      console.log(res2);
    }))*/
    /*
    当请求多个不同的服务器的时候会出现问题
    axios.defaults.baseURL = 'http://222.111.33.33:8000'
    axios.defaults.timeout = 10000
    axios({
       url: 'http://123.207.32.32:8000/category'
    })
    
     */
    
    //4.创建对应的axios的实例
    /*
    const instance1 = axios.create({
      baseURL: 'http://123.207.32.32:8000',
      timeout: 5000
    })
    
    instance1 ({
      url: '/home/multidata'
    }).then(res=>{
      console.log(res);
    })
    
    instance1({
      url:'/home/data',
      params:{
        type:'pop',
        page:1
      }
    }).then(res=>{
      console.log(res);
    })
    */
    
    /*const instance2= axios.create({
      baseURL: 'http://222.111.300.32:8000',
      timeout: 10000,
      //headers:{}
    })*/
    
    //5.封装request模块
    import {request} from "./network/request";
    //调用request函数，传入参数，并进行回调
    /*
    //5.1
    request({
      url:'/home/multidata'
    },res => {
      console.log(res);
    },err=>{
      console.log(err);
    })*/
    
    /*//5.2
    request({
      baseConfig:{
        url:'/home/multidata'
      },
      success:function (res) {
        console.log('数据回调成功！！！');
        console.log(res);
      },
      failure:function (err) {
        console.log('数据回调不成功！！！');
        console.log(err);
      }
    })*/
    
    //5.3-4
    request({
      url: '/home/multidata'
    }).then(res => {
      console.log('数据回调成功！！！');
      console.log(res);
    }).catch(err => {
      console.log('数据不回调成功！！！');
      console.log(err);
    })

3.App.vue

<template>
      <div id="app">
        <img src="./assets/logo.png">
        <h2>也可以在App.vue中使用1、2、3</h2>
        <div>{
       {result}}</div>
        <hr>
        <HelloWorld></HelloWorld>
      </div>
    </template>
    
    <script>
      import HelloWorld from './components/HelloWorld'
    //1.导入框架
    import axios from 'axios'
    
    export default {
      name: 'App',
      components: {
        HelloWorld
      },
      //2.数据处理
      data(){
        return {
          result:''
        }
      },
      //3.在实例创建时发送请求
      created() {
        axios({
          url:'http://123.207.32.32:8000/home/multidata'
        }).then(res=>{
          //console.log(res);
          this.result =res;
        })
      }
    }
    </script>
    
    <style>
    
    </style>

4.request.js

import axios from 'axios'
    //创建网络请求模块
    //导入axios框架
    //5.4
    export function request(config) {
        //1.创建axios的实例
        const instance =axios.create({
          baseURL: 'http://123.207.32.32:8000',
          timeout: 5000
        })
        //2.axios的拦截器
        //2.1请求拦截的作用
        instance.interceptors.request.use(config =>{
          console.log('axios的request拦截')
          //console.log(config);
          //2.1.1比如config中的一些信息不符合服务器的要求
          //2.1.2比如每次发送网络请求时, 都希望在界面中显示一个请求的图标
          //2.1.3某些网络请求(比如登录(token)), 必须携带一些特殊的信息
          return config; //拦截之后的数据，要释放返回
        },error => {
          //console.log(error);
        })
        //2.2response响应拦截
        instance.interceptors.response.use(res=>{
          //console.log(res.data);
          //对响应的数据进行处理
          return res.data;
        },error => {
          console.log(error);
        })
        //3.发送真正的网络请求
        return instance(config)
    }
    
    
    
    /*//5.3
    export function request(config) {
      return new Promise((resolve,reject)=>{
        //1.创建axios的实例
        const instance =axios.create({
          baseURL: 'http://123.207.32.32:8000',
          timeout: 5000
        })
        //发送真正的网络请求
        instance(config)
          .then(res=>{
           resolve(res)
          })
          .catch(err=>{
            reject(err)
          })
      })
    }*/
    
    /*//5.2
    export function request(config) {
      //1.创建axios的实例
      const instance =axios.create({
        baseURL: 'http://123.207.32.32:8000',
        timeout: 5000
      })
      //发送真正的网络请求
      instance(config.baseConfig)
        .then(res=>{
          //console.log(res);
          config.success(res);
        })
        .catch(err=>{
          //console.log(err);
          config.failure(err);
        })
    }*/
    
    /*
    //5.1
    export function request(config,success,failure) {
      //1.创建axios的实例
      const instance =axios.create({
        baseURL: 'http://123.207.32.32:8000',
        timeout: 5000
      })
      //发送真正的网络请求
      instance(config)
        .then(res=>{
          //console.log(res);
          success(res);
        })
        .catch(err=>{
          //console.log(err);
          failure(err)
        })
    }*/

5.HelloWorld.vue

<template>
      <h2>
        HelloWorld的数据
        <hr>
        {
       {categories}}
      </h2>
    </template>
    
    <script>
      import axios from 'axios'
    
      export default {
        name: "HelloWorld",
        data() {
          return {
            categories: ''
          }
        },
        created() {
          axios({
            url: 'http://123.207.32.32:8000/category'
          }).then(res => {
            this.categories = res;
          })
        }
      }
    </script>
    
    <style scoped>
    
    </style>

具体的操作，详情。

[https_github.com_axios_axios]: https://github.com/axios/axios
[http_www.axios-js.com]: http://www.axios-js.com/
[API]: https://links.jianshu.com/go?to=https%3A%2F%2Fwww.kancloud.cn%2Fyunye%2Faxios%2F234845
[20191206141349215.png]: https://img-blog.csdnimg.cn/20191206141349215.png