1.axios请求
此篇是基于 vue2.x 的开发环境
1.1网络请求
axios插件通过XMLHttpRequest or JSONP 使得vue.js 具备了发送web请求，处理web响应的能力。
vue2.0之后，就不再对vue-resource更新，而是推荐使用axios。
axios是基于 Promise 的 HTTP 请求客户端，可同时在浏览器和 Node.js 中使用。有跨端发请求的能力。
在axios之前是用fetch也是原生的API通过promise发请求的，再往以前就是通过xhr发送请求的
通过npm i axios 安装
支持的http方法
axios的请求API是按照REST风格设计的，它提供了7种请求API：
get(url, [options])
head(url, [options])
delete(url, [options])
jsonp(url, [options])
post(url, [body], [options])
put(url, [body], [options])
patch(url, [body], [options])
功能特性
1、在浏览器中发送 XMLHttpRequest 请求
2、在 node.js 中发送 http请求
3、支持 Promise API
4、拦截请求和响应
5、转换请求和响应数据
6、取消请求
7、自动转换 JSON 数据
8、客户端支持保护安全免受 CSRF/XSRF 攻击
使用步骤
安装axios：npm i axios
在要使用的文件中引入axios
import axios from ‘axios’
App.vue文件：
<template>
<!-- 一个.vue文件就是一个组件, 一个项目中只有一个根组件 App.vue -->
<!-- 一个.vue文件内部一般是由三部分组成: template , script , style -->
<!-- template 内部写标签 , 只能有一个根元素 -->
<!-- script 内部写js逻辑 , 内部需要 export default {}, 所有的js代码都需要写在这里 -->
<!-- style 内部写css样式 , 可以通过lang='xx'指定style内部的css语法 , 可以通过设置 scoped 属性 让多个.vue文件之间的样式互不影响 -->
<div id="app">
<div class="list">
<h1>店铺列表</h1>
<div class="shop" v-for="(item,index) in shoplist" :key="index">
<div class="imgbox">
<img :src="item.picUrl" alt="">
</div>
<div class="text">
<div class="name">{
{item.name}}</div>
<div class="desc">{
{item.minPriceTip}} {
{item.monthSalesTip}}</div>
</div>
</div>
</div>
</div>
</template>
<script>
// 导入axios
import axios from 'axios'
export default {
data(){
return{
shoplist:[]
}
},
mounted(){
// 这个方法会在组件挂载完成时自动执行，而且只执行一次
// 发送网络请求，请求店铺列表
axios.get('/api/shop/list').then((res)=>{
// 保存从服务器返回的店铺列表数据，这行代码修改了data中的响应式数据，会导致当前组件更新，组件会重新渲染
this.shoplist = res.data.list;
})
}
}
</script>
<style lang="scss" scoped>
.list .shop{
display: flex;
margin: 10px;
}
.list .shop .imgbox{
width: 80px;
margin-right: 10px;
}
.list .shop .imgbox img{
width: 100%;
}
</style>
注意：只要有回调函数时都会出现this指向问题，将回调函数改为箭头函数就可以解决这个问题
只在App.vue文件中发请求会出现跨域，跨域是只要发送的是xml请求当前网址的域名端口号不同就会出现跨域，因为在项目中接口地址不能直接发请求需要设置代理，
解决跨域问题写在vue.config.js文件中，在该文件中做一次请求转发，设置完成后需要重启服务器
示例代码：
const {
defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({
transpileDependencies: true,
devServer:{
//设置开发服务器
proxy:{
//设置代理
'/api':{
//当在程序中发送以 '/api' 开头的请求时, 会自动的将请求转发到 target 所表示的目标服务器
target:'http://waimai.yantianfeng.com/',//设置目标服务器地址
changeOrigin:true, //允许跨域
pathRewrite:{
} //重写请求地址
}
}
}
})
1.2axios请求
先导入axios,在mounted中写请求通过回调函数接收数据，将请求响应的数据保存到data中，在vue.config.js文件中解决请求跨域问题。
import axios from 'axios'
export default {
data(){
return {
shoplist:[]
}
},
mounted(){
// 发送不带参数的 get 请求
// axios.get('/api/shop/list').then((res)=>{
// this.shoplist = res.data.list;
// })
// 发送带参数的 get 请求
// axios.get('/api/shop/search',{params:{searchkey:'火锅'} }).then((res)=>{
// console.log(res.data);
// })
// 发送带参数的 post 请求
// axios.post('/api/user/login',{ phone:'13611129070',pass:'1234' }).then((res)=>{
// console.log(res.data);
// })
}
}