深入axios

最新推荐文章于 2024-02-25 14:43:46 发布
最新推荐文章于 2024-02-25 14:43:46 发布
阅读量494 收藏 1
点赞数
分类专栏： 前端 文章标签： vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_42491370/article/details/104176336
版权

axios学习

文章目录

一、HTTP知识相关

1. MDN文档

https://developer.mozilla.org/zh-CN/docs/Web/HTTP/Overview

2. HTTP请求交互的基本过程

1). 前后应用从浏览器端向服务器发送HTTP请求(请求报文)
2). 后台服务器接收到请求后, 调度服务器应用处理请求, 向浏览器端返回HTTP响应(响应报文)
3). 浏览器端接收到响应, 解析显示响应体/调用监视回调

3. 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}

​

4. HTTP响应报文

1). 响应状态码: 200/404
2). 多个响应头
    Content-Type: text/html;charset=utf-8
    Set-Cookie: BD_CK_SAM=1;path=/
3). 响应体
    html文本/json文本/js/css/图片...

5. 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
    用于文件上传请求

6. 常见响应状态码

200	 OK                     请求成功。一般用于GET与POST请求
201  Created                已创建。成功请求并创建了新的资源
401  Unauthorized           未授权/请求要求用户的身份认证
404  Not Found              服务器无法根据客户端的请求找到资源
500  Internal Server Error  服务器内部错误，无法完成请求

7. 不同类型的请求及其作用

1). GET: 从服务器端读取数据
2). POST: 向服务器端添加新数据
3). PUT: 更新服务器端已经数据
4). DELETE: 删除服务器端数据

8. API的分类

1). REST API:    restful
    发送请求进行CRUD哪个操作由请求方式来决定
    同一个请求路径可以进行多个操作
    请求方式会用到GET/POST/PUT/DELETE
2). 非REST API:   restless
    请求方式不决定请求的CRUD操作
    一个请求路径只对应一个操作
    一般只有GET/POST

9. json-server是什么?

用来快速搭建REST API的工具包

10. 使用json-server

在线文档: https://github.com/typicode/json-server
下载: npm install -g json-server
目标根目录下创建数据库json文件: db.json
    {
      "posts": [
        { "id": 1, "title": "json-server", "author": "typicode" }
      ],
      "comments": [
        { "id": 1, "body": "some comment", "postId": 1 }
      ],
      "profile": { "name": "typicode" }
    }
启动服务器
    执行命令: json-server --watch db.json

11. 测试访问1: 使用浏览器

 http://localhost:3000/posts
 http://localhost:3000/posts/1

12. 测试访问: 使用axios

<script src="https://cdn.bootcss.com/axios/0.19.0/axios.js"></script>
<script>
  // 30分钟内不再发预检请求
  // axios.defaults.headers["Access-Control-Max-Age"] = "1800"

  /* 1. GET请求: 从服务器端获取数据*/
  function testGet() {
    // axios.get('http://localhost:3000/posts') // 获取所有posts的数组
    // axios.get('http://localhost:3000/posts/1') // 获取id为1的数组
    // axios.get('http://localhost:3000/posts?id=1&id=2') // 获取id为1或2的数组
    // axios.get('http://localhost:3000/posts?title=json-server&author=typicode')
  }
  testGet()

  /* 2. POST请求: 向服务器端添加新数据*/
  function testPost() {
    // axios.post('http://localhost:3000/comments', {body: 'xxx', postId: 1}) // 保存数据
  }
  testPost()

  /* 3. PUT请求: 更新服务器端已经数据 */
  function testPut() {
    // axios.put('http://localhost:3000/comments/4', {body: 'yyy', postId: 1})
  }
  testPut()

  /* 4. DELETE请求: 删除服务器端数据 */
  function testDelete() {
    // axios.delete('http://localhost:3000/comments/4')
  }
  testDelete()
</script>

二、XHR的理解和使用

1. 文档

https://developer.mozilla.org/zh-CN/docs/Web/API/XMLHttpRequest

2. 理解

使用XMLHttpRequest (XHR)对象可以与服务器交互, 也就是发送ajax请求
前端可以获取到数据，而无需让整个的页面刷新。
这使得Web页面可以只更新页面的局部，而不影响用户的操作。

3. 区别一般的HTTP请求与ajax请求

ajax请求是一种特别的http请求
对服务器端来说, 没有任何区别, 区别在浏览器端
浏览器端发请求: 只有XHR或fetch发出的才是ajax请求, 其它所有的都是非ajax请求
浏览器端接收到响应
    一般请求: 浏览器一般会直接显示响应体数据, 也就是我们常说的刷新/跳转页面
    ajax请求: 浏览器不会对界面进行任何更新操作, 只是调用监视的回调函数并传入响应相关数据

4. 使用语法

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): 设置请求头

5. XHR的简单封装

1). 特点

函数的返回值为promise, 成功的结果为response, 异常的结果为error
能处理多种类型的请求: GET/POST/PUT/DELETE
函数的参数为一个配置对象
响应json数据自动解析为js

2) 编码实现

/* 
使用XHR封装发送ajax请求的通用函数 
  返回值: promise
  参数为配置对象
    url: 请求地址
    params: 包含所有query请求参数的对象
    data: 包含所有请求体参数数据的对象
    method: 为请求方式
*/
function axios({url, params={}, data={}, method='GET'}) {
  // 返回一个promise对象
  return new Promise((resolve, reject) => {
    // 创建一个XHR对象
    const request = new XMLHttpRequest()
    
    // 根据params拼接query参数
    let queryStr = Object.keys(params).reduce((pre, key) => {
      pre += `&${key}=${params[key]}`
      return pre
    }, '')
    if (queryStr.length>0) {
      queryStr = queryStr.substring(1)
      url += '?' + queryStr
    }
    // 请求方式转换为大写
    method = method.toUpperCase()
    
    // 初始化一个异步请求(还没发请求)
    request.open(method, url, true)
    // 绑定请求状态改变的监听
    request.onreadystatechange = function () {
      // 如果状态值不为4, 直接结束(请求还没有结束)
      if (request.readyState !== 4) {
        return
      }
      // 如果响应码在200~~299之间, 说明请求都是成功的
      if (request.status>=200 && request.status<300) {
        // 准备响应数据对象
        const responseData = {
          data: request.response,
          status: request.status,
          statusText: request.statusText
        }
        // 指定promise成功及结果值
        resolve(responseData)
      } else { // 请求失败了
        // 指定promise失败及结果值
        const error = new Error('request error staus '+ request.status)
        reject(error)
      }
    }

    // 指定响应数据格式为json ==> 内部就是自动解析好
    request.responseType = 'json'

    // 如果是post/put请求
    if (method==='POST' || method==='PUT') {
      // 设置请求头: 使请求体参数以json形式传递
      request.setRequestHeader('Content-Type', 'application/json;charset=utf-8')
      // 包含所有请求参数的对象转换为json格式
      const dataJson = JSON.stringify(data)
      // 发送请求, 指定请求体数据
      request.send(dataJson)
    } else {// GET/DELETE请求
      // 发送请求
      request.send(null)
    }
  })
}

3). 测试

function testGet() {
  axios({
    url: 'http://localhost:3000/comments',
    // url: 'http://localhost:3000/comments2',
    params: {id: 5, body: 'aaaa'},
  }).then(response => {
    console.log('get success', response.data, response)
  }).catch(error => {
    alert(error.message)
  })
}

function testPost() {
  axios({
    url: 'http://localhost:3000/comments',
    // url: 'http://localhost:3000/comments2',
    method: 'POST',
    data: { body: 'aaaa', postId: 2 }
  }).then(response => {
    console.log('post success', response.data, response)
  }).catch(error => {
    alert(error.message)
  })
}

function testPut() {
  axios({
    // url: 'http://localhost:3000/comments/6',
    url: 'http://localhost:3000/comments/3',
    method: 'put',
    data: {body: 'abcdefg', "postId": 2}
  }).then(response => {
    console.log('put success', response.data, response)
  }).catch(error => {
    alert(error.message)
  })
}

function testDelete() {
  axios({
    url: 'http://localhost:3000/comments/6',
    method: 'delete',
  }).then(response => {
    console.log('delete success', response.data, response)
  }).catch(error => {
    alert(error.message)
  })
}

三、axios的理解和使用

1. 文档

https://github.com/axios/axios

2. 是什么

前端最流行的ajax请求库
react/vue官方都推荐使用axios发ajax请求

3. axios的特点

基本promise的异步ajax请求库
浏览器端/node端都可以使用
支持请求／响应拦截器
支持请求取消
请求/响应数据转换
批量发送多个请求

4. 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(): 用来指定接收所有成功数据的回调函数的方法

5. 难点语法理解与使用

1). axios.create(config) 
    a. 根据指定配置创建一个新的axios, 也就就每个新axios都有自己的配置
    b. 新axios只是没有取消请求和批量发请求的方法, 其它所有语法都是一致的
    c. 为什么要设计这个语法?
        需求: 项目中有部分接口需要的配置与另一部分接口需要的配置不太一样, 如何处理
        解决: 创建2个新axios, 每个都有自己特有的配置, 分别应用到不同要求的接口请求中

2). 拦截器函数/ajax请求/请求的回调函数的调用顺序
    a. 说明: 调用axios()并不是立即发送ajax请求, 而是需要经历一个较长的流程
    b. 流程: 请求拦截器2 => 请求拦截器1 => 发ajax请求 => 响应拦截器1 => 响应拦截器2 => 请求的回调
    c. 注意: 此流程是通过promise串连起来的, 请求拦截器传递的是config, 响应拦截器传递的是response
            错误流程控制与错误处理

3). 取消请求
    a. 基本流程: 
        配置cancelToken对象
        缓存用于取消请求的cancel函数
        在后面特定时机调用cancel函数取消请求
        在错误回调中判断如果error是cancel, 做相应处理
    b. 实现功能
        点击按钮, 取消某个正在请求中的请求
        在请求一个接口前, 取消前面一个未完成的请求

四、axios源码分析

0. 学习文档

https://juejin.im/post/5b0ba2d56fb9a00a1357a334

1. 源码目录结构

├── /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 # 入口文件

2. 源码分析

1). axios与Axios的关系

2). axios为什么能有多种发请求的方法?

axios函数对应的是Axios.prototype.request方法通过bind(Axiox的实例)产生的函数
axios有Axios原型上的所有发特定类型请求的方法: get()/post()/put()/delete()
axios有Axios的实例上的所有属性: defaults/interceptors
后面又添加了create()/CancelToken()/all()

3). axios.create()返回的对象与axios的区别?

相同: 
    都是一个能发任意请求的函数: request(config)
    都有发特定请求的各种方法: get()/post()/put()/delete()
    都有默认配置和拦截器的属性: defaults/interceptors
不同:
    默认匹配的值很可能不一样
    instance没有axios后面添加的一引起方法: create()/CancelToken()/all()

4). axios运行的整体流程

5). Axios.prototype.request()都做了什么?

6). dispatchrequest()都做了什么?

7). xhrAdapter()做了什么?

整体流程: request(config)  ===> dispatchRequest(config) ===> xhrAdapter(config)
request(config): 将请求拦截器 / dispatchRequest() / 响应拦截器 通过promise链串连起来, 返回promise
dispatchRequest(config): 转换请求数据 ===> 调用xhrAdapter()发请求 ===> 请求返回后转换响应数据. 返回promise
xhrAdapter(config): 创建XHR对象, 根据config进行相应设置, 发送特定请求, 并接收响应数据, 返回promise

8). axios的请求/响应拦截器是什么?

请求拦截器: 在真正发请求前, 可以对请求进行检查或配置进行特定处理的函数, 包括成功/失败的函数, 传递的必须是config
响应拦截器: 在请求返回后, 可以对响应数据进行特定处理的函数, 包括成功/失败的函数, 传递的默认是response

9). axios的请求/响应数据转换器是什么?

请求转换器: 对请求头和请求体数据进行特定处理的函数
    setContentTypeIfUnset(headers, 'application/json;charset=utf-8');
    return JSON.stringify(data)
响应转换器: 将响应体json字符串解析为js对象或数组的函数
    response.data = JSON.parse(response.data)

10). response的整体结构

{
    data,
    status,
    statusText,
    headers,
    config,
    request
}

11). error的整体结构

{
    message,
    request,
    response
}

12). 如何取消已经发送的请求?

1.当配置了cancelToken对象时, 保存cancel函数
    创建一个用于将来中断请求的cancelPromise
    并定义了一个用于取消请求的cancel函数
    将cancel函数传递出来
2.调用cancel()取消请求
    执行cacel函数, 传入错误信息message
    内部会让cancelPromise变为成功, 且成功的值为一个Cancel对象
    在cancelPromise的成功回调中中断请求, 并让发请求的proimse失败, 失败的reason为Cacel对象

axios从入门到源码分析

1. 前后台交互的基本过程

1. 前后应用从浏览器端向服务器发送HTTP请求(请求报文)
2. 后台服务器接收到请求后, 调度服务器应用处理请求, 向浏览器端返回HTTP响应(响应报文)
3. 浏览器端接收到响应, 解析显示响应体/调用监视回调

2. HTTP请求报文

1. 请求行: 请求方式/url
2. 多个请求头: 一个请求头由name:value组成, 如Host/Cookie/Content-Type头
3. 请求体

3. HTTP响应报文

1. 响应行: 响应状态码/对应的文本
2. 多个响应头: 如 Content-Type / Set-Cookie 头
3. 响应体

4. 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}

5. 常见响应状态码

200	OK                     请求成功。一般用于GET与POST请求
201 Created                已创建。成功请求并创建了新的资源
401 Unauthorized           未授权/请求要求用户的身份认证
404 Not Found              服务器无法根据客户端的请求找到资源
500 Internal Server Error  服务器内部错误，无法完成请求

6. 不同类型的请求及其作用:

1. GET: 从服务器端读取数据
2. POST: 向服务器端添加新数据
3. PUT: 更新服务器端已经数据
4. DELETE: 删除服务器端数据

7. API的分类

1. REST API:    restful
    发送请求进行CRUD哪个操作由请求方式来决定
    同一个请求路径可以进行多个操作
    请求方式会用到GET/POST/PUT/DELETE
2. 非REST API:   restless
    请求方式不决定请求的CRUD操作
    一个请求路径只对应一个操作
    一般只有GET/POST
测试: 可以使用json-server快速搭建模拟的rest api 接口

8. 理解XHR

使用XMLHttpRequest (XHR)对象可以与服务器交互, 也就是发送ajax请求
前端可以获取到数据，而无需让整个的页面刷新。
这使得Web页面可以只更新页面的局部，而不影响用户的操作。

9. 区别ajax请求与一般HTTP请求

ajax请求是一种特别的http请求: 只有通过XHR/fetch发送的是ajax请求, 其它都是一般HTTP请求
对服务器端来说, 没有任何区别, 区别在浏览器端
浏览器端发请求: 只有XHR或fetch发出的才是ajax请求, 其它所有的都是非ajax请求
浏览器端接收到响应
    一般请求: 浏览器一般会直接显示响应体数据, 也就是我们常说的刷新/跳转页面
    ajax请求: 浏览器不会对界面进行任何更新操作, 只是调用监视的回调函数并传入响应相关数据

10. 使用XHR封装一个发ajax请求的通用函数

函数的返回值为promise, 成功的结果为response, 异常的结果为error
能处理多种类型的请求: GET/POST/PUT/DELETE
函数的参数为一个配置对象: url/method/params/data
响应json数据自动解析为了js

11. axios的特点

基于promise的封装XHR的异步ajax请求库
浏览器端/node端都可以使用
支持请求／响应拦截器
支持请求取消
请求/响应数据转换
批量发送多个请求

12. 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(): 用来指定接收所有成功数据的回调函数的方法

13. 源码难点与流程分析

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

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-qR9Ua8Zc-1580827121413)(http://vipkshttp1.wiz.cn/ks/share/resources/49c30824-dcdf-4bd0-af2a-708f490b44a1/584701e2-1d9b-4523-b9b2-0f33e838dd7f/index_files/e5692e36861bd1d2fa1735c5ab801af7.png)]

4. axios的请求/响应拦截器是什么?
    1). 请求拦截器: 在真正发请求前, 可以对请求进行检查或配置进行特定处理的函数, 
               包括成功/失败的函数, 传递的必须是config
    2). 响应拦截器: 在请求返回后, 可以对响应数据进行特定处理的函数,
               包括成功/失败的函数, 传递的默认是response

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-skLbMjIZ-1580827121415)(http://vipkshttp1.wiz.cn/ks/share/resources/49c30824-dcdf-4bd0-af2a-708f490b44a1/584701e2-1d9b-4523-b9b2-0f33e838dd7f/index_files/b0f95169782409e7576bc9704b93b693.png)]

5. axios的请求/响应数据转换器是什么?
    1). 请求转换器: 对请求头和请求体数据进行特定处理的函数
        setContentTypeIfUnset(headers, 'application/json;charset=utf-8');
        return JSON.stringify(data)
    2). 响应转换器: 将响应体json字符串解析为js对象或数组的函数
        response.data = JSON.parse(response.data)

6. response的整体结构
    {
        data,
        status,
        statusText,
        headers,
        config,
        request
    }

7. error的整体结构
    {
        message,
        request,
        response
    }

8. 如何取消未完成的请求
    1).当配置了cancelToken对象时, 保存cancel函数
        创建一个用于将来中断请求的cancelPromise
        并定义了一个用于取消请求的cancel函数
        将cancel函数传递出来
    2.调用cancel()取消请求
        执行cacel函数, 传入错误信息message
        内部会让cancelPromise变为成功, 且成功的值为一个Cancel对象
        在cancelPromise的成功回调中中断请求, 并让发请求的proimse失败, 失败的reason为Cacel对象
追梦者的年轻人
关注
专栏目录
axios：基本使用、常用配置项、create方法、请求和响应拦截器、取消请求
weixin_42044763的博客
01-05 5044
一般来说，我们都会省略then的失败回调，所有的错误都在响应拦截器中捕获，做法就是在响应拦截器失败的回调中进行错误提示，并返回一个pending状态的Promise，这样的话我们使用async/await就不用包try-catch了，then也就不用指定失败的回调了。当请求结束后，如果请求成功，就会走第一个回调，然后再走then中成功的回调，所以这里的返回值就是Promise成功的值；是得到响应之后执行的一组回调函数，若请求成功，对成功的数据（成功Promise的结果值）进行处理；一般来说只有一个回调。
axios.create()
JEFF_xieyuzhi的博客
11-28 2万+
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X...
axios.create
weixin_45225340的博客
03-13 353
https://www.jianshu.com/p/ff5d2b55139a
axios （get，post，put，delete），常用配置，全局配置，axios.create(config)配置一个新的axios
Allen的博客
12-01 4909
axios （get，post，put，delete），常用配置，全局配置，axios.create(config)配置一个新的axios
axios.create、拦截器、取消请求
huang_wei_xiong的博客
01-07 1168
axios.create(config) 根据指定配置创建一个新的 axios, 也就就每个新 axios 都有自己的配置 新 axios 只是没有取消请求和批量发请求的方法, 其它所有语法都是一致的 为什么要设计这个语法? (1) 需求: 项目中有部分接口需要的配置与另一部分接口需要的配置不太一 样, 如何处理 (2) 解决: 创建 2 个新 axios, 每个都有自己特有的配置, 分别应用到不同要 求的接口请求中 <!DOCTYPE html> <html lang="en"&gt
axios.min.v0.17.1
03-19
本文将深入探讨Vue.js v2.6.12与axios.min.v0.17.1的协同工作原理及其在实际项目中的应用。 Vue.js v2.6.12作为Vue.js的稳定版本，引入了许多改进和优化。其核心特性包括组件化、响应式数据绑定、指令系统、计算...
VUE2.0 Axios深入浅出
06-08
要解决一下几个问题： 1.app.get is not a function解决方案（vue1.0升级到vue2.0的bug） 2.没有dev-server.js文件，如何进行后台数据模拟？ 3.axios如何直接跨域mock网站的返回值
axios安装包
02-19
通过深入学习 Axios，开发者能够更高效地处理 HTTP 请求，提升前端项目的性能和安全性。同时，标签中的“前端技术”也提醒我们，Axios 是现代前端开发中不可或缺的工具之一。在实际项目中，结合其他前端框架（如 Vue...
vue axios v0.19.2 版本，java 開發 前端 下載
01-17
首先，让我们深入了解一下Vue.js中的Axios集成： 1. **安装Axios**：在Vue项目中，通常使用npm（Node Package Manager）来安装Axios。命令如下： ``` npm install axios ``` 或者，如果你使用yarn，可以运行： ...
axios详解-从零开始轻松搞定：探索Axios多对象传值与文件上传下
08-16
本篇文章将深入探讨如何使用 Axios 进行多对象传值以及文件上传，旨在帮助开发者从零开始轻松掌握这两个重要功能。 ### 一、Axios 多对象传值 在进行 API 调用时，我们经常需要传递多个参数。Axios 提供了方便的...
axios自定义生成
最新发布
comelinux的博客
02-25 421
【代码】axios自定义生成。
axios.create的使用
weixin_50736511的博客
11-03 1万+
axios.create的使用 axios.create的使用场景 当有多个后端端口时每个端口时如果单纯使用axios太麻烦使用axios.create就非常的方便 现在我们有两个端口 //发送3000端口 axios.defaults.baseURL=‘http://localhost:3000’ axios({ url:’/posts’ }) //发送4000端口 const instance = axios.create({ //指定基础路径（注意格式）里门可有多个参数 baseURL:‘htt
axios
一眼见你，万物不及
01-26 174
axios的基体请求使用 /*引入axios*/ import axios from 'axios' /*创建axios实例对象*/ const ajax = axios.create({ baseURL: ajaxUrl, timeout: 30000 }) /*请求拦截器（请求之前的操作）*/ ajax.interceptors.request.use( config => { return config }, /*错误操作*/ err => {
axios的开始了解 axios.create等等
qq_44917015的博客
12-11 933
axios的总结 axios.create( config ) 根据指定配置创建一个新的axios实例；也就是每个新的axios都有自己 新的配置； 有些接口的配置和一些接口的配置不一样 所以需要 创建2个新的axios 每个都有自己新的配置 分别应用到不同请求的接口中； axios.defaults.baseURL = "http://xxxxxx"; axios({ url:"/postssss" }) 创建一个新的axios const instance = axios.crea
axios 的理解和使用 axios.create(对axios请求进行二次封装) 拦截器 取消请求(axios.CancelToken)
热门推荐
weixin_42448623的博客
03-10 4万+
目录axios是什么axios特点axios常用语法axios安装axios简单使用默认get请求postputdeleteaxios难点语法axios.create(config) 对axios请求进行二次封装axios的处理链流程 拦截器拦截器简单使用多个拦截器取消请求1. 基本流程2. 实现功能在 请求拦截器里面统一添加取消请求在 响应拦截器里面统一添加 处理取消请求代码简化 实现上...
2022-02-08 axios笔记(四) axios.create()创建axios实例,设置拦截器,axios取消请求
GAARA
02-08 593
文章目录 1.使用axios.create(config)创建axios实例 主要用途:在项目中,对axios的二次封装(面试必问) 语法和结构 示例(待验证.......) 2.设置拦截器 3.axios取消请求 1.使用axios.create(config)创建axios实例 主要用途:在项目中,对axios的二次封装(面试必问) 为什么叫二次封装? 因为axios({})请求函数本身就是一个基于promise的、对xhr对象的封装函数 语法和结构 const instance=axios.cr
（杂七杂八）npm镜像查看与修改，nrm，axios.create作用，Proxy代理升降序案例，Proxy的has，babel处理js，查看webkit属性，关于state的赋值，模块化非导出项问题
qq_40196738的博客
02-19 261
1、npm镜像查看 查看 npm config get registry 修改 npm config set registry http://registry.npm.taobao.org 2、nrm nrm 管理镜像源地址 nrm npm地址
axios创建实例与不创建实例/创建实例的作用
前端小师姐迪迪_的博客
08-17 861
3）在处理相应拦截时处理内容完全不同，比如两个不同的axios实例请求了两个完全不同的服务器，而这两个服务器返回数据的code规则完全不同，这就要在各自的拦截器中分别处理了。2）在处理请求拦截时处理内容完全不同，比如你可以在实例A的请求拦截里面设置Loading转圈，而在另一个实例B中不使用loading转圈。，其实并不是使用了axios.create()才创建了一个实例（单例），而是上面3种方法都创建了实例。我们看到axios的官方文档中有创建axios实例去发送请求的方式。...
前端开发：深入理解axios及其HTTP交互
"前端开发者在学习axios库的笔记，主要涵盖了HTTP请求交互的基本流程、请求报文和响应报文的组成部分，以及常见的HTTP响应状态码。" 在前端开发中，axios是一个常用的JavaScript库，用于发起HTTP请求。这篇学习笔记...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值