axios的使用

1.首先引入axios

 yarn add axios

2.然后axios最常见的用法axios.create()

首先是创建一个axios的实例，加上默认配置

import axios from "axios";

const http = axios.create({
    // 设置请求的根路径
    baseURL: '/api',
    // 设置超时时间
    timeout: 5000,
    // 设置请求头
    headers: {}
})

3.可以在public下面新建json目录然后 任意文件名.json

然后按照json的格式随便写一点数据

4.将axios.create里的baseUrl的根路径指向项目的[http://localhost:(你的端口](https://link.juejin.cn?target=http%3A%2F%2Flocalhost%3A(%25E4%25BD%25A0%25E7%259A%2584%25E7%25AB%25AF%25E5%258F%25A3 "http://localhost:(%E4%BD%A0%E7%9A%84%E7%AB%AF%E5%8F%A3") 如 :5173)作为根路径

并且将http导出

import axios from "axios";

const http = axios.create({
    // 设置请求的根路径
    baseURL: 'http://localhost:5173',
    // 设置超时时间
    timeout: 5000,
    // 设置请求头
    headers: {}
})


export default http

5.src -> 新建api目录 -> useDemoApi.ts

api目录用来分类请求 比如我的 useDemoApi.ts 是用来存放测试的api

第一种用法

import http from "../utils/http";

export const useDemoApi = () => {

    const getDemo = () => {


        return http(
            {
                url: '/json/demo.json',
                method: 'get',
                params: {
                    id: 1
                }
            }
        )
    }


    return {
        getDemo
    }

}

在页面使用它

可以看到拿到了数据

第二种用法

在App.vue页面的使用不用更改

import http from "../utils/http";

export const useDemoApi = () => {

    const getDemo = () => {
        return http.get(
            '/json/demo.json',
            {
                params: {
                    id: 1
                }
            }
        )
    }


    return {
        getDemo
    }

}

可以看到依然能拿到而且一模一样

具体的使用，看个人爱好以及团队的统一

6.你会发现打印的数据有很多层每次要去获取真实数据都需要.data.data才能拿到json的数据 这时候可以使用拦截器来处理

拦截器分为两种

一种是响应拦截器(顾名思义 他就是在请求成功后的时候可以对请求到的数据做一些操作)

例 响应拦截器(不做任何处理)

import axios from "axios";

const http = axios.create({
    // 设置请求的根路径
    baseURL: 'http://localhost:5173',
    // 设置超时时间
    timeout: 5000,
    // 设置请求头
    headers: {}
})

// 响应拦截器
http.interceptors.response.use((res) => {
    return res
})


export default http

不做任何处理会发现拿到的数据是一模一样的

从这里我们可以直接在返回res的时候做一下处理res.data

import axios from "axios";

const http = axios.create({
    // 设置请求的根路径
    baseURL: 'http://localhost:5173',
    // 设置超时时间
    timeout: 5000,
    // 设置请求头
    headers: {}
})

// 响应拦截器
http.interceptors.response.use((res) => {
    return res.data
})


export default http

你会发现数据少了一层data包裹的了(所以在这里返回的时候统一处理数据结构就可以了,比如解决包裹层级太多或者获取响应状态码做message提示之类的)

我们可以打印一下res

它包含了请求地址的一些响应配置

一种是请求拦截器(顾名思义 他就是在发起请求前对一些请求的配置做一些操作)

我们可以直接添加这个请求拦截器并且打印一下看看他是啥

import axios from "axios";

const http = axios.create({
    // 设置请求的根路径
    baseURL: 'http://localhost:5173',
    // 设置超时时间
    timeout: 5000,
    // 设置请求头
    headers: {}
})

// 响应拦截器
http.interceptors.response.use((res) => {
    return res.data
})
// 请求拦截器
http.interceptors.request.use((config) => {
    console.log("请求拦截器",config)
    return config
})


export default http

你会看到这里面包含了本次请求的所有信息，基础的路径，请求头，参数啥都可以看到一般除去防抖节流的时候(意思就是防止用户多次点击发送请求造成堵塞)我们不做操作

从打印的响应拦截器的res和请求拦截的config可以得出结论

config是自己发送请求时的配置与参数 res是你获取的那个请求的响应参数