axios笔记

1. 安装

npm install axios --save

2. 基本使用

• 首先,导入axios

  import axios from 'axios'
  

• 使用示例

  axios({
      url: 'http://123.207.44.32:8000/home/listdata',
      method: 'get'
  }).then(res => console.log(res))
  

  axios({
      url: 'http://123.207.32.32:8000/home/data?type=pop&page=1'
  }).then(resp => console.log(resp))
  

  // 等价于http://123.207.32.32:8000/home/data?type=pop&page=1
  axios({
      url: 'http://123.207.32.32:8000/home/data',
      // 针对get请求的参数拼接.
      params: {
          type: 'pop',
          page: 1
      }
  
  }).then(resp => console.log(resp))
  

  axios.get('http://123.207.32.32:8000/home/data', {
      params: {
          type: 'pop',
          page: 1
      }
  }).then(resp => console.log(resp))
  

3. Axios发送并发请求

• 发送并发请求的意思就是需要等请求1,请求2都返回结果之后,再进行之后的业务逻辑操作

• 示例

  // 并发请求
  axios.all([
      axios.get('http://127.0.0.1:8080/a'),
      axios.get('http://127.0.0.1:8080/b')]
  ).then(results => console.log(results))  // results封装了两次请求的结果
  

  // axios提供了方法, 将两个请求的结果进行拆分
  axios.all([
      axios.get('http://127.0.0.1:8080/a'),
      axios.get('http://127.0.0.1:8080/b')
  
  ]).then(axios.spread((resp1,resp2)=> {
      console.log(resp1);  // 请求a接口的结果
      console.log(resp2);  // 请求b接口的结果
  }))
  

4. 全局配置

axios.defaults.baseURL = 'http://127.0.0.1:8080';
axios.defaults.headers.common['Authorization'] = AUTH_TOKEN;
axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded';

// 因为有了全局配置URL,所以上面的并发请求示例就可以简写
axios.all([
    axios.get('/a'),
    axios.get(/b')]
).then(results => console.log(results))  // results封装了两次请求的结果

其余配置信息参考官网: http://www.axios-js.com/zh-cn/docs/

5.Axios实例

• 我们在使用axios发送请求时,直接使用axios.get('http://127.0.0.1:8080/index').then()就可以了, 其实这个axios是框架帮我们创建好的default实例. 查看源码

  declare const Axios: AxiosStatic;
  
  export default Axios;
  

  我们使用 import axios from 'axios' 导入的就是这个default Axios实例.

• 创建Axios实例

  import axios from 'axios'
  //创建Axios实例instance1
  const instance1 = axios.create({
      baseURL: "http://12.23.45.45:8080",
      timeout: 5000
  })
  
  instance1.get("/list").then(resp => console.log(resp));
  
  
  //创建Axios实例instance1
  const instance2 = axios.create({
      baseURL: "http://45.23.55.45:8080",
      timeout: 8000
  })
  instance2.get("/category").then(resp => console.log(resp))
  

6. 封装request网络请求工具

• 在项目根目录下创建一个network目录 ,然后在目录里面创建request.js

6.1 回调的第1种方式

• 请求工具类request.js, success处理请求成功的逻辑 , failure处理请求失败的逻辑

/**
 * 因为有可能导出多个axios实例, 所有不使用export default {}
 */
import axios from 'axios'

export function request1(config,success,failure) {
    // 1. 创建axios的实例
    const instance = axios.create({
        baseURL: "http://123.207.32.32:8000",
        timeout:5000
    })

    // 2. 发送真正的网络请求
    instance(config).then(
        res=>success(res)  // 成功回调
    ).catch(
        err=> failure(err)  // 失败回调
    )
}

• 调用自定义的request工具类

  import {request1} from "./network/request";
  
  request1(
             {
                  url: '/home/multidata'
             },
      res => console.log(res),
      err => console.log(err)
  )
  

6.2 回调的第2种方式

• request工具类代码 request.js

  import axios from 'axios'
  
  export function request1(config) {
      // 1. 创建axios的实例
      const instance = axios.create({
          baseURL: "http://123.207.32.32:8000",
          timeout:5000
      })
  
      // 2. 发送真正的网络请求
      instance(config.baseConfig).then(
          res=>config.success(res)  // 成功回调
      ).catch(
          err=> config.failure(err)  // 失败回调
      )
  }
  

• 调用方代码

  import {request1} from "./network/request";
  
  request1({
      baseConfig:{
          url:'/home/multidata'
      },
      success: function (res) {
          console.log(res);
      },
      failure:(err)=> console.log(err)
  })
  

• 总结: 6.2 只是将6.1的所有入参封装成了一个对象. 其实质还是一样的.

6.3 回调的第3种方式(Promise)

• request工具类request.js

  import axios from 'axios'
  export function request1(config) {
      return new Promise(((resolve, reject) => {
          const instance =  axios.create({
              baseURL: "http://123.207.32.32:8000",
              timeout:5000
          })
  
          instance(config).then(  // 其实instance就是一个Promise对象,所以才有了第4种回调方式
              res=> resolve(res)
          ).catch(
              err=> reject(err)
          )
      }))
  }
  

• 调用方

  import {request1} from "./network/request";
  
  request1({
      url:'/home/multidata'
  }).then(
      res=> console.log(res)
  ).catch(
      err=> console.log(err)
  )
  

6.4 回调的第4种方式(推荐)

• request工具类request.js

  import axios from 'axios'
  export function request1(config) {
      const instance =  axios.create({
     		 baseURL: "http://123.207.32.32:8000",
     		 timeout:5000
      })
  
      return instance(config)
  
  }
  

• 调用方

  import {request1} from "./network/request";
  
  request1({
      url:'/home/multidata'
  }).then(
      res=> console.log(res)
  ).catch(
      err=> console.log(err)
  )
  

7.拦截器

• 在请求或响应被 then 或 catch 处理前拦截它们

7.1 请求拦截

import axios from 'axios'


export function request1(config) {
  
        const instance = axios.create({
            baseURL: "http://123.207.32.32:8000",
            timeout: 5000
        })

        // 请求拦截
        instance.interceptors.request.use(
            config => {   // 请求成功拦截
            	// 做一些逻辑...
            	// 比如: 请求携带token
                console.log(config)
                return config
            },
            err =>{  // 请求失败拦截
           		 console.log(err)
           		 return Promise.reject(err)
            } 
        )

        return instance(config)

}

7.2 响应拦截器

export function request1(config) {
    const instance = axios.create({
        baseURL: "http://123.207.32.32:8000",
        timeout: 5000
    })
   
    // 响应拦截
    instance.interceptors.response.use(
        response => {  // 响应成功
            console.log(response)
            return response.data;  // 响应成功之后,只返回服务器响应的data数据. (对数据进行过滤)
        },
        err => {// 响应失败
            console.log(err)  
            return Promise.reject(err)
        }
    );
    return instance(config)


}

7.3 完整示例代码

• request工具类代码

import axios from 'axios'


export function request1(config) {
    const instance = axios.create({
        baseURL: "http://123.207.32.32:8000",
        timeout: 5000
    })
    // 请求拦截
    instance.interceptors.request.use(
        config => {   // 请求成功拦截
            console.log(config)
            return config
        },
        err => { // 请求失败拦截
            console.log(err)
            return Promise.reject(err)
        }
    )


    // 响应拦截
    instance.interceptors.response.use(
        response => {  // 响应成功
            console.log(response)
            return response.data;  // 响应成功之后,只返回服务器响应的data数据. (对数据进行过滤)
        },
        err => {// 响应失败
            console.log(err)
            return Promise.reject(err)
        }
    );
    return instance(config)


}

• 调用方代码

  import {request1} from "./network/request";
  
  request1({
      url:'/home/multidata'
  }).then(
      res=> {
          console.log(res)
      }
  ).catch(
      err=> console.log(err)
  )