Axios 网络请求库

官网：https://github.com/axios/axios

1.安装依赖

# Axios 需要单独安装 
npm install --save axios

如果不加--save，则以全局的形式导入

# post 请求参数是需要额外处理，安装依赖; 参数转换格式: qs.stringify({})
npm install --save querystring

如果不加--save，则以全局的形式导入

②组件中引入：import { axios } from "axios"
③GET请求
axios({
    method: "get",
    url: "http://iwenwiki.com/api/blueberrypai/getChengpinDetails.php"
}).then(res => {
    console.log(res.data);
})

axios.get("http://iwenwiki.com/api/blueberrypai/getChengpinDetails.php")
.then(res => {
    console.log(res.data);
})
④POST请求
axios({
    method: "post",
    url: "http://iwenwiki.com/api/blueberrypai/login.php",
    data: qs.stringify({
        user_id: "iwen@qq.com",
        password: "iwen123",
        verification_code: "crfvw"
    })
}).then(res =>{
    console.log(res.data);
})

axios.post("http://iwenwiki.com/api/blueberrypai/login.php", qs.stringify({
    user_id: "iwen@qq.com",
    password: "iwen123",
    verification_code: "crfvw"
})).then(res => {
    console.log(res.data);
})

2. Axios 网络请求封装

在实际应用过程中，一个项目中的网络请求会很多，此时一般采取的方案是将网络请求封装起来。

①我们先创建 src/utils/request.js 文件，用来存储网络请求对象 axios。
mport axios from "axios"
import qs from "querystring"

const errorHandle = (status,info) => {
    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:5000 // 网络请求的公共配置: 请求超时时间
})

// 发送数据前的拦截器
instance.interceptors.request.use(
    config => {
        if(config.method === "post") {
            config.data = qs.stringify(config.data);
        }
        return config; // 包括网络请求的所有信息
    },
    error => Promise.reject(error)
)
// 获取数据前的拦截器
instance.interceptors.response.use(
    response => response.status === 200 ? Promise.resolve(response) : Promise.reject(response),
    error => {
        const { response } = error;
        errorHandle(response.status, response.info);
    }
)

export default instance;
②创建 src/api/path.js 用来存放网络请求路径；创建 src/api/index.js 用来存放网络请求路径。
// path.js
const base = {
    baseUrl:"http://iwenwiki.com",
    chengpin:"/api/blueberrypai/getChengpinDetails.php"
}
export default base

// index.js
import path from "./path"
import axios from "../utils/request"

export default {
    getChengpin() {
        return axios.get(path.baseUrl + path.chengpin);
    }
}
③在组件中直接调用网络请求
<script>
import api from './api/index';
export default {
    name: "APP",
    mounted() {
        api.getChengpin().then(res => {
            console.log(res.data);
        })
    }
}
</script>

3. 网络请求跨域解决方案

JS 采取的是同源策略。同源策略是浏览器的一项安全策略，浏览器只允许 js 代码请求当前所在服务器的域名、端口、协议相同的数据接口上的数据，这就是同源策略。
也就是说，当协议、域名、端口任意一个不相同时，都会产生跨域问题，所以又应该如何解决跨域问题呢？
跨域错误提示信息：http://iwenwiki.com/api/FingerUnion/list.php
 
目前主流的跨域解决方案有两种：后台解决：cors；前台解决：proxy
①我们找到父工程下的 vue.config.js 或 vite.config.js 文件，向它的 defineConfig 项中添加以下配置：
// vue.config.js配置
devServer: {
  proxy: {
  '/api': {
    target: 'http://xxxxxxxxxxx.xxx/api',
    changOrigin: true,
    pathRewrite: {
      '^/api': ''
    }
  }
}
// vite.config.js配置
server: {
  proxy: {
    '/api': {
      target: 'http://iwenwiki.com/api', // 凡是遇到 /api 路径的请求，都映射到 target 属性
      changeOrigin: true,
      rewrite: path => path.replace(/^\/api/, '') // 重写 /api 为 空，就是去掉它
    }
  }
}
②如何访问跨域的地址？
mounted() {
  // 使用'/url'代替域名部分即可
  axios.get("/api/FingerUnion/list.php")
  .then(res => {
    console.log(res.data);
   })
}
注意：解决完跨域配置之后，要记得重启服务器才行哦

<template>
	<div>
		<el-row v-for="item in list">
			<el-col :span="8">
				<h2>{{item.title}}</h2>
			</el-col>
			<el-col :span="8">
				<img :src="item.thumbnail" alt=""/>
			</el-col>
			<el-col :span="8">
				<p>{{item.introduction}}</p>
			</el-col>
		</el-row>
		
	</div>
</template>

<style>
	@media (min-width: 1024px) {
		.about {
			min-height: 100vh;
			display: flex;
			align-items: center;
		}
	}
	img {
		width: 200px;
		height: 200px;
	}
</style>

<script setup>
	import {
		ref,
		reactive,
		onMounted
	} from 'vue'
	import axios from 'axios';
	let list = reactive([])
	//如果想要渲染，需要不同步
	onMounted(()=>{
		let p = axios.get('/api/cmedical/list2?pageNo=2&pageSize=20')
		p.then((res) => {
			// list = res.data.list会无法触发渲染，只能一个个加入
			let data = res.data.list
			for (let i = 0; i< data.length;i++){
				list[i] = data[i];
			}
			console.log(list);
		})
	})
</script>

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

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [
    vue(),
    vueJsx(),
  ],
  resolve: {
    alias: {
      '@': fileURLToPath(new URL('./src', import.meta.url))
    }
  },
  server: {
    proxy: {
      '/api': {
        target: 'https://server.dayi.org.cn/api',
        changeOrigin: true,
        rewrite: path => path.replace(/^\/api/, '')
      }
    }
  }

})

效果：