Axios网络请求

Axios 是一个基于 promise 的 HTTP 库，可以用在浏览器和 node.js 中

安装Axios

npm install --save axios

GET请求

<template>
  <div>
    <p>网络请求</p>
    <p v-for="item in data" :key="item">
    <h3>{{ item.title }}</h3>
    <p>{{ item.content }}</p>
    </p>
  </div>
</template>

<script lang="ts" setup>
import axios from "axios"
import { ref, onMounted } from "vue";
const data = ref()
onMounted(() => {
  axios.get("http://iwenwiki.com/api/blueberrypai/getIndexBanner.php")
    .then(res => {
      data.value = res.data.banner
    })
    .catch(error => {
      console.log(error)
    })
})
</script>

带参数GET请求

axios.get("http://iwenwiki.com/api/blueberrypai/getSongInfo.php?song=mo")
    .then(res => {})
    .catch(error => {})

axios.get("http://iwenwiki.com/api/blueberrypai/getSongInfo.php?song=mo",{
    params:{
        song:"mo"
    }
}).then(res => {})
.catch(error => {})

POST请求

<template>
  <div>
    <p>网络请求</p>
    <p>{{ data }}</p>
  </div>
</template>

<script lang="ts" setup>
import axios from "axios"
import { ref, onMounted } from "vue";
import qs from "querystring"
const data = ref()
onMounted(() => {
  axios.post("http://iwenwiki.com/api/blueberrypai/login.php", qs.stringify({
    user_id: "iwen@qq.com",
    password: "iwen123",
    verification_code: "crfvw"
  }))
    .then(res => {
      data.value = res.data
    })
    .catch(error => {
      console.log(error)
    })
})
</script>

注意

axios POST接收的网络请求参数需要进行格式转化

需求的格式 username=iwen

npm install --save querystring

并发请求

在真实场景中，有可能会需要一次性获取多个网络请求的结果

处理并发请求的助手函数:

• axios.all(iterable)
• axios.spread(callback)

<template>
  <h3>网络请求_合并并发请求</h3>
</template>
<script lang="ts" setup>
import { onMounted } from "vue"
import axios from "axios"
function getBanner() {
  return axios.get("http://iwenwiki.com/api/blueberrypai/getIndexBanner.php")
}
function getChating() {
  return axios.get("http://iwenwiki.com/api/blueberrypai/getIndexChating.php")
}
onMounted(() => {
  axios.all([getBanner(), getChating()])
    .then(axios.spread((banner, chating) => {
      console.log(banner.data, chating.data);
    }))
})
</script>

跨域配置

在工作的真实场景中，跨域是常见问题，所以我们需要解决跨域问题

import { fileURLToPath, URL } from 'node:url'
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import vueJsx from '@vitejs/plugin-vue-jsx'

export default defineConfig({
  plugins: [
    vue(),
    vueJsx(),
  ],
  resolve: {
    alias: {
      '@': fileURLToPath(new URL('./src', import.meta.url))
    }
  },
  server: {
    proxy: {
      '^/api': {
        target: 'http://iwenwiki.com', // 后端服务实际地址
        changeOrigin: true, //开启代理
        rewrite: (path) => path.replace(/^\/api/, '')
      }
    }
  }
})

使用

<template>
  <h3>网络请求</h3>
  <ul>
    <li v-for="item in list.info" :key="item.id">
      <p>{{ item.title }}</p>
    </li>
  </ul>
</template>
<script lang="ts" setup>
import { onMounted, reactive } from "vue"
import axios from "axios"
const list = reactive<any>({
  info: []
})
onMounted(() => {
  axios.get("/api/api/FingerUnion/list.php")
    .then(res => {
      list.info = res.data.data
    })
    .catch(error => {
      console.log(error);
    })
})
</script>

注意

可配置多个proxy代理

proxy: {
    '^/api': {
        target: 'http://iwenwiki.com', // 后端服务实际地址
        changeOrigin: true, //开启代理
        rewrite: (path) => path.replace(/^\/api/, '')
    },
    '^/api1': {
        target: 'http://mi.com', // 后端服务实际地址
        changeOrigin: true, //开启代理
        rewrite: (path) => path.replace(/^\/api1/, '')
    },
}

配置后所有接口一律换成重写的字段，如http://mi.com/getUser要写成/api1/getUser

封装

新建src/api/request.ts文件

import axios from 'axios'
const errorHandle = (status: any, info: any) => {
  switch (status) {
    case 400:
      console.log('参数错误')
      break
    case 401:
      console.log('身份认证失败')
      break
    case 403:
      console.log('权限不足')
      break
    case 404:
      console.log('请检查网路请求地址')
      break
    case 500:
      console.log('服务器发生错误')
      break
    case 502:
      console.log('服务器无响应')
      break
    default:
      console.log(info)
      break
  }
}
const instance = axios.create({
  timeout: 50000
})
const headers = {
  'Content-Type': 'application/json',
  Authorization: ''
}
// 拦截器:请求拦截
instance.interceptors.request.use(
  (config: any) => {
    config.headers = headers
    return config
  },
  (error: any) => Promise.reject(error)
)
// 拦截器:响应拦截
instance.interceptors.response.use(
  (response: any) =>
    response.status === 200 ? Promise.resolve(response.data) : Promise.reject(response.data),
  (error: any) => {
    const { response } = error
    if (response) {
      errorHandle(response.status, response.info)
    } else {
      console.log('网络请求被中断了')
    }
  }
)
export default instance

新建src/api/index.ts文件

import axios from "./request"
const base = {
    baseUrl: "http://localhost:3000",   //主路径
    login: "/login",           // post接口
    selectAdmin: "/selectAdmin",    // get接口
}
const api = {
    login(params: any) {
        return axios.post(base.baseUrl + base.login, params);
    },
    selectAdmin(params: any) {
        return axios.get(base.baseUrl + base.selectAdmin, {params});
    }
}
export default api

使用

import api from "../../api/index"
api.selectAdmin({
	name: "jikezc",
}).then((res: any) => {
	console.log(res);
})