axios二次封装(配置和操作)

1. 二次封装的意义:

当然有很多,目前先知道:方便统一管理

1.1 在src中新建一个目录utils,request(api).js文件

首先:
     我们需要下载axios插件

$ npm install axios

1.2 在request(api)文件夹中写入

1.导入axios文件
2.创建一个axios对象
3.添加请求拦截器
4.添加响应拦截器
5.导出axios对象

//导入axios文件
import axios from 'axios'
// 1.创建一个axios对象
const instance = axios.create({
    // 基础的url地址
    baseURL: '/api',
    // 超时的时间
    timeout: 5000,
    headers: { 'X-Custom-Header': 'foobar' }
});

// ps:先执行请求拦截器,在执行响应拦截器
// 原因:前端进行请求后端才可以根据请求内容作出响应
// 2.添加请求拦截器 ====> 前端给后端的参数 [还没到后端响应]
instance.interceptors.request.use(function (config) {
    // 在发送请求之前做些什么
    // 列举:用户的登录的状态
        // 登录的判断,如果用户是登录状态,会在headers中把用户的token传递给后端

    return config;
}, function (error) {
    // 对请求错误做些什么
    return Promise.reject(error);
});

//3. 添加响应拦截器 ====> 后端给前端的数据 [后端返回给前端]
instance.interceptors.response.use(function (response) {
    // 2xx 范围内的状态码都会触发该函数。
    // 对响应数据做点什么
    // 后端给前端数据的时候,会有code码
    return response;
}, function (error) {
    // 超出 2xx 范围的状态码都会触发该函数。
    // 对响应错误做点什么
    return Promise.reject(error);
});
// 最终返回的axios对象
export default instance;

1.3 axios封装完后使用:

import request from '@/utils/request.js'

    created() {
     // 默认是get请求
        api({
            url: "/playlist/update"
        }).then(res => {
            console.log(res)
        })
        // 修改为post
        api({
            url: "/playlist/update",
            //修改post
            method: "post",
            //参数
            data: {
                pageName: 1,
                pageSize: 4
            }
        }).then(res => {
            console.log(res)
        })
    }

2. api的解耦:

2.1 api解耦的意义:

1.为了同一个接口可能多次使用,name封装起来直接调用就可以
2.为了方便api请求统一的管理

2.2 某一个.js文件

ps: 导入axios二次封装的js文件

import request from '@/utils/request.js';
// 更新歌单标签
export function playList(params) {
    return api({
        url: '/playlist/tags/update',
        method: "post",
        params

    })
}

// 热搜列表(详细)
export function search() {
    return api({
        url: '/search/hot/detail',

    })
}

2.3 api的解耦使用:

ps:用那个函数直接导入使用即可

import { playList, search } from '@/service/api2.js';
    created() {

        // 更新歌单标签
        playList({ id: 24381616, tags: "学习" }).then(res => {
            console.log(res)
        })

        // 热搜列表(详细)
        search().then(res => {
            console.log(res)
        })
    }

总结: 现在就了解到这里 , 有什么不懂得可以私信细讲,有大佬的可以给小作者分享一下更深入的,thank哟