VUE--axios网络请求--请求拦截器--响应拦截器

axios是基于promise的一套网路请求

promise可以将异步拉回同步(必须等数据加载完毕才可以执行下面的代码)

promise基本使用

import { ref, getCurrentInstance } from "vue";
const { proxy } = getCurrentInstance();
// 初始化一个promiseNew 对象   promise 有两个参数 我们经常使用 resolve
const promiseNew = new Promise(( resolve, reject ) => {
	// setTimeout 是一个 异步操作 我们使用 promise 将 它 拉回同步 
	setTimeout(() => {
		let num = 2;
		num = num * 3;
		resolve(num); // 使用 resolve() 将输出作为参数的对象		
	},2000);
});
// promiseNew 执行完毕后 执行 .then(); 非常语义化   理论上可以有无数个then()
promiseNew.then((nums) => {
	console.log(nums);
	return nums;    
}).then((nums) => {
	console.log(nums); // 如果没有return 则下一个then将接收不到任何值
}).then((nums) => {
	console.log(nums);
});

axios 的基本使用

axios(官网) vue-asios 安装
我们将请求此链接下的数据(点击查看)
https://jsonplaceholder.typicode.com/posts

1.打开终端 确认路径

2.npm install --save axios vue-axios

3.打开main.js

// import axios from 'axios';
import LayoutApp from "./App.vue";
const AppNew = createApp(LayoutApp);
// 这里给 axios 改个名
import HelperAxios from 'axios';
// 定义全局属性 $HelperAxios
AppNew.config.globalProperties.$HelperAxios = HelperAxios;

稍微和官网有点差异,但问题不大

4.搞一个组件 axios.vue

<template>
<button @click="requestGET">get 请求</button>
<button @click="requestPOST">post 请求</button>
<div>{{ msg }}</div>
	<table>
		<tr>
			<th>id</th>
			<th>title</th>
			<th>body</th>
		</tr>
		// 将数据渲染到表格里
		<tr v-for="jsonItem in jsonArrayList">
			<td>{{ jsonItem.id }}</td>
			<td>{{ jsonItem.title }}</td>
			<td>{{ jsonItem.body }}</td>
		</tr>
	</table>
</template>

import { ref, getCurrentInstance } from "vue";
const { proxy } = getCUrrentInstance();
// 定义一个数组来接收 请求到的变量 渲染时 使用数组渲染
let jsonArrayList = ref([]);
// msg 向我们展示 是否请求成功
let msg = ref("");
// get 请求
function requestGET(){  // 核心: url传值
	msg.value = "请求中,请稍后...";
	const promiseReq = proxy.$HelperAxios.get("https://jsonplaceholder.typicode.com/posts",{params:{msgs:"思钱想厚"}});
	promiseReq.then((requestPromise) => {  // 如果稍微有点差错 , 输出一下看看具体内容 稍作调整
		if(requestPromise.states === 200){
			if(requestPromise.data.userId === 1){
				jsonArrayList.value = requestPromise.data
			}else{
				msg.value = "接口响应异常";
			}
		}else{
			msg.value = "接口请求失败";
		}
	});
}
// get/post的差异-------------------------->
function requestPOST(){
	msg.value = "请求中,请稍后...";
	// 差异全搁着了                       请求头不同                                         没有params{ } 包裹
	const promiseReq = proxy.$HelperAxios.post("https://jsonplaceholder.typicode.com/posts",{ msgs:"思钱想厚" });
	promiseReq.then((requestPromise) => {  // 如果稍微有点差错 , 输出一下看看具体内容 稍作调整
		if(requestPromise.states === 200){
			if(requestPromise.data.userId === 1){
				jsonArrayList.value = requestPromise.data
			}else{
				msg.value = "接口响应异常";
			}
		}else{
			msg.value = "接口请求失败";
		}
	});
}

delete
put
和 get put 大差不差
完成了axios网络请求

Axios–请求拦截器

axios请求拦截器是发生在请求之前对该次请求做出的预处理
可以全局定义baseURL
定义timeout

main.js

// axios实例.拦截器.请求.use()
HelperAxios.interceptors.request.use(
    function (config) {
        // console.log(config)
        config.baseURL = "http://localhost:46208";
        config.timeout = 5000;
        switch(config){
            case "post" :
            case "put"  :
                config.data.PublicMsg = "请求拦截器 (post) / (put) 添加的请求数据";
                break;
            case "get"  :
            case "delete":
                config.params.PublicMsg = "请求拦截器 (get) / (delete) 添加的请求数据"
                break;
            }
        config.headers.authorization = "1433223";
        return config;
    },
    function (error) {
        return Promise.reject(error)
    }
);

Axios–响应拦截器

响应拦截器在响应发生之前对数据进行进一步加工

HelperAxios.interceptors.response.use(
    function(responseResult){
        // console.log(responseResult.data);
        // responseResult.data.strPublic="通过响应拦截器添加响应参数";
        if (responseResult.status === 200) {
            if (responseResult.data.StatusCode === "Success") {
                return responseResult.data
            } else {
                msgReq.value = "!接口响应异常!";
                return;
            }
        } else {
            msgReq.value = "!接口请求失败!";
            return;
        }
    },
    function(error){
        return Promise.reject(error);
    }
)