axios学习笔记

一、axios框架的基本使用

1. 安装

在终端： npm install axios --save

2. main.js中引用

import axios from 'axios'

axios({
  url: 'https://httpbin.org/headers'
  // method: 'get' / 'post'  设置请求方式，不设置的时候默认为get

  //如果是用get请求又不想将url拼接的太长的话（get请求时直接拼接在url中的），可以使用params如下方式写，框架内部会自动拼接到url中。
  //这是专门针对  get请求的参数拼接
  // params: {
  //   type: 'xxx',
  //   page: 1
  // }
}).then(res => {
  console.log(res)
})

//请求方式也可以这样写：
// axios.get()  
// axios.post()

二、axios发送并发请求

axios.all([axios({
  url: 'https://httpbin.org/headers'
}), axios({
  url: 'https://httpbin.org/headers',
  params: {
    type: 'xx',
    page: 5
  }
})]).then(results => {
  console.log(results[0])
  console.log(results[1])
}))

axios.all的返回结果是一个数组，可以使用axios.spresd将数组[res1,res2]展开为res1,res2

找不同:

axios.all([axios({
  url: 'https://httpbin.org/headers'
}), axios({
  url: 'https://httpbin.org/headers',
  params: {
    type: 'xx',
    page: 5
  }
})]).then(axios.spread((res1, res2) => {
  console.log(res1)
  console.log(res2)
}))

三、axios配置信息相关

在开发中，很多参数都是固定的，这个时候我们可以进行一些抽取，也可以利用axios的全局配置。
语法：axios.defaults.xxx = ''
eg：全局配置根路径：axios.defaults.baseURL = ‘https://httpbin.org’
全局配置超时时间：axios.defaults.timeout = 5000（单位：毫秒）
常见的配置选项：（用哪个查那个）

注意！：当 method：‘get’ 即是get请求时用params来进行请求拼接
当 method：‘post’ 即是post请求时，用data来写请求体

四、创建对应的axios实例

不再用全局的配置了

const instance1 = axios.create({
  baseURL: 'https://httpbin.org',
  timeout: 5000
})

instance1({
  url: '/headers'
}).then(res => {
  console.log(res)
})

五、封装一个requset模块

新建network在其下requset.js文件夹内封装

import axios from 'axios'

export function request(config, success, failure){
	//1.创建axios的实例
    const instance = axios.create({
        baseURL: 'https://httpbin.org',
        timeout: 5000
    }) 
    
    //发送真正的网络请求
    instance(config).then(res => {
        success(res);
    })
    .catch(err => {
        failure(err);
    })
}

可直接在main.js中使用

import { request } from './network/request'

request({
  url: '/headers'
}, res => {
  console.log(res);
}, err => {
  console.log(err);
})

六、axios拦截器的使用

拦截器分为 请求拦截 和 响应拦截。

又分别分为 请求成功拦截 请求失败拦截 响应成功拦截 响应失败拦截。

请求拦截：

//请求拦截的作用
    instance.interceptors.request.use(config => {
        console.log(config);
        //1.比如config中的一些信息不符合服务器的要求

        //2.比如每次发送网络请求时，都希望在页面中显示一个请求的图标

        //3.某些网络请求（比如登录（token）），必须携带一些特殊的信息
        return config;
    }, err => {
        console.log(err);
    })

响应拦截

//2.2响应拦截
    instance.interceptors.response.use(res => {
        // console.log(res);
        return res.data;
    }, err => {
        console.log(err)
    })