关于请求方式的总结
文章目录
前言
提示：简略的梳理关于数据的请求方式
简略的梳理关于数据的请求方式。
提示：以下是本篇文章正文内容，下面案例可供参考
一、原生的XMLHttpRequest
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
//
// 1. 创建xhr的实例
const xhr = new XMLHttpRequest()
// 2. 调用onreadystatechange方法
xhr.onreadystatechange = function() {
if(xhr.readyState === 4 && xhr.status === 200) {
console.log(xhr.responseText);
}
}
// 3.打开链接 参数一：请求类型 参数二：请求路径地址
xhr.open('GET','请求的url地址' );
// 4 发送请求
xhr.send()
// 原生xhr的请求，也就只有两个变化值，就是接收到数据后，数据xhr.responseText的处理，xhr.open()中url会变化
</script>
</body>
</html>
二、JQ对ajax的封装
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.1/jquery.js"></script>
<script>
// $.ajax()
// get
$.ajax({
url: '请求的url地址',
type:'GET',
success: function(data){
console.log(data)
}
})
// post
// jq的ajax发送post请求数据的时候，他的参数默认就是表单类型(FORM-DATA)
$.ajax({
url: '请求的url地址',
type: 'POST',
data: {
type: '类型'
},
success:function(res){
console.log(res)
}
})
</script>
</body>
</html>
三、HTML5的新增特性： fetch
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
// h5新增的一个API，基于promise
fetch('请求的url地址').then(res=> {
// 第一层需要处理数据
return res.json()
}).then(data=> {
console.log(data);
})
</script>
</body>
</html>
四、当前最常用的Axios
- 老尤推荐的
- axios支持promise
- axios支持拦截器
- axios支持全局配置
- axios既支持前端又支持后端（nodejs）
- …
// 下载axios.js文件
// get语法
axios.get(url).then(ret => {
// ret是响应的一个聚合对象，有这样一些属性
// headers、config、request、status、statusText、data
// data属性：响应的内容
});
// post语法
// 发送普通表单提交的
// 请求头content-type: application/x-www-form-urlencoded
// 请求体是form data
axios.post(url,"查询字符串").then(ret => {
});
// 发送的是json格式的数据
// 请求头content-type: application/json
// 请求体是request payload
axios.post(url,普通的对象).then(ret => {
});
// 复杂语法：类似于$.ajax()
axios({
url,
method,
timeout,
....
});
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
<script>
// 打开npm.js
// get
// 参数一1；接口地址
// 参数2：是一个配置对象
// res是整个对象信息，res.data是接口返回出来的信息
axios.get('请求的url地址',{}).then(res=>{
console.log(res.data)
})
// params 就是传get类型的参数
axios.get('请求的url地址',{
params: {
pageSize: 2
}
}).then(res=>{
console.log(res.data)
})
axios.get('请求的url地址',{
params: {
pageSize: 2
}
}).then(res=>{
console.log(res.data)
})
axios.post('请求的url地址','type=类型').then(res=>{
console.log(res)
})
</script>
</body>
</html>
axios的全局配置
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
<script>
// 因为之前请求数据的方法，总是会重复写请求路径的根地址，这样使得我们的代码太冗余
// 所以axios给了我们很方便的api，全局配置路由
// defaults 属性就是用来添加全局属性的
axios.defaults.baseURL = '请求地址的根路径'
// 添加一个header信息，熟悉名叫： Authorization(授权) AUTH_TOKEN(授权的值)
// axios.defaults.headers.common['Authorization'] = AUTH_TOKEN;
axios.defaults.headers.common['token'] = 'token需要的值';
// axios对post请求做的处理，里面的值填posy的数据类型eg：formdata，x-www-form-urlencoded等
axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded';
// 现在使用请求的时候就会自动拼接上根地址
axios.get('/类型').then(res=> {
console.log(res);
})
// 问题：假如不止一个根地址，那么怎么使用axios？
// 除非每个axios对象是一个单文件，不然不建议这么写，因为最下面的会覆盖上面的
function axiosFun1() {
axios.defaults.baseURL = '请求数据url地址'
return axios
}
function axiosFun2() {
axios.defaults.baseURL = '请求数据url地址2'
return axios
}
const axios1 = axiosFun1();
const axios2 = axiosFun2();
</script>
</body>
</html>
创建Ajax的实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
// 之前发的请求都是 别名的方式（把请求方式封装成一个方法）； get() post()
// axois 的直接调用
axios({
method: 'GET',
url: '完整的路径（http://www.xxx.com:参数）'
}).then(res=> {
console.log(res.data);
})
// 对参数上可以有更多的自定义
// 自定义axios实例
// axios给我们提供了一个api，让我们创建它的实例
// Creating an instance
const myAxios = axios.create({
baseURL: '路由根地址1'
})
myAxios.get('/路由接口').then(res=> {
console.log(res);
})
const youAxios = axios.create({
baseURL: '路由根地址2'
})
youAxios.post('/路由接口', '参数').then(res=> {
console.log(res);
})
</script>
</body>
</html>
axios在Vue中的使用
首先在Vue项目文件的src目录下创建utils文件夹
然后在此文件中配置axios实例
import axios from 'axios';
import qs from 'qs'
// 1.创建实例
const myaxios = axios.create({
baseURL: '请求地址根路径'
})
// 请求拦截
myaxios.interceptors.request.use(function(config){
// 使用qs 来处理post的参数
config.data = qs.stringify(config.data)
return config
})
// 响应拦截
myaxios.interceptors.response.use(function(res){
return res.data
})
export default myaxios
然后在页面上调用就可以
<template>
<div class="home">
<ul>
<li v-for="item in list">
<!-- {{item.type}} -->
{{item.title}}
</li>
</ul>
</div>
</template>
<script>
import myaxios from '@/utils/axios';
export default {
name: 'HomeView',
data() {
return {
list: []
}
},
mounted() {
myaxios.post('/news',{
type:'NBA'
}).then(res=> {
this.list = res.data
console.log(res.data);
})
}
}
</script>
或许你想要全局使用axios，那你可以把它挂载到Vue实例上，那么你只需要在Vue项目的main.js中这样配置（注意：Vue3不建议这样使用）
import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
// 把请求工具挂载到vue实例(app)中
// 就可以全局使用 请求工具了
// 注意点 vue2是允许这样写的, 但是在vue3中就不建议
import myaxios from './utils/axios'
const app = createApp(App)
app.config.globalProperties.$axios = myaxios
app.use(store)
app.use(router)
app.mount('#app')
在.vue文件中使用
<script>
export default {
data(){
return {
info: {}
}
},
mounted(){
// 直接使用Vue实例调用即可
this.$axios.post('/newsinfo',{newsid:'5f9938dd232a2c205391b111'}).then(res=>{
this.info = res.data
})
}
}
</script>
axios请求接口的模块化
你可能觉得在每一个接口请求你都要写一大串原始请求，那接下来的方法，会让你轻松不少
小知识点
// 1
import myaxios from "@/utils/axios";
// 2
export function getlist(data){
return myaxios.post('/news',data)
}
export function addnews(data){
return myaxios({
url: '/news',
method:'post',
params: data
})
}
export function delnews(){
return myaxios.delete('/news',{
data
})
}
// RESTful 的代码接口风格
// 新闻的操作为例
// 增删改查 对应的4接口
// /news/add /news/del/:id /news/update /news/list
// /table/add /table/del/:id /table/update /table/list
// /user/add /user/del/:id /user/update /user/list
// 虽然说接口的定义都是后端给的 , 后端也可能为了少一个news ,
// RESTful 就换成不同提交方法来对不同的操作
// get: list
// put : add
// delete: del
// post: updata
// 和news相关的接口 都叫news
// 根据不同提交方法来区分不同的操作
// axios.post('/news',{id}) //修改
// axios.get('/news') //获取列表
// axios.put('/news') // 添加
// axios.delete('/news',{id}) //删除
总结
提示：案例参考
例如：以上就是今天要讲的内容，本文简单介绍了请求路由的多种方式。
扫一扫
200
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
