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)
  )
posted on 2020-06-07 11:37  显示账号  阅读(266)  评论(0)  编辑  收藏  举报