数据请求

使用JS编写ajax

局部提交，请求回来的是josn数据,而且在js当中，数据渲染问题很复杂

const xhr = new XMLHTTPRequest()
xhr.open("请求方式","地址")
xhr.send("")
xhr.onreadystatechange = function(){if(xhr.status === 200 && xhr.readyState === 4){console.log(xhr.responseXML)console.log(xhr.responseText)}
}

jq对ajax进行了封装

$.ajax({url: ""type: "",data: "",success: function(res){},error: function(err){}
})

Axios

axios是一个三方的基于XMLHttprequest技术封装的http库

axios底层是es6底层的promise

axios也受到了同源策略的影响

安装

发送请求

url: http://127.0.0.1:3000/api/getbanner

get

方法一：

var url = "http://127.0.0.1:3000/api/getbanner"
axios(url,{method: "GET",params: {},headers: {}
}).then(res=>{console.log(res)this.img_list = res.data.list}
).catch(error=>{console.log(error)}
)
}

方法二：

axios.get(url,{params:{},headers:{}}).then().catch()
简写
var url = "http://127.0.0.1:3000/api/getbanner"
axios.get(url).then(res=>{this.img_list = res.data.list}
)

post

方式一

var url = "http://127.0.0.1:3000/api/getbanner"
axios(url,{method: "POST", //请求方式data: {}, //携带参数headers: {}
}).then(res=>{console.log(res)this.img_list = res.data.list}
).catch(error=>{console.log(error)}
)
}

方式二

axios.post(url,data,headers).then().catch() //post请求，data和headers和url是并列参数
简写
var url = "http://127.0.0.1:3000/api/getbanner"
axios.post(url).then(res=>{this.img_list = res.data.list}
)

axios全局配置

在同一个项目上，对同一个接口服务器上的数据有多次请求。有很多共性的内容在代码当中重复。

import axios from "axios";

axios.defaults.baseURL = "http://127.0.0.1:3000/api"
//这里设置的是axios的默认请求头
// axios.defaults.headers.common['Authorization'] = AUTH_TOKEN; //token
// axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded'; //请求的数据类型 application/json  text/html  jpg/image

export default axios

版本升级

axios拦截器

请求拦截器

对axios每次请求进行拦截,可以用来对错误的请求进行校验，比如age=1000

axios.interceptors.request.use(function(request){request.headers['hhh'] = 'xxx'return request},function(error){console.log(error)}
)
//axios.interceptors.request.eject(request_interceptors); 移除拦截器

响应拦截器

const reponse_interceptors = axios.interceptors.response.use(function(response){console.log(response)return response.data},function(error){console.log(error)}
)
//axios.interceptors.response.eject(reponse_interceptors);移除拦截器

跨域问题

为了web安全，对不同域名，同域名不同协议，同域名，同协议不同端口的地址认为不同源，这样的访问是跨域访问，跨域访问通常被禁止。

跨域问题解决方案

1、服务端允许跨域

1、设置响应头

1、Access-Control-Allow-Origin *

2、Access-Control-Allow-Method *

2、中间件

封装了第一种方法

2、代理服务器跨域（proxy）

vpn代理服务器，使用当前的业务服务器作为代理服务器进行跨域。

Vue-cli设置代理

配置参考 | Vue CLI

跨域请求

axios特殊用法

create

在一个页面当中，需要统一数据,在单页面上，为了保证请求的一致性采用的轻量级方法。

import axios from 'axios'

export default {created(){var axios_instance = axios.create({baseURL: "http://127.0.0.1:3000/api",headers: {}})this.get_banner(axios_instance)this.get_list(axios_instance)},methods: {get_list(instance){console.log("hello world")console.log(instance)},get_banner(instance){var url = "/getbanner"instance.get(url).then(res=>{console.log(res)})}},

all

xios继承了promise的异步特征，所以在all并发请求，需要借助async和await

import axios from 'axios'
export default {created(){axios.all([this.get_nav(),this.get_obj()]).then(res=>{const [nav,obj] = resconsole.log(nav,'+++++++++++++++++++++++nav++++++++++++++++++++++')console.log(obj,'+++++++++++++++++++++++obj++++++++++++++++++++++')})},methods:{async get_nav(){const res = await axios.get("/api/getbanner")return res},async get_obj(){const res = await axios.get("/api/getbanner")return res}}
}

swiper

安装

npm i swiper@3.4.2

导入

<template><div id="index_id"><h1>首页</h1><div class="swiper-container"><div class="swiper-wrapper"><div class="swiper-slide" v-for="image in img_list" :key="image.id"><img :src="'http://127.0.0.1:3000'+image.img"></div></div></div></div>
</template>

<script>
import Swiper from 'swiper'
import 'swiper/dist/css/swiper.min.css'

export default {data(){return {img_list: []}},mounted(){new Swiper('.swiper-container',{loop: true,autoplay: {delay: 500},effec: 'cute'})},created(){this.get_banner()},methods:{get_banner(){this.$http.get('/api/getbanner').then(res=>{this.img_list = res.listconsole.log(res)})}}

}
</script>

<style>
#index_id h1{text-align: center;
}
#index_id img{width: 696px;height: 300px;
}
</style>

vue（数据请求）框架相关推荐

vue数据请求与监听
框架级的数据请求 axios ( 第三方库 - 别人封装好的库 ) fetch ( javascript 原生提供 ) vue数据请求的发展 vue-resource ( Vue 以前自己封装使用的请 ...
关于 vue 数据请求本地跨域和线上请求的 ip地址切换问题
1.vue 进行跨域处理在 config 文件内 proxyTable: {'/baseUrl': {target: 'https://.......com/', // 你要跨域的地址secure ...
html中vue数据请求的三种方法
1.resource Vue 要实现异步加载需要使用到 vue-resource 库. Vue.js 2.0 版本推荐使用 axios 来完成 ajax 请求. 先导入一个线上cdn的地址,也可以去n ...
vue 获取url地址的参数_Vue 网络请求框架 axios 使用教程
点击上方"代码集中营",设为星标优秀文章,第一时间送达! 前期回顾 1. Vue 学习入门指南 2. Vue 入门环境搭建 3. Visual Studio Code 使用指南 ...
Vue移动端框架Mint UI教程-调用模拟json数据(五)
1:安装 npm install vue-resource 2:打开main.js 注册 import VueResource from 'vue-resource' Vue.use(VueResou ...
Vue购物商城项目(二) 数据请求使用
Vue购物商城项目(二) 文章目录 Vue购物商城项目(二) 前言一.请求数据 request.js home.js Home.vue 二.使用数据总结前言 1.这里面包含了大量的.我的个人理解 ...
TP5后端,VUE前端请求聚合数据新闻接口
问题描述: TP5当后端,VUE当前端, 请求聚合数据新闻接口演示效果如下: ps: 最开始加载页面的时候,只加载本地的文件(因为请求次数有限制) 问题解决: 1: vue 文件: <temp ...
vue 在哪个生命周期进行数据请求
看实际情况,一般在 created(或beforeRouter) 里面就可以,如果涉及到需要页面加载完成之后的话就用 mounted. 在created的时候,视图中的html并没有渲染出来,所以此时 ...
TP5后端,VUE前端请求聚合数据驾照题库
选择效果: 演示效果: 1: Vue 配置: /config/index.js 'use strict' // Template version: 1.3.1 // see http://vuejs- ...

vue（数据请求）框架