axios学习笔记
1 与ajax的区别
axios是通过promise实现对ajax技术的一种封装，就像jQuery实现ajax封装，是现在前端最流行的ajax请求库
简单来说： ajax技术实现了网页的局部数据刷新，axios实现了对ajax的封装。
ajax请求是一种特别的http请求
对服务器端来说, 没有任何区别, 区别在浏览器端
浏览器端发请求: 只有XHR或fetch发出的才是ajax请求, 其它所有的都是非ajax请求
浏览器端接收到响应
一般请求: 浏览器一般会直接显示响应体数据, 也就是我们常说的刷新/跳转页面
ajax请求: 浏览器不会对界面进行任何更新操作, 只是调用监视的回调函数并传入响应相关数据
XHR 语法
XMLHttpRequest(): 创建XHR对象的构造函数
status: 响应状态码值, 比如200, 404
statusText: 响应状态文本
readyState: 标识请求状态的只读属性
0: 初始
1: open()之后
2: send()之后
3: 请求中
4: 请求完成
onreadystatechange: 绑定readyState改变的监听
responseType: 指定响应数据类型, 如果是'json', 得到响应后自动解析响应体数据
response: 响应体数据, 类型取决于responseType的指定
timeout: 指定请求超时时间, 默认为0代表没有限制
ontimeout: 绑定超时的监听
onerror: 绑定请求网络错误的监听
open(): 初始化一个请求, 参数为: (method, url[, async])
send(data): 发送请求
abort(): 中断请求
getResponseHeader(name): 获取指定名称的响应头值
getAllResponseHeaders(): 获取所有响应头组成的字符串
setRequestHeader(name, value): 设置请求头
函数和对象的区分
点的左边是对象，括号左边是函数，函数对象，配置对象（对象中的属性名是固定的，文档会说明，每个属性的作用也是固定的），执行器函数：例如 promise的函数
2 XMLHttpRequest（XHR）
对象用于与服务器交互。通过 XMLHttpRequest 可以在不刷新页面的情况下请求特定 URL，获取数据。这允许网页在不影响用户操作的情况下，更新页面的局部内容。XMLHttpRequest 在 AJAX 编程中被大量使用。
「 HTTP请求报文」
1). 请求行:
method url
GET /product_detail?id=2
POST /login
2). headers: 多个请求头
Host: www.baidu.com
Cookie: BAIDUID=AD3B0FA706E; BIDUPSID=AD3B0FA706;
Content-Type: application/x-www-form-urlencoded 或者 application/json
3). body: 请求体
username=tom&pwd=123
{"username": "tom", "pwd": 123}
「 HTTP响应报文」
1). 响应状态码: 200/404
2). 多个响应头
Content-Type: text/html;charset=utf-8
Set-Cookie: BD_CK_SAM=1;path=/
3). 响应体
html文本/json文本/js/css/图片..
「 post请求体参数格式」
1). Content-Type: application/x-www-form-urlencoded;charset=utf-8
用于键值对参数，参数的键值用=连接, 参数之间用&连接
例如: name=%E5%B0%8F%E6%98%8E&age=12
2). Content-Type: application/json;charset=utf-8
用于json字符串参数
例如: {"name": "%E5%B0%8F%E6%98%8E", "age": 12}
3). Content-Type: multipart/form-data
用于文件上传请求
「 常见响应状态码」
200 OK 请求成功。一般用于GET与POST请求
201 Created 已创建。成功请求并创建了新的资源
401 Unauthorized 未授权/请求要求用户的身份认证
404 Not Found 服务器无法根据客户端的请求找到资源
500 Internal Server Error 服务器内部错误，无法完成请求
3 ajax封装
// 区别ajax请求与一般HTTP请求
ajax请求是一种特别的http请求: 只有通过XHR/fetch发送的是ajax请求, 其它都是一般HTTP请求
对服务器端来说, 没有任何区别, 区别在浏览器端
浏览器端发请求: 只有XHR或fetch发出的才是ajax请求, 其它所有的都是非ajax请求
浏览器端接收到响应
一般请求: 浏览器一般会直接显示响应体数据, 也就是我们常说的刷新/跳转页面
ajax请求: 浏览器不会对界面进行任何更新操作, 只是调用监视的回调函数并传入响应相关数据
1. 函数的返回值为promise，成功的结果为 response，失败的结果为 error
2. 能处理多种类型的请求：GET/POST/PUT/DELETE
3. 函数的参数为一个配置对象
{
url：‘’， // 请求地址
method：‘’ // 请求方式GET/POST/PUT/DELETE
params：{}， // GET/DELETE请求的query参数
data：{}， // POST或DELETE请求的 请求体参数
}
4. 响应json数据自动解析为js
「post请求携带参数」
发送JSON格式请求体参数，必须加一个请求头setRequestHeader（‘Content-Type’，‘application/json; charset=utf-8’）
// 1. 执行异步ajax请求
// 创建xhr对象
const request = new XMHttpRequest()
// 打开连接（初始化请求，没有给定请求方式）
request.open(method, url, true)
// 发送请求
if(method === 'GET'){
request.send()
}else if（method ===‘POST’）
request.setRequestHeader（‘Content-Type’,‘application/json; charset=utf-8’）
// 告知服务器请求体的格式是json格式
request.send(JSON.stringfy(data)) // 发送json格式请求体参数
「 get请求携带参数」
get请求通过url后面携带，处理query参数拼接到url上 id=1&xxx=abc
var queryString =''
Object.keys（params）.forEach(key =>{
queryString += '${key}=${params[key]}&'
})
if(queryString){
// 去除最后的 &
queryString = queryString.substring(0, queryString.length-1)
url += '?' + queryString
}
// 绑定状态改变的监听
request.onreadystatechange = function(){
// 如果i请求没有完成，直接结束
if（request.readyState!==4）{
return
}
// 如果响应状态码在[200,300)之间代表成功，否则失败
const {status, statusText} = request
if(status >=200 && status <= 299){
// 准备结果数据对象response
const response ={
data：JSON.parse(request.response)
status，
statusText
}
resolve(response)
}else{ // 如果请求失败，调用reject（）
reject(new Error（'request error status is' + status）)
}
}
「PUT和DELETE的使用」
PUT请求：服务器端更新数据
DELETE请求: 服务器端删除数据
4 get/post/put/delete 四个请求的区分
GET请求会向数据库发索取数据的请求，从而来获取信息，该请求就像数据库的select操作一样，只是用来查询一下数据，不会修改、增加数据，不会影响资源的内容，即该请求不会产生副作用。无论进行多少次操作，结果都是一样的。
DELETE请求顾名思义，就是用来删除某一个资源的，该请求就像数据库的delete操作。
POST请求同PUT请求类似，都是向服务器端发送数据的，但是该请求会改变数据的种类等资源，就像数据库的insert操作一样，会创建新的内容。几乎目前所有的提交操作都是用POST请求的。
与GET不同的是，PUT请求是向服务器端发送数据的，从而改变信息，该请求就像数据库的update操作一样，用来修改数据的内容，但是不会增加数据的种类等，也就是说无论进行多少次PUT操作，其结果并没有不同。
POST/DELETE/PUT/GET 对应着
增 / 删/ 改/ 查
5 axios 教程
「 axios特点」
1 基于 xhr + promise的异步 ajax请求库
2 浏览器端 /node端都可以使用
3 支持请求／响应拦截器
4 支持请求取消
5 请求 /响应数据转换
6 批量发送多个请求
「 axios常用语法」
axios(config): 通用 /最本质的发任意类型请求的方式
axios(url[, config]): 可以只指定 url发 get请求
axios.request(config): 等同于 axios(config)
axios.get(url[, config]): 发 get请求
axios.delete(url[, config]): 发 delete请求
axios.post(url[, data, config]): 发 post请求
axios.put(url[, data, config]): 发 put请求
axios.defaults.xxx: 请求的默认全局配置
axios.interceptors.request.use(): 添加请求拦截器
axios.interceptors.response.use(): 添加响应拦截器
axios.create([config]): 创建一个新的 axios(它没有下面的功能 )
axios.Cancel(): 用于创建取消请求的错误对象
axios.CancelToken(): 用于创建取消请求的 token对象
axios.isCancel(): 是否是一个取消请求的错误
axios.all(promises): 用于批量执行多个异步请求
axios.spread(): 用来指定接收所有成功数据的回调函数的方法
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-pyt7DN7U-1625703013454)(C:\Users\WEXIA\Desktop\前端书籍pdf教程\尚硅谷axios从入门到源码分析\尚硅谷_axios从入门到源码分析.jpg)]
「 axios难点语法理解和使用」
1. axios与Axios的关系
axios函数对应的是Axios.prototype.request方法通过bind(Axiox的实例)产生的函数
axios有Axios原型上的所有发特定类型请求的方法: get()/post()/put()/delete()
axios有Axios的实例上的所有属性: defaults/interceptors
后面又添加了create()/CancelToken()/all()
2. axios.create()返回的对象与axios的区别
1). 相同:
都是一个能发任意请求的函数: request(config)
都有发特定请求的各种方法: get()/post()/put()/delete()
都有默认配置和拦截器的属性: defaults/interceptors
2). 不同:
默认匹配的值不一样
instance没有axios后面添加的一引起方法: create()/CancelToken()/all()
3. axios发请求的流程
1). 整体流程: request(config) ===> dispatchRequest(config) ===> xhrAdapter(config)
2). request(config): 将请求拦截器 / dispatchRequest() / 响应拦截器 通过promise链串连起来, 返回promise
3). dispatchRequest(config): 转换请求数据 ===> 调用xhrAdapter()发请求 ===> 请求返回后转换响应数据. 返回promise
4). xhrAdapter(config): 创建XHR对象, 根据config进行相应设置, 发送特定请求, 并接收响应数据, 返回promise
axios.create(config)
1.根据指定配置创建一个新的 axios, 也就就每个新 axios都有自己的配置
2. 新 axios只是没有取消请求和批量发请求的方法 , 其它所有语法都是一致的
3 为什么要设计这个语法 ?
(1) 需求 : 项目中有部分接口需要的配置与另一部分接口需要的配置不太一
样 , 如何处理
(2) 解决 : 创建 2个新 axios, 每个都有自己特有的配置 , 分别应用到不同要
求的接口请求中
拦截器函数/ajax请求 /请求的回调函数的调用顺序
1 说明 : 调用 axios()并不是立即发送 ajax请求 , 而是需要经历一个较长的流程
2 流程 : 请求拦截器 2 => 请求拦截器 1 => 发 ajax请求 => 响应拦截器 1 => 响
应拦截器 2 => 请求的回调
3 注意 : 此流程是通过 promise串连起来的 , 请求拦截器传递的是 config, 响应
拦截器传递的是 response
// 添加请求拦截器
axios.interceptors.request.use(function (config) {
// 在发送请求之前做些什么
return config;
}, function (error) {
// 对请求错误做些什么
return Promise.reject(error);
});
// 添加响应拦截器
axios.interceptors.response.use(function (response) {
// 对响应数据做点什么
return response;
}, function (error) {
// 对响应错误做点什么
return Promise.reject(error);
});
如果你想在稍后移除拦截器，可以这样：
const myInterceptor = axios.interceptors.request.use(function () {/*...*/});
axios.interceptors.request.eject(myInterceptor);
可以为自定义 axios 实例添加拦截器
const instance = axios.create();
instance.interceptors.request.use(function () {/*...*/});
拦截器的具体需求分析：
比如通常会使用 token 进行用户的身份认证。这就要求在认证通过后，我们需要在每个请求上都携带认证信息。针对这个需求，为了避免为每个请求单独处理，所以一般通过封装统一的 request 函数来为每个请求统一添加 token 信息。
但是如果响应进行统一处理的话，会越来越难维护，所以希望在接收到响应之后做一些额外的逻辑。因此，Axios 为我们提供了解决方案 —— 拦截器，作用如下
请求拦截器：该类拦截器的作用是在请求发送前统一执行某些操作，比如在请求头中添加 token 字段。
响应拦截器：该类拦截器的作用是在接收到服务器响应后统一执行某些操作，比如发现响应状态码为 401 时，自动跳转到登录页。
取消请求
基本流程：
配置cancelToken对象、
缓存用于取消请求的 cancel函数、
在后面特定时机调用 cancel函数取消请求、
在错误回调中判断如果 error是 cancel, 做相应处理
实例使用方法可以使用 CancelToken.source 工厂方法创建 cancel token，像这样：
const CancelToken = axios.CancelToken;
const source = CancelToken.source();
axios.get('/user/12345', {
cancelToken: source.token
}).catch(function(thrown) {
if (axios.isCancel(thrown)) {
console.log('Request canceled', thrown.message);
} else {
// 处理错误
}
});
axios.post('/user/12345', {
name: 'new name'
}, {
cancelToken: source.token
})
// 取消请求（message 参数是可选的）
source.cancel('Operation canceled by the user.');
还可以通过传递一个 executor 函数到 CancelToken 的构造函数来创建 cancel token：
const CancelToken = axios.CancelToken;
let cancel;
axios.get('/user/12345', {
cancelToken: new CancelToken(function executor(c) {
// executor 函数接收一个 cancel 函数作为参数
cancel = c;
})
});
// cancel the request
cancel();
实际案例：
// 添加请求拦截器
axios.interceptors.request.use((config) => {
// 在准备发请求前, 取消未完成的请求
if (typeof cancel==='function') {
cancel('取消请求')
}
// 添加一个cancelToken的配置
config.cancelToken = new axios.CancelToken((c) => { // c是用于取消当前请求的函数
// 保存取消函数, 用于之后可能需要取消当前请求
cancel = c
})
return config
})
// 添加响应拦截器
axios.interceptors.response.use(
response => {
cancel = null
return response
},
error => {
if (axios.isCancel(error)) {// 取消请求的错误
// cancel = null
console.log('请求取消的错误', error.message) // 做相应处理
// 中断promise链接
return new Promise(() => {})
} else { // 请求出错了
cancel = null
// 将错误向下传递
// throw error
return Promise.reject(error)
}
}
)
实现功能：
点击按钮 , 取消某个正在请求中的请求
在请求一个接口前, 取消前面一个未完成的请求
let cancel // 用于保存取消请求的函数
function getProducts1() {
// 在准备发请求前, 取消未完成的请求
if (typeof cancel==='function') {
cancel('取消请求')
}
axios({
url: 'http://localhost:4000/products1',
cancelToken: new axios.CancelToken((c) => { // c是用于取消当前请求的函数
// 保存取消函数, 用于之后可能需要取消当前请求
cancel = c
})
}).then(
response => {
cancel = null
console.log('请求1成功了', response.data)
},
error => {
if (axios.isCancel(error)) { // axios自带的isCancel方法
// cancel = null
console.log('请求1取消的错误', error.message)
} else { // 请求出错了
cancel = null
console.log('请求1失败了', error.message)
}
}
)
}
function getProducts2() {
// 在准备发请求前, 取消未完成的请求
if (typeof cancel==='function') {
cancel('取消请求')
}
axios({
url: 'http://localhost:4000/products2',
cancelToken: new axios.CancelToken((c) => { // c是用于取消当前请求的函数
// 保存取消函数, 用于之后可能需要取消当前请求
cancel = c
})
}).then(
response => {
cancel = null
console.log('请求2成功了', response.data)
},
error => {
if (axios.isCancel(error)) {
// cancel = null
console.log('请求2取消的错误', error.message)
} else { // 请求出错了
cancel = null
console.log('请求2失败了', error.message)
}
}
)
}
function cancelReq() {
// alert('取消请求')
// 执行取消请求的函数
if (typeof cancel === 'function') {
cancel('强制取消请求')
} else {
console.log('没有可取消的请求')
}
}
6 axios源码分析
学习网站：https://juejin.cn/post/6844903613609803783
「 源码目录结构」
├── /dist/ # 项目输出目录
├── /lib/ # 项目源码目录
│ ├── /adapters/ # 定义请求的适配器 xhr、http
│ │ ├── http.js # 实现http适配器(包装http包)
│ │ └── xhr.js # 实现xhr适配器(包装xhr对象)
│ ├── /cancel/ # 定义取消功能
│ ├── /core/ # 一些核心功能
│ │ ├── Axios.js # axios的核心主类
│ │ ├── dispatchRequest.js # 用来调用http请求适配器方法发送请求的函数
│ │ ├── InterceptorManager.js # 拦截器的管理器
│ │ └── settle.js # 根据http响应状态，改变Promise的状态
│ ├── /helpers/ # 一些辅助方法
│ ├── axios.js # 对外暴露接口
│ ├── defaults.js # axios的默认配置
│ └── utils.js # 公用工具
├── package.json # 项目信息
├── index.d.ts # 配置TypeScript的声明文件
└── index.js # 入口文件
「 源码分析」
1). axios与Axios的关系？
1. 从语法上来说 : axios不是 Axios的实例
2. 从功能上来说 : axios是 Axios的实例
axios函数对应的是Axios.prototype.request方法通过bind(Axiox的实例)产生的函数
axios有Axios原型上的所有发特定类型请求的方法: get()/post()/put()/delete()
axios有Axios的实例上的所有属性: defaults/interceptors
后面又添加了create()/CancelToken()/all()
2). axios.create()返回的对象instance与 axios的区别
1. 相同 :
(1) 都是一个能发任意请求的函数 : request(config)
(2) 都有发特定请求的各种方法 : get()/post()/put()/delete()
(3) 都有默认配置和拦截器的属性 : defaults/interceptors
2. 不同 :
(1) 默认 配置 很可能不一样
var instance = bind(Axios.prototype.request, context); // axios
axios.create = function create(instanceConfig) {
return createInstance(mergeConfig(axios.defaults, instanceConfig));
};
(2) instance没有 axios后面添加的一些方法 : create()/CancelToken()/all()
3). axios运行的整体流程
1. 整体流程 :
request(config) ==> dispatchRequest(config) ==> xhrAdapter(config)
2. request(config):
将请求拦截器
/ dispatchRequest() / 响应拦截器 通过 promise链串连起来 , 返回 promise
3. dispatchRequest(config):
转换请求数据
===> 调用 xhrAdapter()发请求 ===> 请求返回后转换响应数
据 . 返回 promise
4. xhrAdapter(config):
创建XHR对象 , 根据 config进行相应设置 , 发送特定请求 , 并接收响应数据 , 返回 promise
4). axios的请求/响应拦截器是什么?
promise链串联
请求拦截器: 在真正发请求前, 可以对请求进行检查或配置进行特定处理的函数, 包括成功/失败的函数, 传递的必须是config，请求拦截器用的是 unshit()方法，unshift() 方法将一个或多个元素添加到数组的开头，并返回该数组的新长度(该方法修改原有数组)
响应拦截器: 在请求返回后, 可以对响应数据进行特定处理的函数, 包括成功/失败的函数, 传递的默认是response，响应拦截器用的是push()方法，push() 方法将一个或多个元素添加到数组的末尾，并返回该数组的新长度
shift() 方法从数组中删除第一个元素，并返回该元素的值
5). axios的请求/响应数据转换器是什么?
请求转换器: 对请求头和请求体数据进行特定处理的函数
// 如果data是对象, 指定请求体参数格式为json, 并将参数数据对象转换为json
setContentTypeIfUnset(headers, 'application/json;charset=utf-8');
return JSON.stringify(data)
调用xhrAdapter()发请求
响应转换器: 将响应体json字符串解析为js对象或数组的函数
// 响应数据转换器: 解析字符串类型的data数据
response.data = JSON.parse(response.data)
6). response的整体结构
{
data,
status,
statusText,
headers,
config,
request
}
7). error的整体结构
{
message,
request,
response
}
8). 如何取消已经发送的请求?
1. 当配置了 cancelToken对象时 , 保存 cancel函数
(1) 创建一个用于将来中断请求的 cancelPromise
(2) 并定义了一个用于取消请求的 cancel函数
(3) 将 cancel函数传递出来
2. 调用 cancel()取消请求
(1) 执行 cancel函数 , 传入错误信息 message
(2) 内部会让 cancelPromise变为成功 , 且成功的值为一个 Cancel对象
(3) 在 cancelPromise的成功回调中中断请求 , 并让发请求的 proimse失败 , 失败的 reason为 Cancel对象
7 Axios 各种方法传递参数 Demo
综合性的发起请求:
axios({
method: '请求类型',
url: '请求的URL地址',
data: { /* POST数据 */ },
params: { /* GET参数 */ }
}).then(callback)
axios.get(url[, config])
axios.delete(url[, config])
axios.post(url[, data[, config]])
axios.put(url[, data[, config]])
axios.patch(url[, data[, config]])
GET方法：``axios.get('url', { params: { /*参数*/ } }).then(callback)
// 请求的 URL 地址
var url = 'http://www.liulongbin.top:3006/api/get'
// 请求的参数对象
var paramsObj = { name: 'zs', age: 20 }
// 调用 axios.get() 发起 GET 请求
axios.get(url, { params: paramsObj }).then(function(res) {
// res.data 是服务器返回的数据
var result = res.data
console.log(res)
})
DELETE方法
// #3 axios delete 请求传参 传参的形式和 get 请求一样
axios.delete('http://localhost:3000/axios', {
params: {
id: 111
}
}).then(function(ret){
console.log(ret.data)
})
POST方法:axios.post('url', { /*参数*/ }).then(callback):
// 请求的 URL 地址
var url = 'http://www.liulongbin.top:3006/api/post'
// 要提交到服务器的数据
var dataObj = { location: '北京', address: '顺义' }
// 调用 axios.post() 发起 POST 请求
axios.post(url, dataObj).then(function(res) {
// res.data 是服务器返回的数据
var result = res.data
console.log(result)
})
// 第二种
// # 4.2 通过 URLSearchParams 传递参数
var params = new URLSearchParams();
params.append('uname', 'zhangsan');
params.append('pwd', '111');
axios.post('http://localhost:3000/axios', params).then(function(ret){
console.log(ret.data)
})
PUT方法
// #5 axios put 请求传参 和 post 请求一样
axios.put('http://localhost:3000/axios/123', {
uname: 'lisi',
pwd: 123
}).then(function(ret){
console.log(ret.data)
})
PATCH方法
Axios.patch('demo/url', {
id: 123,
name: 'Henry',
sex: 1,
phone: 13333333
})
全局配置
// # 配置公共的请求头
axios.defaults.baseURL = 'https://api.example.com';
// # 配置 超时时间
axios.defaults.timeout = 2500;
// # 配置公共的请求头
axios.defaults.headers.common['Authorization'] = AUTH_TOKEN;
// # 配置公共的 post 的 Content-Type
// axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded';
拦截器
// # 1. 请求拦截器
axios.interceptors.request.use(function(config) {
console.log(config.url)
// # 1.1 任何请求都会经过这一步 在发送请求之前做些什么
config.headers.mytoken = 'nihao';
// # 1.2 这里一定要return 否则配置不成功
return config;
}, function(err){
// #1.3 对请求错误做点什么
console.log(err)
})
**// **#2. 响应拦截器
axios.interceptors.response.use(function(res) {
// #2.1 在接收响应做些什么
var data = res.data;
return data;
}, function(err){
// #2.2 对响应错误做点什么
console.log(err)
})
案例1：查询用户权限
- 请求路径：rights/:type
- 请求方法：get
- 请求参数
| 参数名 | 参数说明 | 备注 |
|---|---|---|
| type | 类型 | 值 list 或 tree , list 列表显示权限, tree 树状显示权限,参数是url参数:type |
在组件中请求的方式
// get(rights/:type) 先直接复制请求路径，然后把后面的:type 换成 list 或者 tree
const {data:res} = await this.$http.get('rights/list') // 异步请求，把返回的data数据赋值给res，所以要先清楚返回的数据名称
案例2：根据用户id查询信息
- 请求路径：users/:id
- 请求方法：get
- 请求参数
| 参数名 | 参数说明 | 备注 |
|---|---|---|
| id | 用户 ID | 不能为空携带在url中 |
在组件中请求的方式
// get(rights/:type) 先直接复制请求路径，然后把后面的:type 换成 id
async showEditDialog(id) {
const { data: res } = await this.$http.get('users/' + id) }
// 异步请求，把返回的data数据赋值给res，所以要先清楚返回的数据名称
// 这里的 id 是具体的在showEditDialog函数中传入的id
案例3：修改用户状态
- 请求路径：users/:uId/state/:type
- 请求方法：put
- 请求参数
| 参数名 | 参数说明 | 备注 |
|---|---|---|
| uId | 用户 ID | 不能为空携带在url中 |
| type | 用户状态 | 不能为空携带在url中，值为 true 或者 false |
在组件中请求的方式
// put(users/:uId/state/:type) 先直接复制请求路径，然后把后面的:uId 和 :type 换成 具体要传的
async userStateChanged(userinfo) {
const { data: res } = await this.$http.put(
`users/${userinfo.id}/state/${userinfo.mg_state}`)}
// 异步请求，把返回的data数据赋值给res，所以要先清楚返回的数据名称
// 这里的 id 是具体的在showEditDialog函数中传入的id
案例4：用户数据列表
- 请求路径：users
- 请求方法：get
- 请求参数
| 参数名 | 参数说明 | 备注 |
|---|---|---|
| query | 查询参数 | 可以为空 |
| pagenum | 当前页码 | 不能为空 |
| pagesize | 每页显示条数 | 不能为空 |
在组件中请求的方式
// get('users','携带的请求参数') 需要携带的请求参数，用对象传递，其中包含这些值
// queryInfo: {
query: '',
// 当前的页数
pagenum: 1,
pagesize: 2,
},
async getUserList() {
const { data: res } = await this.$http.get('users', {
params: this.queryInfo,
})}
// 异步请求，把返回的data数据赋值给res，所以要先清楚返回的数据名称
// 这里的 id 是具体的在showEditDialog函数中传入的id
案例5：编辑用户提交
- 请求路径：users/:id
- 请求方法：put
- 请求参数
| 参数名 | 参数说明 | 备注 |
|---|---|---|
| id | 用户 id | 不能为空 参数是url参数:id |
| 邮箱 | 可以为空 | |
| mobile | 手机号 | 可以为空 |
在组件中请求的方式
// put('users/'+ id, {需要携带的请求参数}) 需要携带的请求参数，用对象传递，其中包含这些值
// editForm在之前的data数据中已经写入了，所以可以拿来取值
const { data: res } = await this.$http.put(
'users/' + this.editForm.id,
{ email: this.editForm.email, mobile: this.editForm.mobile }
)
// 异步请求，把返回的data数据赋值给res，所以要先清楚返回的数据名称
// 这里的 id 是具体的在showEditDialog函数中传入的id
案例3： 商品分类数据列表
- 请求路径：categories
- 请求方法：get
- 请求参数
| 参数名 | 参数说明 | 备注 |
|---|---|---|
| type | [1,2,3] | 值：1，2，3 分别表示显示一层二层三层分类列表 【可选参数】如果不传递，则默认获取所有级别的分类 |
| pagenum | 当前页码值 | 【可选参数】如果不传递，则默认获取所有分类 |
| pagesize | 每页显示多少条数据 | 【可选参数】如果不传递，则默认获取所有分类 |
在组件中请求的方式
async getCateList(){
const {data:res} = await this.$http.get('categories',{params: this.queryInfo}) // 用params指定参数
if(res.data.status!==200){return this.$message.error("获取商品分类数据失败！")}
this.$message.success("获取商品分类数据成功！")
this.catelist = res.data
},
m.id,
{ email: this.editForm.email, mobile: this.editForm.mobile }
)
// 异步请求，把返回的data数据赋值给res，所以要先清楚返回的数据名称
// 这里的 id 是具体的在showEditDialog函数中传入的id
##### 案例3： 商品分类数据列表
- 请求路径：categories
- 请求方法：get
- 请求参数
| 参数名 | 参数说明 | 备注 |
| -------- | ------------------ | ------------------------------------------------------------ |
| type | [1,2,3] | 值：1，2，3 分别表示显示一层二层三层分类列表<br />【可选参数】如果不传递，则默认获取所有级别的分类 |
| pagenum | 当前页码值 | 【可选参数】如果不传递，则默认获取所有分类 |
| pagesize | 每页显示多少条数据 | 【可选参数】如果不传递，则默认获取所有分类 |
**在组件中请求的方式**
async getCateList(){
const {data:res} = await this.KaTeX parse error: Expected '}', got 'EOF' at end of input: …0){return this.message.error(“获取商品分类数据失败！”)}
this.$message.success(“获取商品分类数据成功！”)
this.catelist = res.data
},
扫一扫
447
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
