axios

1. 网络请求方式的选择

• 终端下载 axios

npm install axios --save

2. axios 的基本使用

• 请求方式

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

3. axios 的相关配置

• 基本内容

import axios from "axios"
axios({
    url: "http://123.207.32.32:8000/home/multidata",
    method: "get",
}).then(res => {
    console.log(res)
})

// 专门针对get请求的参数拼接
axios({
    url: "http://123.207.32.32:8000/home/data",
    params: {
        type: "pop",
        page: 1,
    },
}).then(res => {
    console.log(res)
})

4. axios 的创建实例

• 发送并发请求（返回一个数组）

// 使用全局的axios和对应的配置在进行网络请求
axios.default.baseURL = "http://123.207.32.32:8000"
axios.default.timeout = 5000 // 超时时间
axios
    .all([
        axios({
            url: "/home/multidata",
        }),
        axios({
            url: "/home/data",
            params: {
                type: "sell",
                page: 5,
            },
        }),
    ])
    .then(
        // 1. 直接results
        results => {
            console.log(results)
        }

        // 2. spread 的使用方法
        // axios.spread((res1, res2) => {
        //     console.log(res1)
        //     console.log(res2)
        // })
    )

// 创建多个对应的axios的实例(较常用)
const instance1 = axios.create({
    baseURL: "http://123.207.32.32:8000",
    timeout: 5000, // 超时时间'
    headers: {},
})
instance1({
    url: "/home/multidata",
}).then(res => {
    console.log(res)
})
instance1({
    url: "/home/data",
    params: {
        type: "pop",
        page: 1,
    },
}).then(res => {
    console.log(res)
})

5. axios 的封装

/* request.js 文件 */
import axios from "axios"

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

    /* 2.拦截器 
    作用
      1. 当config中的一些信息不符合服务器的要求时
      2. 每次发送网络请求时，都希望界面中有显示一个请求的图标
      3. 某些网络请求(比如登录(token))，必须携带一些特殊的信息
     */
    // 2.1. 请求拦截
    instance.interceptors.request.use(
        config => {
            console.log(config) // 拦截
            return config // 返回拦截的信息
        },
        err => {
            console.log(err)
        }
    )
    // 2.2. 响应拦截
    instance.interceptors.response.use(
        res => {
            console.log(res)
            return res
        },
        err => {
            console.log(err)
        }
    )

    // 3. 发送真正的网络请求
    return instance(config) // 返回一个Promise
}