vue3使用axios

概述

Axios 是一个基于 Promise 的现代化 HTTP 客户端，用于浏览器和 Node.js。它提供了许多强大的功能，使得在客户端和服务器之间发送 HTTP 请求变得更加简单和灵活。以下是 Axios 的一些主要特点和功能

• 从浏览器创建 XMLHttpRequests
• 从 node.js 创建 http 请求
• 支持 Promise API
• 拦截请求和响应
• 转换请求和响应数据
• 取消请求
• 超时处理
• 查询参数序列化支持嵌套项处理
• 自动将请求体序列化为：
• JSON (application/json)
• Multipart / FormData (multipart/form-data)
• URL encoded form (application/x-www-form-urlencoded)
• 将 HTML Form 转换成 JSON 进行请求
• 自动转换JSON数据
• 获取浏览器和 node.js 的请求进度，并提供额外的信息（速度、剩余时间）
• 为 node.js 设置带宽限制
• 兼容符合规范的 FormData 和 Blob（包括 node.js）
• 客户端支持防御XSRF

构建使用流程

1.安装 axios

 cnpm install axios -S //安装axios
 cnpm install qs  -S //可以不装 用来格式化参数

2.封装请求

src下新建文件夹http及index.js文件

新建index.js文件

 import axios from 'axios'
 // import qs from "qs";//qs为序列化数据的js库
 
 //设置baseUrl
 axios.defaults.baseURL = process.env.NODE_ENV === "production" ? "https://xxxxx" : "/api";

 //设置请求头
 axios.defaults.headers.post["Content-Type"] = "application/x-www-form-urlencoded;charset=UTF-8";
 //设置超时
 axios.defaults.timeout = 10000;
 //请求拦截器
 axios.interceptors.request.use(
    config => {     
        // const token = store.state.token;        
        // token && (config.headers.Authorization = token);       
        return config;
    },
    error => {
        return Promise.reject(error);
    }
 );

 //响应拦截器
 axios.interceptors.response.use(
    response => {
        if (response.status == 200) {
            return Promise.resolve(response);
        } else {
            return Promise.reject(response);
        }
    },
    error => {
        alert(`异常请求：${JSON.stringify(error.message)}`)
    }
 );
 
 //封装post/get请求
 export default {
    post(url, data) {
        return new Promise((resolve, reject) => {
            axios({
                    method: 'post',
                    url,
                    data,
                    //data: qs.stringify(data), //参数序列化
                })
                .then(res => {
                    resolve(res.data)
                })
                .catch(err => {
                    reject(err)
                });
        })
    },

    get(url, data) {
        return new Promise((resolve, reject) => {
            axios({
                    method: 'get',
                    url,
                    params: data,
                })
                .then(res => {
                    resolve(res.data)
                })
                .catch(err => {
                    reject(err)
                })
        })
    }
 };

3.挂载

在main.js:文件中进行全局方法挂载

 const app = createApp(App);
 import axios from './http/index'
 app.config.globalProperties.$api = axios;
 app.use(axios)

4.配置代理

在vue.config.js文件中

	module.exports = {
    // 部署应用时的基本 URL
    publicPath: process.env.NODE_ENV === "production" ? "./" : "/",
    // build时构建文件的目录 构建时传入 --no-clean 可关闭该行为
    outputDir: "dist",
    // build时放置生成的静态资源 (js、css、img、fonts) 的 (相对于 outputDir 的) 目录
    assetsDir: "home",
    // 指定生成的 index.html 的输出路径 (相对于 outputDir)。也可以是一个绝对路径。
    indexPath: "index.html",
    // 默认在生成的静态资源文件名中包含hash以控制缓存
    filenameHashing: true,
    // 问你是否使用eslint
    lintOnSave: false,
    devServer: {
        // open: true,    // 自动启动浏览器
        // https: true,
        proxy: {
            "/api": {
                target: "https://xxxx", // 正式
                changeOrigin: true,
                ws: true,
                pathRewrite: {
                    "^/api": "",
                },
            }
    },
};

5.使用

在vue文件中使用 proxy.$api传入请求路径与参数

	<template>
		<p @click="submit">点击</p>
	</template>

  <script>
	  import { ref, reactive,getCurrentInstance,toRefs } from "vue";
	  export default {
	  name: "home",
	  props: {},
	  setup() {
	     //获取当前组件的实例、上下文来操作router和vuex等。相当于this
	    const { proxy, ctx } = getCurrentInstance();
	    
	    let state = reactive({
	      active:-1,
	      nav:[
		      { name: "测试1", icon: "face" },
		      { name: "测试2", icon: "face" },
	    	]
	   	 })
	 	
	 	//点击发送请求
	    const submit = ()=> {
			 proxy.$api
	        .get("/services/getData", { id:'123' })
	        .then((res) => {
	          	console.log(res);
	         });
	   	}
	      
	    return {
	      ...toRefs(state),
			submit 
	    };
	  },
	};
  </script>

参考

https://www.npmjs.com/package/axios
https://www.npmjs.com/package/vue
axios