学习使用axios

简言

什么是axios?
Axios 是一个基于 promise 的 HTTP 库，可以用在浏览器和 node.js 中。
它有以下特性：

• 从浏览器中创建 XMLHttpRequests
• 从 node.js 创建 http 请求
• 支持 Promise API
• 拦截请求和响应
• 转换请求数据和响应数据
• 取消请求
• 自动转换 JSON 数据
• 客户端支持防御 XSRF

安装

npm install axios

配置

创建配置文件

安装好后，创建配置文件，在src下哪个文件夹都行，我放在了plugins下，你也可以新建一个文件存放axios。

基础配置

import axios from 'axios'


//  创建axios实例
const instance = axios.create({
  //  baseurl
  baseURL: 'https://api.example.com',
  timeout: 5000,
  //  请求头
  headers: {
    Authorization: '123'
  }
})

//  请求拦截
instance.interceptors.request.use((config: any) => {
  config.headers.Authorization = '123'
  return config
}, (err) => {
  return Promise.reject(err)
})

//  响应拦截
instance.interceptors.response.use((response) => {
  return response
}, (err) => {
  return Promise.reject(err)
})
export default instance

全局引入

使用

使用mock

可以使用mock来模拟数据请求的过程。vite生态有一个vite-plugin-mock插件，可以使用mockjs来模拟数据。

npm install mockjs vite-plugin-mock -D

创建mock和配置

创建mock文件夹，存放mock数据。

mock入口文件,index.ts示例：

import type { MockMethod } from 'vite-plugin-mock'

export default [{
  url: '/api/getUsers',
  method: 'get',
  response: () => {
    return {
      code: 200,
      message: 'ok',
      data: {
        'list|10': [
          {
            id: '@guid',
            name: '@cname',
            'age|20-30': 23,
            'job|1': ['前端工程师', '后端工程师', 'UI工程师', '需求工程师']
          }
        ],
        total: 10
      }
    }
  }
},
{
  url: '/api/login',
  method: 'post',
  response: () => {
    return {
      code: 200,
      message: 'ok',
      data: {
        name: 'zsk',
        info: {
          age: 18
        }
      }
    }
  }
}


] as MockMethod[]

vite配置文件内使用vite-plugin-mock插件，有proxy代理，可以不使用代理，因为是在项目同一个本地服务下模拟的请求：

页面使用axios请求

由于前面全局注册了axios,使用选项式时可直接使用axios,组合式时需要引入，注入和直接引入axios配置文件都行，我这里使用了注入。

<template>
  <div class="container">
    <a-button class="btn" @click="btnClick">点击请求数据</a-button>
  </div>
  <div>
    <div v-for="item of list">
      {{ item }}
    </div>
  </div>
</template>
<script lang="ts" setup>
import { reactive, toRefs, onBeforeMount, onMounted, ref, inject } from "vue";
import { useStore } from "@/store/index";
import type { Axios } from "axios";
const axios = inject("$axios") as Axios;

//  定义数据
const store = useStore();
store.setUserInfo({
  name: "zsk",
  info: "balabala...",
} as any);

//
const list = reactive([]) as any;
const btnClick = async () => {
  list.splice(0);
  const { data } = await axios.get("/api/getUsers");
  list.push(...data.list);
};
</script>
<style lang="less" scoped></style>

另外，简单改了下返回拦截配置，在配置那儿提前解构一层data。

效果：

结语

这里只是简单使用了下axios,在实际项目中你可能会更改请求头，以携带token,也可能会做些拦截，例如token失效后操作等。axios封装的get和post请求传参方式有多种形式，如想了解请到官网了解。