axios自己学习笔记

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-HWuHXMRT-1624455131943)(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运行的整体流程

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-PGKKlrws-1624455131944)(C:\Users\WEXIA\AppData\Roaming\Typora\typora-user-images\image-20210522201742374.png)]

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的请求/响应拦截器是什么?

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-g3ezTJrz-1624455131945)(C:\Users\WEXIA\AppData\Roaming\Typora\typora-user-images\image-20210522231307544.png)]

​ 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
email	邮箱	可以为空
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
},