[JavaScript知识库]axios二次封装

? ? ? ? 针对vue项目中使用

1、axios二次封装

? ? ? ? 在src目录下新建一个utils目录,来存放我们二次封装的axios,取名request.js

//二次封装axios,方便统一管理使用

//引入axios
import axios from "axios";
const requests = axios.create({
    baseURL: 'http://localhost:3000',
    timeout: 5000
})

// 添加请求拦截器
requests.interceptors.request.use(
    function (config) {
        // 在发送请求之前做些什么
        return config;
    }
)

// 添加响应拦截器
requests.interceptors.response.use(
    function (response) {
        // 2xx 范围内的状态码都会触发该函数。
        // 对响应数据做点什么
        return response;
    },
    function (error) {
        // 超出 2xx 范围的状态码都会触发该函数。
        // 对响应错误做点什么
        return Promise.reject(error);
    }
);

export default requests

2、api解耦

? ? ? ? 在src目录下新建一个api目录存放我们解耦的api,取名use.js文件

????????api解耦为了同一个接口可能多次使用,那么封装起来直接调用就行,也为了方便api统一管理

//引入我们二次封装的axios

import requests from "@/utils/request";

//获取学生信息
export function getuse() {
    return requests({
        url: '/xuesheng'
    })
}

//相当于上面简写吧,感觉这个简单明了
// export const getuse = () => requests({ url: '/xuesheng'})

//新增学生
export function postuse(data) {
    return requests({
        url: '/xuesheng',
        method: 'POST',
        data: data
    })
}

3、在组件中使用

<template>
  <div></div>
</template>

<script>
//引入我们解耦的api
import { getuse, postuse } from "@/api/use";

export default {
  created() {
    //调用函数,使用就行
    //这是获取学生信息
    getuse().then((response) => {
      console.log(response.data);
    });
    //新增学生
    postuse({
        nianlin: '20',
        name: "小帅比",
    }).then(
        (response) => {
            console.log(response.data);
        }
    );
  },
};
</script>

配置 @

? ? ? ? @ 代表 src目录

在根目录新建 jsconfig.json 文件,进行以下配置就行

{
    "compilerOptions":{
        "baseUrl":"./",
        "paths":{
            "@/*":[
                "src/*"
            ]
        }
    }
}

?设置代理

? ? ? ? 在vue中前端处理跨域问题,要配置代理跨域,但是只在开发阶段使用

? ? ? ? 在根目录新建 vue.config.js 文件,进行以下配置

module.exports = {
    //配置代理跨域
    devServer: {
        proxy: 'http://localhost:3000'
    }
}