axios 是一个基于 promise 的 HTTP 库，类似于 jQuery 的 Ajax，用于 HTTP 请求。可以在浏览器和 node.js 中使用。
一.axios 安装：
使用命令：
npm install axios
二 . 安装 qs：
使用命令：
npm install qs
三.引入 axios 与 qs【全局引入】：
在 main.js 文件中引入 axios 与 qs，并绑定到 vue 的原型上。
import Vue from 'vue' import App from './App.vue' import router from './router' Vue.config.productionTip = false; // 1.引入axios import axios from 'axios' // 2.引入qs import qs from 'qs' // 3.将axios绑定到vue原型上，并命名为$axios Vue.prototype.$axios = axios; // 4.将qs绑定到vue原型上，并命名为$qs Vue.prototype.$qs = qs; new Vue({ router, render: h => h(App), }).$mount('#app')
axios 基础使用
一、get 请求
<template> <div> <p>{{ name }}</p> </div> </template> <script> export default { name: "Home", data() { return { name: "GET请求" } }, created() { // 1. 第一种写法 this.$axios({ method: 'get', url: 'http://xxx/webapi/user/info', params: { id: 1 } }).then((res) => { console.log(res.data); }) // 2. 使用get别名写法 this.$axios.get('http://xxx/webapi/user/info', { params: { id: 1 } }).then((res) => { console.log(res.data); }) } } </script>
二、post 请求
<template> <div> <p>{{ name }}</p> </div> </template> <script> export default { name: "Home", data() { return { name: "POST请求" } }, created() { // 1. 第一种写法 this.$axios({ method: 'post', url: 'http://xxx/webapi/user/info', data: { id: 1 } }).then((res) => { console.log(res.data); }) // 2. 使用post别名写法 this.$axios.post('http://xxx/webapi/user/info', { id: 1 }).then((res) => { console.log(res.data); }) } } </script>
原创作者：吴小糖
创作时间：2023.6.21
