## 1 、 XMLHttpRequest
El navegador no tiene suficiente soporte para el objeto XMLHttpRequest. Al crear el objeto XMLHttpRequest, debe ser compatible con el navegador IE.
: XHR
- readyState
- 0-4, 0 significa no inicializado, 4 significa que la solicitud se ha completado
- status (código de estado de respuesta HTTP)
- 200: OK, éxito
- 3XX 【Código de estado de la serie de redireccionamiento】
- 301: redireccionamiento permanente
- 302: redireccionamiento temporal
- 307: redireccionamiento interno del navegador (caché)
- 4XX 【serie de errores】
- 400: solicitud incorrecta, solicitud incorrecta
- 401: Autenticación fallida
- 403: Prohibido
- 404: No se puede encontrar el recurso correspondiente.
- 405: Método no permitido
- 5XX 【Error del servidor, problema ambiental】
- 500: error interno del servidor (código, problemas ambientales)
- 502: mala Getway, mala puerta de enlace
Caso: Utilice XHR para solicitar la interfaz de datos de colegios y universidades nacionales
-
dirección de interfaz
- https://api.i-lynn.cn/college
- Solo muestra la
listinformación en un bucle - La interfaz se puede solicitar directamente en todos los dominios
-
Efecto de caso
Código de referencia:
<body>
<div id="app">
<ul>
<li :key='index' v-for='(el,index) in list'>{
{el.area}}：{
{el.counts}}所</li>
</ul>
</div>
</body>
<script src="./js/vue.js"></script>
<script>
new Vue({
el: '#app',
data: {
list: []
},
mounted: function(){
// 1. 创建xhr对象
var xhr = new XMLHttpRequest()
const api = 'https://api.i-lynn.cn/college'
// 2. 绑定回调函数
xhr.onreadystatechange = () => {
// 3. 判断是否成功
if(xhr.readyState == 4 && xhr.status == 200){
this.list = JSON.parse(xhr.responseText).list
}
}
// 4. 打开请求
xhr.open('GET',api)
// xhr.open('POST',api)
// 设置请求头
// xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
// 5. 发送请求
xhr.send()
// xhr.send("username=111&age=222")
}
})
</script>
2 、 jQuery
La introducción de la clase jQuery resuelve el problema de la compatibilidad de escritura, pero ahora solo usa la función de solicitud de red en la biblioteca jQuery, y una gran cantidad de métodos dom en jQuery se introducen inválidos, lo cual es un poco exagerado.
Gramática básica
$.ajax({
url,
type:get/post,
data,
dataType:json/text/xml/html/jsonp
success:function(res){
},
error:function(){
}
})
$.get(url,data,callback,dataType)
$.post(url,data,callback,dataType)
Reescribe XHRparte del caso usando jQuery
<body>
<div id="app">
<ul>
<li :key="index" v-for="(el,index) in list">
{
{el.area}}：{
{el.counts}}所
</li>
</ul>
</div>
</body>
<script src="./js/vue.js"></script>
<script src="./js/jquery-3.5.1.js"></script>
<script type="text/javascript">
const vm = new Vue({
el: "#app",
data: {
list: [],
},
async mounted() {
const api = "https://api.i-lynn.cn/college";
let data = await $.get(api,"json");
this.list = data.list;
},
});
</script>
async: palabra clave, utilizada para
functionmarcar la función actual como una función asincrónica antes de la palabra clave de declaración de funciónesperar: palabra clave, deje que el código de línea de la palabra clave actual se ejecute y espere hasta que se alcance el resultado antes de ejecutar el código siguiente
3 、 buscar
-
API incorporada proporcionada por HTML5
-
El método de adquisición de datos más simple, más potente y flexible, puede considerarse como una versión mejorada de xhr
-
Basado en Promise
-
Fetch admite muchos métodos de solicitud, pero el valor predeterminado es
GETsolicitud. Si necesita utilizar otros métodos, puedemethodespecificarlo a través de la opción del segundo parámetro opcional
estructura gramatical
fetch(url[,some settings]).then(fn2)
.then(fn3)
...
.catch(fn)
Ejemplo de uso
// 通过url表达式来传递数据
fetch("http://xxx/?id=123")
.then(res => res.json())
.then(data => console.log(data));
// post标准提交
fetch("http://xxxx/post", {
method: "post",
body: "uname=lisi&pwd=123",
headers: {
"Content-Type": "application/x-www-form-urlencoded",
},
})
.then(res => res.json())
.then(data => console.log(data));
// post提交json数据
fetch("http://localhost:3000/books", {
method: "post",
body: JSON.stringify({
uname: "tianqin",
pwd: "1201",
}),
headers: {
"Content-Type": "application/json",
},
})
.then(res => res.json())
.then(data => console.log(data));
Nota: fetch no enviará cookies. A menos que use la opción de inicialización de credenciales
credentials: "include"
En el ejemplo de código anterior, veremos que hay un json()método, que es el método de procesamiento de resultados de respuesta de recuperación. Los métodos de procesamiento de resultados de respuesta comúnmente utilizados son:
- text (): procesa el cuerpo devuelto en un tipo de cadena
- json (): el resultado devuelto es el mismo que JSON.parse (responseText)
Utilice el método de búsqueda para reescribir XHRalgunos casos
<body>
<div id="app">
<ul>
<li :key='index' v-for='(el,index) in list'>
{
{el.area}}：{
{el.counts}}所
</li>
</ul>
</div>
</body>
<script src="./js/vue.js"></script>
<script type="text/javascript">
const vm = new Vue({
el: '#app',
data: {
list: []
},
async mounted() {
const api = "https://api.i-lynn.cn/college"
let res = await fetch(api)
let data = await res.json()
this.list = data.list
}
})
</script>
Cuando la solicitud asincrónica es un
GETY no tradicionalPOST, el navegador primero enviará una solicitud a la dirección de la interfaz para preguntar si el servidor actual admite el tipo de solicitud (verbo de solicitud), si lo hace, continuará enviando la solicitud asincrónica, de lo contrario, no se enviará.Entonces se llama a esta solicitud enviada
预检请求, su verbo de solicitud esOPTIONS.La última parte del aprendizaje
PUT,DELETEy otras peticiones especiales se disparará verbo solicitud de verificación previa.
4 、 axios
### 4.1 、 Uso básico
Documento: https://www.kancloud.cn/yunye/axios/234845
axios es una biblioteca HTTP basada en promesas que se puede utilizar en navegadores y node.js. axios es una biblioteca de solicitudes de red recomendada por el autor de vue . Tiene las siguientes características:
- Admite navegador y node.js
- Promesa de apoyo
- Capaz de interceptar
请求和响应 - Convierta automáticamente datos json
soporte del navegador axios
Antes de usar axios, debe introducir el archivo de biblioteca axios js en el archivo de plantilla correspondiente y luego usar axios de acuerdo con el siguiente uso:
// GET请求方式
axios.get('/get_data?id=10010').then(ret => console.log(ret.data))
axios.get('/get_data',{
params: {
id: 10010,
name: 'tianqin',
age: 21
}
}).then(ret => console.log(ret.data))
//POST请求方式
axios.post('/set_data', {
firstName: 'zhang',
lastName: 'san'
}).then(ret => {
})
axios({
method: 'post',
url: 'set_data',
timeout: 1000,
headers: {
'X-Custom-Header': 'foobar'},
data: {
firstName: 'tian',
lastName: 'qin'
}
}).then(ret => {
})
Por supuesto axios Además de admitir lo tradicional GETy POSTmucho más allá , way también admite solicitudes comunes:
- poner: modificar datos
- eliminar: eliminar datos
Tome el ejemplo de solicitud de axios anterior como ejemplo, retlos atributos principales del resultado de la respuesta de axios ( ) son:
- datos: los datos de respuesta reales (los más utilizados)
- encabezados: información del encabezado de respuesta
- estado: código de estado de respuesta
- statusText: información del estado de la respuesta
Además, cabe destacar que antes de utilizar axios para enviar una solicitud, nos permite realizar algunos ajustes a través de la configuración global , lo que puede facilitar posteriores operaciones de solicitud, por ejemplo:
- axios.defaults.timeout = 3000 【Establecer tiempo de espera】
- axios.defaults.baseURL = 'http: // localhost / app' [Establecer la dirección predeterminada]
- axios.defaults.headers ['_ token'] = '123123123' [Establecer información del encabezado de la solicitud, información general del encabezado]
- axios.defaults.headers.get ['_ token'] = '123123'
- axios.defaults.headers.post ['_ token'] = '123123'
- axios.defaults.headers.common ['_ token'] = '123123' [Información de encabezado común, el común no se puede escribir]
Nota:
- Cuando axios envía una solicitud de publicación, envía datos en formato json de forma predeterminada
- Si necesita enviar una solicitud de formulario de publicación, debe especificar el encabezado de la solicitud
axios.post('college',{ username: 'tianqin', age: 21 },{ headers: { "Content-Type": "application/x-www-form-urlencoded" } }).then(ret => this.list = ret.data.list)
Usa axios para reescribir XHRalgunos casos
<!-- 以GET形式为例 -->
<body>
<div id="app">
<ul>
<li :key='index' v-for='(el,index) in list'>
{
{el.area}}：{
{el.counts}}所
</li>
</ul>
</div>
</body>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script src="./js/vue.js"></script>
<script type="text/javascript">
const vm = new Vue({
el: '#app',
data: {
list: []
},
mounted() {
const api = "https://api.i-lynn.cn/college"
axios.get(api).then(ret => console.log(ret.data.list))
}
})
</script>