示例一： fetch
<template>
<div>
<h1>Ajx请求</h1>
<div v-for="(item, i) in store.state.duanziList" :key="i">
<p>
{{ item.text }}
</p>
</div>
</div>
</template>
<script>
import store from "./store/index.js";
export default {
name: "App",
// 放到App，其他可以引用
provide: {
store,
},
setup() {
let api = "https://api.apiopen.top/getJoke?page=1&count=2&type=text";
fetch(api)
.then((res) => res.json())
.then((result) => {
store.setDzList(result.result);
console.log(result);
});
return { store };
},
};
import { reactive } from 'vue'
const store = {
//全局存放数据的地方
state: reactive({
duanziList:[]
}),
setDzList(list){
this.state.duanziList=list
}
}
export default store示例二： axios
cnpm install axios --save
<template>
<div>
<h1>Ajx请求</h1>
<div v-for="item,i in store.state.duanziList" :key="i">
<p>
{{item.text}}
</p>
</div>
</div>
</template>
<script>
import store from './store/index.js'
import axios from 'axios'
export default {
name: 'App',
components: {
},
// 放到App，其他可以引用
provide:{
store
},
setup(){
let api = 'https://api.apiopen.top/getJoke?page=1&count=2&type=text'
axios.get(api).then((result)=>{
console.log(result)
store.setDzList(result.data.result)
})
return {store}
}
}
</script>
示例三：跨域
根目录添加配置文件vite.config
//这个文件类似vue2中的vue.config.js
module.exports = {
proxy:{
'/api':{
target:'https://pvp.qq.com',
changeOrigin:true, //是否允许跨域
// 将api的地址，替换成空
rewrite:path => path.replace(/^\/api/,'')
}
}
}
<template>
<div>
<h1>Ajx请求</h1>
<div v-for="item,i in store.state.duanzilist" :key="i">
<p>
{{item.cname}} ==> {{item.title}}
</p>
</div>
</div>
</template>
<script>
import store from './store/index.js'
import axios from 'axios'
export default {
name: 'App',
components: {
},
// 放到App，其他可以引用
provide:{
store
},
setup(){
//No 'Access-Control-Allow-Origin' 跨域的报错
// 发现有地址中有api的 会触发代理 发送到https://pvp.qq.com
// 最终地址https://pvp.qq.com/web201605/js/herolist.json
let api = 'api/web201605/js/herolist.json'
axios.get(api).then((result)=>{
console.log(result)
//store.setDzList(result.data.result)
store.setDzList(result.data)
})
return {store}
}
}
</script>
import { reactive } from 'vue'
// 创建store对象
const store = {
//创建响应式对象
state:reactive({
message:"helloworld",
duanzilist:[]
}),
setMessage(value){
this.state.message = value
},
setDzList(list){
this.state.duanzilist= list
},
}
// 可以将其导出
export default store;示例四： mock.js
作用：发送ajax请求，中途可以进行拦截，并且将数据返回。
发送请求，用上了mock.js,就可以模拟后端返回数据
http://mockjs.com/
作用： 1. 模拟后端数据
2. 对ajax的请求可以做劫持，和处理。再返回
npm install mockjs --save
mock/index.js
import Mock from 'mockjs'
// 模拟设置一下模拟返回数据的时间
Mock.setup({
timeout:'200-600'
})
// 模拟后端数据
var data = Mock.mock(
// 请求用户信息,遇到/user/userinfo 就做劫持进行处理
"/user/userinfo",
// 得到下面信息
'get',
(req)=>{
console.log(req)
return {
username:"老陈",
type:"帅"
}
}
)
Mock.mock(
// 使用正则匹配
/\/account.*/,
// 得到下面信息,(req,res) req代表请求 res代表响应
'get',
(req)=>{
console.log(req)
return {
info:"登录成功"
}
}
)
store/index.js
import { reactive } from 'vue'
// 创建store对象
const store = {
//创建响应式对象
state:reactive({
message:"helloworld",
}),
setMessage(value){
this.state.message = value
},
}
// 可以将其导出
export default store;mian.js
import { createApp,reactive } from 'vue'
import App from './App.vue'
import './index.css'
// 如果需要做劫持处理，加上mockjs，如果不需要就去掉
import './mock/index.js'
// 从app导入进去
createApp(App).mount('#app')App.vue
<template>
<div>
<h1>Ajx请求</h1>
<div>
<p>
{{store.state.message}}
</p>
</div>
</div>
</template>
<script>
import store from './store/index.js'
import axios from 'axios'
export default {
name: 'App',
components: {
},
// 放到App，其他可以引用
provide:{
store
},
setup(){
let api = '/user/userinfo'
axios.get(api).then((result)=>{
console.log(result)
store.setMessage(result.data.username+result.data.type)
})
axios.get('/account?username=laochen&password=123456').then((result)=>{
console.log(result)
})
return {store}
}
}
</script>
