Axios网络请求
Axios是一个基于promise的网络请求库、
安装
Axios的应用是需要单独安装的。 cnpm install –save axios
引入
- 组件中引入(每个组件使用到网络请求都要引入一次):import axios from “axios”
- 全局引用(所有的组件只要引入一次就ok):
Import axios from “axios”
网络请求基本示例(局部引入)
get请求:
mounted(){//组件已经渲染完成,所以可以把网络请求放在这个生命周期当中
axios({
methods:"get",
url:"http://localhost:8090/admins/login"
}).then(res=>{
console.log(res.data);
})
}
- axios.get(...).then(res => {...});用于异步请求的 axios 返回的就是一个 Promise 对象。
(回调函数)通常情况下,我们要对操作执行的结果进行后续处理,但由于异步操作不知道什么时候可以执行完成,就出现了“回调函数”的概念,意思就是等异步操作处理结束了,再回头来调用这个函数对执行结果进行处理。
2.箭头函数:相当于把function换成=>,将括号前移。例如:hello=function(){}用箭头函数就是hello=()=>{}。
Post请求:
axios({
method: "post",//注意这里是method不是methods
url: "http://iwenwiki.com/api/blueberrypai/login.php",
data: querystring.stringify({
user_id: "iwen@qq.com",
password: "iwen123",
verification_code: "crfvw"
注:post请求参数是需要额外处理的 (1)安装依赖:npm install –save querystring (2)转换参数格式query.stringify({}).
快捷方式:
Get请求
axios.get("http://localhost:8090/admins/login").then(res => {
console.log(res.data)
})
Post请求
axios.post("http://iwenwiki.com/api/blueberrypai/login.php", querystring.stringify({
user_id: "iwen@qq.com",
password: "iwen123",
verification_code: "crfvw"
})).then(res=>{
console.log(res.data)
})
网络请求基本示例(全局引入)
- 在main.js(主入口文件)中引入import axios from “axios”
- 还需要将axios挂载到全局。(在main.js挂载)
const app=createApp(App)
app.config.globalProperties.$axios = axios
app.mount('#app')
3.在组件中调用就直接输入this.$axios。