axios 使用

一、安装

使用 npm：

npm install axios

使用 bower：

bower install axios

使用 yarn：

yarn add axios

使用 jsDelivr CDN：

<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>

使用 unpkg CDN：

<script src="https://unpkg.com/axios/dist/axios.min.js"></script>

二、创建请求

新建一个 js / ts 文件，引入 axios

import axios from "axios";

在该文件中创建请求

export const baseUrl = "URL";
const axiosConfig = {
    baseURL: baseUrl,
    // HTTP请求超时时间为3秒
    timeout: 3000,
    // 设置请求头
    headers: {
        "Content-Type": "application/json"
    }
}
// 创建一个 baseAxios 请求
export const baseAxios = axios.create(axiosConfig);

三、使用方法

首先在要用到请求的文件中引入该请求

import { baseAxios } from "路径";

根据 Apifox 接口参数决定传入参数即返回响应

get 接口

baseAxios.get("/api/lottery", {
        headers: {
            token: token,//请求的参数
        },
    }).then((res) =>{...});

post 接口

// formdata 为要传的参数
const formdata = {
        id: form.id,
        username: form.username,
        introduction: form.introduction,
        major: form.major,
        college: form.college,
        phone: form.phone,
        gender: form.gender,
      };
      baseAxios.post("/user/register", formdata).then(() => {});

四、注意

在返回的响应中若想取得其中的 records 值，则：

第一个 data 是服务器返回的，第二个 data 是接口返回的

let array = res.data.data.records;