AXIOS的引入和封装

Axios 是一个用于在浏览器和 Node.js 中进行 HTTP 请求的流行库。以下是 Axios 的基本使用说明，包括安装和定义。

一、安装

pnpm add axios

二、使用

import axios from 'axios';
axios.get('http://139.186.166.35:3001/api/testGet')
  .then(response => {
    console.log('Response:', response.data);
  })
  .catch(error => {
    console.error('Error:', error.message);
  });

axios.post('http://139.186.166.35:3001/api/testPost', postData)
  .then(response => {
    console.log('Response:', response.data);
  })
  .catch(error => {
    console.error('Error:', error.message);
  });

三、axios的使用方法补充

axios除了直接使用它实例上的方法，还可以通过配置的方式进行使用axios({})，传入一个对象，这个对象可以有如下属性：

url（字符串）: 请求的 URL。
method（字符串）: 请求的 HTTP 方法，例如 'get'、'post'等。
params（对象）: 请求的 URL 参数，会被添加到 URL 后面,Get请求参数。
data（对象）: 请求的数据，通常用于 POST 请求的请求体，post请求参数。
headers（对象）: 请求头，可以设置各种头信息，例如 'Content-Type'、'Authorization'等。
timeout（数字）: 请求超时时间，单位是毫秒。

baseURL（字符串）: 将被添加到 url 前面的基础 URL。

axios({
    url:'http://139.186.166.35:3001/api/getUserName',
    method:'get',
    params:{id:1},
    timeout: 10000,
    headers: {
    'Content-Type': 'application/json'
    // 这里还可以设置其他的请求头
    }
})

axios({
    url:'http://139.186.166.35:3001/api/createUser',
    method:'post',
    data:{id:1},
    timeout: 10000,
    headers: {
    'Content-Type': 'application/json'
    // 这里还可以设置其他的请求头
    }
})

表示请求类型有误，检查请求类型

如果如上使用axios，会出现一个问题，有一些配置项，会被重复书写，所以我们可以使用axios.create这个方法，来创建一个axios的实例，将配置项配置到实例里，这样，我们就可以不用每次都重复去写配置项了，而是每次请求直接使用这个axios创建的实例就ok。

const instance = axios.create({
  baseURL: "http://139.186.166.35:3001", // 设置基本的 URL
  timeout: 5000, // 设置超时时间，单位是毫秒
});
function getData() {
  instance({
    method: "get",
    url: "/api/getUserName",
    params: { id: "1" },
  }).then((res) => {
    console.log(res);
  });
}
getData();

四、axios的封装

axios企业级使用一般会做三层封装

第一层是工具层：封装axios请求实例，统一配置项，并暴露给其他模块使用

第二层是请求层：封装请求的接口和请求的函数

第三层是应用层：组件页面的使用

工具层axios的实例，我们一般都会封装到项目中的src/utils/request.js里面，然后需要用到的地方，直接import来用

// src/utils/request.js
import axios from "axios";

const axiosInstance = axios.create({
  timeout: 10000,
  baseURL: "http://139.186.166.35:3001",
});

export default axiosInstance;

五、请求层请求的统一封装

在axios封装了以后，我们就可以不让axios的实例散落在项目中的各处，但是还有一个问题亟待解决，那就是我们的请求地址，散落到了项目中的各个地方，那么，怎么解决呢？那就是对他们进行封装，把他们按类型、模块进行归档，我们一般会在项目中新增 src/services/中新增我们各个模块的请求

// src/services/menu.js
import request from "../utils/request.js";

const api = {
  getMenuList: "/api/getUserList",
};

export const getMenuList = (params = {}) => {
  return request({ method: "get", params });
};

这样封装好了以后我们就可以在其他地方直接使用就可以

import {getMenuList} from '../services/menu.js'

getMenuList().then(res => console.log(res))

proxy 代理解决跨域问题

一般情况数据是浏览器访问服务器。使用代理之后，相当于浏览器访问本地起的服务器 http://localhost:5173/，然后，本地的代理服务去访问远程的服务器，获得数据之后再返给浏览器

//根目录下面的vite.config.js
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'

// https://vite.dev/config/
export default defineConfig({
  plugins: [vue()],
  server:{//本地服务配置
    port:8000,//本地跑服务的端口号
    proxy:{//代理配置
        // 键值对的方式配置代理访问
        // 键名就是再工具层 配置的baseURL
        '/apis':{
          target:'http://139.186.166.35:3001',//远程服务器地址
          changeOrigin:true,//是否允许跨域
          rewrite:(path) => path.replace(/^\/apis/, '') //重写地址栏的数据  path代表路径  replace是将地址中 /apis  换成 ''
        }
    }
  }
})

//工具层函数
// 1.工具层封装
// 封装axios的请求实例
// 1.映入axios
import axios from 'axios'
// 2.创建实例
const instance = axios.create({
    // baseURL:'http://139.186.166.35:3001',//服务器地址
    // 代理访问
    baseURL:'/apis',
    timeout:10000
})
// 3.暴露出这个实例
export default instance

六、使用async和await来优化请求

在es6发布的时候，引入了promise，得到了前端开发者的认同，但是在用了一段时间，这种偏异步的写法总是会造成很大的心智负担，大家总会考虑，.then内部是否应该返回一个值，下一个.then内部是否拿到的是一个promise等等

所以就有人提出，是否有一种可能，我们可以把异步的方法，当成同步来写呢？async await语法糖就应运而生

翻译：async，异步的、await，等待，他们结合起来就可以让异步操作变成同步

import {getMenuList} from '../services/menu.js'
// 没用之前
function getData(){
    getMenuList().then(res => console.log(res))
}
// 用了以后
async function getData2(){
    const res = await getMenuList()
    console.log(res)
}